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

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

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

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

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


EDIT

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

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

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


当前回答

您可以将脚本分解为单独的文件进行开发,然后创建一个“发布”版本,在这个版本中,您可以将它们全部塞在一起,并在上面运行YUI Compressor或类似的程序。

其他回答

几天前,37Signals的人发布了一个RTE控件。他们制作了一个库,使用一种预处理器命令捆绑javascript文件。

我一直在用它来分离我的JS文件,然后在最后合并为一个。这样我就可以分离关注点,并且最终只有一个文件通过管道(gzip的)。

在模板中,检查是否处于开发模式,并包含单独的文件,如果处于生产模式,则包括最后一个文件(您必须自己“构建”)。

遵循良好的OO设计原则和设计模式有助于使代码易于维护和理解。 但我最近发现的最好的东西之一是信号和槽,也就是发布/订阅。 看看http://markdotmeyer.blogspot.com/2008/09/jquery-publish-subscribe.html 简单的jQuery实现。

这个想法在其他语言的GUI开发中也得到了很好的应用。当代码中某个重要的事件发生时,你会发布一个全局合成事件,其他对象中的其他方法可能会订阅该事件。 这提供了很好的对象分离。

我认为Dojo(和Prototype?)有这种技术的内置版本。

参见什么是信号和槽?

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

如果javascript内置了名称空间,那就更好了,但我发现像Dustin Diaz在这里描述的那样组织东西对我有很大帮助。

var DED = (function() {

    var private_var;

    function private_method()
    {
        // do stuff here
    }

    return {
        method_1 : function()
            {
                // do stuff here
            },
        method_2 : function()
            {
                // do stuff here
            }
    };
})();

我把不同的“名称空间”放在不同的文件中,有时把单独的类放在不同的文件中。通常我从一个文件开始,当类或名称空间变得足够大时,我将它分离到自己的文件中。使用工具将所有文件组合起来进行生产也是一个很好的主意。

使用继承模式组织大型jQuery应用程序。