为大型应用程序构建/组织javascript的正确方法是什么?

What is the proper way to structure/organize javascript for a large application?

本文关键字：方法是什么 javascript 应用程序大型构建组织更新时间：2023-09-26

假设您正在构建一个大型应用程序，并且您希望站点上有大量的javascript。即使你把javascript分成每个使用javascript的页面一个文件，你仍然会有大约100个javascript文件。

保持文件系统有组织，在页面中包含这些文件，并保持代码结构本身有组织的最好方法是什么?与此同时，为生产保留最小化内容的选项也很重要。

我个人更喜欢模块模式来构建代码，我认为这篇文章给出了一个很好的介绍:http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

它使我的全局作用域干净，支持命名空间，并提供了一种很好的方法来分离公共和私有方法和字段。

我会在单独的文件中构建代码，并寻求保持低耦合和高内聚。虽然多个文件对客户端性能不利(您应该尽量减少请求的数量)，但使用压缩实用程序可以很容易地从两个方面获得最佳效果。

我有一些YUI压缩器的经验(有一个Maven插件:http://alchim.sourceforge.net/yuicompressor-maven-plugin/compress-mojo.html -我自己没有使用过这个)。如果你需要以某种方式排列javascript文件(也适用于CSS)，你可以制作一个shell脚本，提前按照给定的顺序将文件连接起来(提示:YUI Compressor默认为STDIN)。

此外，无论你决定用哪种方式来缩小你的文件都可能会做得很好。相反，你的重点应该放在如何构建你的代码上，以便它在客户端上表现良好(为了满足良好的用户体验，应该是最高优先级)，并且以适合你的方式可维护。

你提到了名称空间，这是个好主意，但我要小心，不要采用太多来自传统面向对象领域的概念，而是要学会利用javascript语言的许多优秀特性:)

如果整体大小不是太大，我会使用脚本将所有文件编译成一个文件并缩小该文件。然后我会使用侵略性缓存加上url中的mtime，这样人们只加载该文件一次，但一旦有新文件可用，就会获得新文件。

使用说明:

jslint -保持代码质量检查。
require.js -获取每个页面(或同等内容)所需的代码。

像组织其他软件项目一样组织你的js，按角色，职责和分离关注点进行分解。