随着像jQuery这样的JavaScript框架使客户端web应用程序更丰富,功能更强大,我开始注意到一个问题…

你到底是怎么组织起来的?

把所有的处理程序放在一个地方,并为所有事件编写函数? 创建函数/类来包装您的所有功能? 疯狂地写作,只希望结果是最好的? 放弃,找一份新工作?

我提到了jQuery,但它实际上是一般的JavaScript代码。我发现,当一行一行开始堆积时,管理脚本文件或找到您要找的内容变得越来越困难。我发现的最大问题可能是,做同一件事有太多的方法,很难知道哪一种是目前普遍接受的最佳实践。

有什么通用的建议可以让你的.js文件像你的应用程序的其他部分一样漂亮整洁吗?或者这只是IDE的问题?还有更好的选择吗?


EDIT

这个问题主要是关于代码组织,而不是文件组织。有一些合并文件或拆分内容的好例子。

我的问题是:目前普遍接受的组织实际代码的最佳实践方式是什么?您的方法是什么,甚至推荐的方法是什么,以与页面元素交互并创建互不冲突的可重用代码?

有些人列出了名称空间,这是个好主意。还有什么其他方法,更具体地说,处理页面上的元素并保持代码的组织和整洁?


当前回答

我使用一个受Ben Nolan的行为启发的自定义脚本(很遗憾,我再也找不到这个脚本的当前链接了)来存储我的大多数事件处理程序。例如,这些事件处理程序由元素className或Id触发。 例子:

Behaviour.register({ 
    'a.delete-post': function(element) {
        element.observe('click', function(event) { ... });
    },

    'a.anotherlink': function(element) {
        element.observe('click', function(event) { ... });
    }

});

我喜欢动态地包含大多数Javascript库,除了那些包含全局行为的库。为此,我使用Zend Framework的headScript()占位符帮助器,但您也可以使用javascript加载其他脚本,例如Ajile。

其他回答

看看JavasciptMVC吧。

你可以:

将代码分成模型层、视图层和控制器层。 将所有代码压缩到一个生产文件中 自动生成代码 创建并运行单元测试 还有更多……

最重要的是,它使用jQuery,所以你也可以利用其他jQuery插件。

我为所有我真的不需要在屏幕上实例化几次的东西创建单例,为其他所有东西创建一个类。所有这些都放在同一个文件的同一个名称空间中。所有的东西都是用UML、状态图进行注释和设计的。javascript代码是清楚的html,所以没有内联javascript,我倾向于使用jquery来最小化跨浏览器的问题。

创建假类,并确保任何可以被扔进单独函数的有意义的东西都被这样做了。还要确保大量注释,而不是编写面条式的代码,而是将代码分块编写。例如,一些无意义的代码描述了我的理想。显然,在现实生活中,我也编写了许多包含它们功能的库。

$(function(){
    //Preload header images
    $('a.rollover').preload();

    //Create new datagrid
    var dGrid = datagrid.init({width: 5, url: 'datalist.txt', style: 'aero'});
});

var datagrid = {
    init: function(w, url, style){
        //Rendering code goes here for style / width
        //code etc

        //Fetch data in
        $.get(url, {}, function(data){
            data = data.split('\n');
            for(var i=0; i < data.length; i++){
                //fetching data
            }
        })
    },
    refresh: function(deep){
        //more functions etc.
    }
};

我使用一个受Ben Nolan的行为启发的自定义脚本(很遗憾,我再也找不到这个脚本的当前链接了)来存储我的大多数事件处理程序。例如,这些事件处理程序由元素className或Id触发。 例子:

Behaviour.register({ 
    'a.delete-post': function(element) {
        element.observe('click', function(event) { ... });
    },

    'a.anotherlink': function(element) {
        element.observe('click', function(event) { ... });
    }

});

我喜欢动态地包含大多数Javascript库,除了那些包含全局行为的库。为此,我使用Zend Framework的headScript()占位符帮助器,但您也可以使用javascript加载其他脚本,例如Ajile。

我使用Dojo的包管理(Dojo。Require和dojo. provider)和类系统(dojo.declare,它还允许简单的多重继承)将我所有的类/小部件模块化到单独的文件中。这不仅能让你的代码保持有序,而且还能让你对类/小部件进行惰性/及时加载。