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

然后使用AMD加载器加载模块，例如 curl.js 或 require.js 等，例如：

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

优点是：

您只需在页面上包含单个<script>元素即可加载AMD加载程序（其中一些非常小）。
之后，所有JS文件将在异步非阻塞中自动获取！时尚，因此更快！
只有在依赖项加载后才会执行必要的模块。
模块化（这意味着代码更易于维护和重复使用）。
如果使用得当，全局变量污染可以完全控制。

老实说，一旦你的脑子里有点击这个概念，你就永远不会回到过去。

P.S：jQuery从版本1.7开始将自己注册为AMD模块。

有关AMDS的更多信息：

Answer 2

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

我也非常喜欢Peter Michaux here

所描述的方法

对于jQuery，我衷心建议阅读Authoring上的指南，我发现本教程对jQuery plugin patterns非常好

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

Answer 5

(function($, window, slice)
{

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

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

})(jQuery, window, Array.prototype.slice);

Answer 6

要添加到现有答案，这里是great post，其中涵盖了基于模块模式构建的更高级技术。

一旦你的Javascript代码达到一定的大小，你就不可避免地希望通过将其分解为多个文件/模块/子模块来重构它。如果您不确定如何使用模块模式完成此操作，那么本文是必读的。

Answer 7

我的js文件通常遵循与此类似的命名约定：

xxx.utility.js
mypage.events.js
xxx.common.js
/ LIB /
/ OS-DoNotDistribute / LIB /

哪里

'mypage'是html的名称， aspx，php等文件。
'xxx'是这个概念。（即orders.common.js）
'utility'表示它是可重用的库脚本（即ajax.utility.js，controlfader.utility.js）
'common'是可重用的功能对于这个应用程序，但不能重复使用其他项目
'lib'是任何外部或库脚本的子目录
'OS-DoNotDistribute'是一个子目录，以确保在销售应用程序时不会分发操作系统许可代码。

另外，对于ajax，我有一个特殊的回调函数命名约定，所以很容易分辨出它们是什么。

我不确定它与您所寻找的相近，但我希望它有所帮助。

Answer 8

我非常喜欢这些文章：

http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

他们帮助我理解了telerik如何为asp.net mvc创建扩展。

Answer 9

我喜欢AMD的想法（见nix's answer）。

但我通常会将所有JS文件编译成一个JS文件。在这种情况下，不需要异步部分。所以我写了一篇“Infile Module Loader”。

这是：https://codereview.stackexchange.com/questions/14530/a-little-infile-amd

Answer 10

我们可以在javascript-jquery应用程序中使用mvc模式。（Backbone.js，knockout.js vs ....）是我们可以用于此目标的成熟库。

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

10 个答案: