Question

我目前正在使用jQuery编写一个在线应用程序，该应用程序从几行代码开始，现在很快就会超过1000行。

我的代码结构很简单。我有一个window.load包装我的javascript，在里面我开始添加我的click事件处理程序，以及构成我的应用程序的各种函数。

$(window).load(function(){
   // Code goes here...
});

我的代码功能绝对可以分为几类;例如5个函数执行动画，12个是事件处理程序等。

我想将这些函数分组到自己的js文件中，然后单独导入它们。我以后可以使用我的CMS引擎来动态连接和压缩文件。

这样做的最佳方式是什么。我想也许我可以将我的一些功能用于自己的命名空间以进一步清晰;例如所有动画函数都以ANIMATION-ANIMATION.moveDiv1（），ANIMATION.moveDiv2，MYEVENT.div1Clicked等为前缀

Answer 1

为了便于阅读，我通常会将所有相关项目粘贴到自己的文件中，并使用与文件匹配的命名空间。

示例文件可能如下所示：

Example.js

var Animation = {}; // create the namespace-like object
Animation.moveDiv1 = function() {...};
Animation.moveDiv2 = function() {...};

有很多方法可以做到这一点。说到压缩，有一些很好的工具可以用来压缩东西。查看YUI Compressor

模块化是Javascript的一个很好的目标，但我想说下一个级别是实际使用一些Javascript OO技术。如果你的应用程序足够简单，你可能会没有它。

Answer 2

您的代码文件应该反映您的类。
您的课程应遵循良好的OO设计原则。

就浏览器中的加载时间而言，kekoav和knut有正确的想法 - 只需使用YUI或其他脚本压缩器/缩小器（以及可选的混淆器），将它们组合成单个文件并从单个文件中加载它们脚本包含指令。

我还会看看JS你的类的原型属性 - 如果它们变得越来越大并且你正在创建它们的多个实例，那么你将开始通过公开你的公众来看到显着的性能提升（和（可选地，私有/特权）方法进入类原型。

你绝对应该为你的类使用完全限定的命名空间，如果你正在使用他们的AJAX解决方案，使用Microsoft的Type.registerNamespace，根据kekoav的帖子声明你自己的命名空间函数，或者使用其他类似的方法，谷歌将提供。

Answer 3

从应用程序管理的角度看好主意，从加载时间的角度来看是个坏主意。浏览器必须同步加载所有这些小脚本，因此每个额外的脚本需要花费更多时间来加载。这不包括主要的jQuery库脚本，jQuery UI以及您计划在文档中使用的任何其他内容。测试两个前提：将函数抽象到他们自己的单个脚本中并加载它们与一个只需要一次调用加载的大脚本。更进一步，缩小“一个大脚本”，再一步，确保它作为压缩文件。

Answer 4

您可以在开发时将JavaScript文件拆分为类，但是您应该合并脚本，并在生产环境中将它们最小化。有关详细信息，请查看YUI Compressor。

将代码拆分为多个文件以便于管理

4 个答案: