JavaScript结构,正确的方法?

时间:2010-12-13 17:55:25

标签: javascript jquery oop

我试图在javascript编码方面做得更好。远离一个文件中的1000行代码。但我不确定这是否是“正确的”方式:

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

require([
    "library/jquery.form/jquery.form",
    "app/eventManager",
    "app/myapp"
], function() {
    $(function() {
        MyApp.init();
    });
});

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();
}

};

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);
    });

},

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

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

5 个答案:

答案 0 :(得分:4)

JavaScript Patterns是构建代码的各种方法的一个很好的参考。

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

答案 1 :(得分:2)

我对您的代码所做的一项更改是避免在任何地方重复“事件”字符串。 您可以通过执行以下操作来减少这种情况:

var app = {

      events : {

         someEvent : "someEvent"

      }

}

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

EventManager.publish(app.events.someEvent);

我也会避免直接调用console.log并使用this这样的包装器,如果没有可用的控制台,它会提供后备空间

N.B Angus Croll有一个不错的blog,他提到js结构/命名空间等

并且在精通js忍者的JsMentors分享了一些非常好的知识

答案 2 :(得分:1)

关于与JavaScript最佳实践相关的所有事宜,我请求Douglass Crockford。

这是他的主页:http://javascript.crockford.com/

这是一本关于JavaScript中应该做什么和不做什么的好书。 http://www.amazon.com/exec/obidos/ASIN/0596517742/wrrrldwideweb

这是他的神奇工具,可以自动告诉您是否采用任何最差的做法。 http://www.jslint.com/

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

答案 3 :(得分:1)

Require.js是很棒的工具,你也可以在客户端使用它。但是在移动设备上使用它时要小心。在这种情况下,您应该使用编辑器在一个文件中更好地导航或使用sprocket之类的东西。它是一个“预编译器”,不会在代码中添加任何其他库。

我通过你的切片代码。您可能应该将不同的部分定义为模块,阅读requirejs documentation for defining modules,它可以提供很好的帮助。

但请三思而后行,是否真的需要为代码组织一个额外的库。

答案 4 :(得分:1)

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

enter image description here

如果您需要参考大规模js开发的参考架构,请参阅http://boilerplatejs.org。我是它的主要作者,它演示了很多在复杂产品开发中有用的模式。