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

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

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

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

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


EDIT

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

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

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


当前回答

我认为这可能与DDD(领域驱动设计)有关。我正在开发的应用程序,虽然缺乏正式的API,但确实通过服务器端代码(类/文件名等)给出了提示。有了这些,我创建了一个顶级对象作为整个问题域的容器;然后,我在需要的地方添加名称空间:

var App;
(function()
{
    App = new Domain( 'test' );

    function Domain( id )
    {
        this.id = id;
        this.echo = function echo( s )
        {
            alert( s );
        }
        return this;
    }
})();

// separate file
(function(Domain)
{
    Domain.Console = new Console();

    function Console()
    {
        this.Log = function Log( s )
        {
            console.log( s );
        }
        return this;
    }
})(App);

// implementation
App.Console.Log('foo');

其他回答

在我之前的工作中,我成功地将Javascript模块模式应用到Ext JS应用程序中。它提供了一种创建良好封装代码的简单方法。

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

对于JavaScript组织一直使用以下

Folder for all your javascript Page level javascript gets its' own file with the same name of the page. ProductDetail.aspx would be ProductDetail.js Inside the javascript folder for library files I have a lib folder Put related library functions in a lib folder that you want to use throughout your application. Ajax is the only javascript that I move outside of the javascript folder and gets it's own folder. Then I add two sub folders client and server Client folder gets all the .js files while server folder gets all the server side files.

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

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

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

参见什么是信号和槽?

我很惊讶没有人提到MVC框架。我一直在使用Backbone.js来模块化和解耦我的代码,这是非常宝贵的。

有相当多这样的框架,其中大多数也非常小。我个人的观点是,如果您想为华丽的UI编写几行jQuery以外的东西,或者想要一个丰富的Ajax应用程序,那么MVC框架将使您的工作更加轻松。