如何构建我的javascript/jquery代码？

Question

我正在使用一个非常密集的基于ajax的jquery Web应用程序.它已经到了我几乎无法跟踪应该触发什么动作等事件的地步.

我有点觉得我的javascript结构错了,在更基础的层面上.你们如何构建你的javascript/jquery代码,事件处理等,对新手javascript开发人员的任何建议.

Answer 1

AMDS!

这已经有一段时间了,因为第一个答案被发布到这个问题并且许多事情都发生了变化.首先,JS浏览器世界似乎正朝着代码组织的AMD(异步模块定义)发展.

有效的方法是将所有代码编写为AMD模块,例如:

define('moduleName', ['dependency1', 'dependency2'], function (dependency1, dependency2) {
    /*This function will get triggered only after all dependency modules loaded*/
    var module = {/*whatever module object, can be any JS variable here really*/};
    return module;
});

然后使用像curl.js或require.js等AMD加载器加载模块,例如:

curl(
    [
        'myApp/moduleA',
        'myApp/moduleB'
    ],
).then(
    function success (A, B) {
        // load myApp here!
    },
    function failure (ex) {
        alert('myApp didn't load. reason: ' + ex.message);
    }
);

优点是:

1. 您只需<script>在页面上包含加载AMD加载程序本身的单个元素(其中一些非常小).

2. 之后,所有JS文件将在异步非阻塞中自动获取!时尚,因此更快!

3. 只有在加载了依赖项后,才会执行必要的模块.

4. 模块化(这意味着代码更易于维护和重用).

5. 如果使用得当,可以完全抑制全局变量污染.

老实说,一旦概念点击了你的脑袋,你将永远不会回到过去的方式.

PS:jQuery从版本1.7开始将自己注册为AMD模块.

有关AMDS的更多信息:

• https://github.com/cujojs/curl
• http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition
• http://requirejs.org/
• http://www.bennadel.com/blog/2275-Using-RequireJS-For-Asynchronous-Script-Loading-And-JavaScript-Dependency-Management.htm
• https://github.com/Integralist/Blog-Posts/blob/master/2012-01-04-Beginners-guide-to-AMD-and-RequireJS.md

Answer 2

对于javascript代码,我发现Christian Heilmann的以下链接不可或缺

• 模块模式
• 配置脚本

我也非常喜欢Peter Michaux 在这里描述的方法

对于jQuery,我衷心地建议阅读有关创作的指南,我发现这个关于jQuery 插件模式的教程非常好

Answer 3

为了控制我的事件,我使用了发布/订阅机制

jQuery.subscribe = function( eventName, obj, method ){
    $(window).bind( eventName, function() {
        obj[method].apply( obj, Array.prototype.slice.call( arguments, 1 ) );
    });
    return jQuery;
}

jQuery.publish = function(eventName){
    $( window ).trigger( eventName, Array.prototype.slice.call( arguments, 1 ) );
    return jQuery;
}

这是一个使用它的例子

// a couple of objects to work with
var myObj = {
    method1: function( arg ) {
        alert( 'myObj::method1 says: '+arg );
    },
    method2: function( arg1, arg2 ) {
        alert( arg1 );
        //republish
        $.publish( 'anEventNameIMadeUp', arg2 );
    }
}

var myOtherObj = {
    say: function(arg){
        alert('myOtherObj::say says: ' + arg);
    }
}



// you can then have all your event connections in one place

//myObj::method2 is now listening for the 'start' event 
$.subscribe( 'start', myObj, 'method2' );

//myOtherObj::say is now listening for the 'another' event
$.subscribe( 'anotherEvent', myOtherObj, 'say' );

//myObj::method1 is now listening for the 'anEventNameIMadeUp' event
$.subscribe( 'anEventNameIMadeUp', myObj, 'method1' );
//so is myOtherObj::say
$.subscribe( 'anEventNameIMadeUp', myOtherObj, 'say' );


// ok, trigger some events (this could happen anywhere)
$.publish( 'start', 'message1', 'message2' );
$.publish( 'anotherEvent', 'another message' );

Answer 4

除了模块模式之外,我绝对建议您阅读对象文字模式; 这是一篇很好的文章:

http://ajaxian.com/archives/show-love-to-the-object-literal