JavaScript结构,对吗?

JavaScript结构,对吗?,javascript,jquery,oop,Javascript,Jquery,Oop,我正在努力提高javascript编码水平。一个文件中有1000行代码。但我不确定这是否是“正确”的方式: 要求js在“boot.js”中需要时加载文件: MyApp.js var MyApp = { init: function() { MyApp.mainController(); }, // this is our controller, only load stuff needed.. mainController: function() { //controller

我正在努力提高javascript编码水平。一个文件中有1000行代码。但我不确定这是否是“正确”的方式:

要求js在“boot.js”中需要时加载文件:

MyApp.js

var MyApp = {
init: function() {
    MyApp.mainController();
},

// this is our controller, only load stuff needed..
mainController: function() {

    //controller = set from php/zendframework
    switch (controller) {
        case 'admin':
            MyApp.initAdmin();
            break;
        default:
            break;
    }
},

// action for admin controller
initAdmin: function() {
    //lazy load
    require(["app/admin/admin"], function(){
        MyApp.admin.init();
    });
}};
MyApp.admin.js

MyApp.admin = {
init : function() {
    if (permisson != 'admin') {
        console.log('Permission denied.');
        return false;
    }
    MyApp.admin.dashboard.init();
}
})

还有哪些“风格”是常见的?或者这是构造代码的好方法?网上有很多例子,但我找不到“真实生活”的代码

最大的“问题”之一是我什么时候需要“.prototype”?

是构建代码的各种方法的良好参考


研究jQuery等库的源代码也是一个好主意。

我遵从Douglass Crockford关于JavaScript最佳实践的所有事项

这是他的主页:

这是一本关于在JavaScript中做什么和不做什么的好书

这是他的神奇工具,它可以自动告诉你是否采用了最糟糕的做法


至于原型问题,当您想要采用原型继承,或者创建一个“静态”类函数时,您可以使用原型,该函数将出现在该类的所有实例中,而不会为每个实例消耗内存。

Require.js是一个很好的工具,您也可以在客户端使用它。但在手机上使用时要小心。在这种情况下,您应该使用编辑器在一个文件中更好地导航,或者使用类似的工具。它是一个“预编译器”,不会在代码中添加任何附加库

我通过了你的代码。可能您应该将不同的部分定义为模块,阅读,它提供了很好的帮助


但是,请仔细考虑是否真的需要为代码组织一个额外的库。

我要对代码做的一个更改是避免到处重复“事件”字符串。 您可以通过执行以下操作来减少这种情况:

var app = {

      events : {

         someEvent : "someEvent"

      }

}

EventManager.subscribe(app.events.someEvent, someFn);

EventManager.publish(app.events.someEvent);
我还将避免直接调用console.log,并使用包装器,例如,如果控制台不可用,它将提供回退

N.B Angus Croll在提到js结构/名称空间等方面有着得体的风格


如果你正在构建更复杂的东西,比如多个产品模块和子模块,我建议为你的模块创建一个上下文层次结构。此外,还要使UI组件成为自包含的,以便在单个位置为特定UI组件提供模板、css、逻辑、资产、本地化等

如果需要参考大规模js开发的参考体系结构,请参阅。我是它的主要作者,它展示了许多在复杂产品开发中有用的模式

MyApp.admin.dashboard = {

init: function() {
    MyApp.admin.dashboard.connectEventHandlers();
    MyApp.admin.dashboard.connectEvents();
    MyApp.admin.dashboard.getUserList('#admin-user-list');
},

connectEvents: function () {
    EventManager.subscribe("doClearCache", function() {
        MyApp.admin.dashboard.doClearCache(url);
    });

    EventManager.subscribe("doDeleteUser", function() {
        MyApp.admin.dashboard.doDeleteUser(url);
    });

},
var app = {

      events : {

         someEvent : "someEvent"

      }

}

EventManager.subscribe(app.events.someEvent, someFn);

EventManager.publish(app.events.someEvent);