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

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

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

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

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


EDIT

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

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

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


当前回答

按需加载所需的代码。谷歌对他们的Google .loader做了类似的事情

其他回答

按需加载所需的代码。谷歌对他们的Google .loader做了类似的事情

我使用一个受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。

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

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

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

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

你的问题是去年年底困扰我的一个问题。区别在于——将代码交给从未听说过私有方法和公共方法的新开发人员。我必须建造一些简单的东西。

最终的结果是一个小框架(大约1KB),它将对象文字转换为jQuery。语法在视觉上更容易扫描,如果你的js变得非常大,你可以编写可重用的查询来查找使用的选择器、加载的文件、依赖的函数等。

在这里发布一个小框架是不切实际的,所以我写了一篇博客文章和例子(我的第一个。那真是一次冒险!)欢迎您来看看。

对于这里有几分钟时间来查看的其他人,我非常感谢反馈!

推荐使用FireFox,因为它支持对象查询示例的toSource()。

干杯!

Adam