小编Gio*_*mio的帖子

Javascript代码组织数据驱动的应用程序

我目前正在研究中/大规模数据驱动的 Asp.net MVC应用程序的前端,我对正确的代码组织/设计模式有所怀疑.Web应用程序由多个页面组成,其中包含使用Razor模板定义的许多Kendo UI MVC小部件.

对于那些不熟悉Kendo的人,剃刀语法被翻译为Javascript,如下面的片段: Kendo服务器端包装器

我在我的脚本文件夹中定义了两个主要文件夹,我按如下方式构建了我的js文件:

  • shared //包含共享的js文件-file1.js -file2.js

  • 页面//每页一个文件

    • page1.js
    • page2.js
    • ...
    • Ticket.js //第4页:)

每个js文件都是使用以下模式定义的单独模块:
注意:内部init函数将每个回调函数注册到窗口事件,偶尔也会注册一个$(document).ready(function(){})块.

;(function () {
    "use strict";

    function Ticket(settings) {
        this.currentPageUrls = settings.currentPageUrls;
        this.currentPageMessages = settings.currentPageMessages;
        this.currentPageEnums = settings.currentPageEnums;
        this.currentPageParameters = settings.currentPageParameters;         


        this.gridManager = new window.gridManager(); //usage of shared modules

        this.init();
    }

    Ticket.prototype.init = function () {           

            $("form").on("submit", function () {
                $(".window-content-sandbox").addClass("k-loading");
            });

            ...
    }    

    Ticket.prototype.onRequestStart = function (e) {

        ...
    }

    //private functions definition
    function private(a, b, …
Run Code Online (Sandbox Code Playgroud)

javascript asp.net-mvc jquery design-patterns kendo-ui

15
推荐指数
1
解决办法
826
查看次数