代码之家 › 专栏 › 技术社区 › Hady

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

jquery javascript

Hady · 技术社区 · 17 年前

我目前正在使用jquery编写一个在线应用程序,它从几行代码开始,现在很快就变成了1000多行。

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

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

我的代码函数可以明确地分为不同的类别;例如,5个函数执行动画,12个是事件处理程序等。

我想将函数分组到它们自己的JS文件中,并分别导入它们。稍后,我可以使用CMS引擎动态连接和压缩文件。

最好的方法是什么?我想也许我可以给我的一些函数指定它们自己的名称空间以进一步清晰;例如,所有动画函数都以animation-animation.movediv1()、animation.movediv2、myEvent.div1 clicked等作为前缀。

4 回复 | 直到 17 年前

Kekoa 17 年前

我通常将所有相关的项插入到它们自己的文件中,其中的名称空间与文件匹配,以便于阅读。

示例文件可能如下所示:

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

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

模块化是JavaScript的一个很好的目标,但是我想说下一个层次将是实际使用一些JavaScript OO技术。如果你的应用足够简单,你可能不用它。

uglybugger 17 年前

代码文件应该镜像类。
你的课程应该遵循良好的OO设计原则。

在浏览器中的加载时间方面,kekoav和knut有正确的想法——只需使用yui或其他脚本压缩器/缩小器(以及可选的模糊器),将它们组合成一个文件,并从一个脚本include指令中加载它们。

我还将研究一下JS——类的原型属性——如果它们变得越来越大,并且您正在创建它们的多个实例,那么通过将公共(以及可选的私有/特权)方法放入类原型中,您将开始看到显著的性能提升。

当然,您应该为类使用完全限定的名称空间,或者使用微软的type.registernamespace(如果您使用的是他们的Ajax解决方案),或者根据kekoav的文章声明自己的名称空间函数,或者使用谷歌提供的Squillion其他类似方法。

bdl 17 年前

从应用程序管理的角度来看是好主意,从加载时间的角度来看是坏主意。浏览器必须同步加载所有这些小脚本,因此对于您要加载的每个附加脚本,都要花费更多的时间。这不包括主jquery库脚本、jquery ui以及您计划在文档中包含的其他内容。测试这两个前提:将函数抽象到它们自己的单独脚本中,并将它们加载到只需要一个调用即可加载的大脚本中。再往前走一步,缩小“一个大脚本”,再多走一步,确保它作为压缩文件使用。

knut 17 年前

您可以在开发时将JavaScript文件拆分为类,但是您应该组合脚本,并在生产环境中最小化它们。请看一下 YUI Compressor 更多信息。