[英]How do you manage your Javascript files?
Nowadays, we have tons of Javascript libraries per page in addition to the Javascript files we write ourselves. 如今,除了我们自己编写的Javascript文件外,我们每页还有大量的Javascript库。 How do you manage them all? 你是如何管理它们的? How do you minify them in an organized way? 你如何以有组织的方式将它们缩小?
Organization 组织
All of my scripts are maintained in a directory structure that I follow whenever I work on a site. 我的所有脚本都保存在我在网站上工作时遵循的目录结构中。 The directory structure normally goes something like this: 目录结构通常如下所示:
+--root
|--javascript
|--lib
|--prototype.js
|--scriptaculous
|--scriptaculous.js
|--effects.js
|--..
|--myOwnScript.js
|--myOwnScript2.js
If, on the off chance, that I'm working on a team uses an inordinate amount of scripts, then I'll normally create a custom directory in which we'll organize scripts by relationship. 如果我在团队中工作时使用过多的脚本,那么我通常会创建一个自定义目录,在该目录中我们将按关系组织脚本。 This doesn't happen terribly often, though. 尽管如此,这种情况并不常见。
Compression 压缩
Though there are a lot of different compressors and obfuscators out there, I always come back to YUI Compressor. 虽然那里有很多不同的压缩器和混淆器,但我总是回到YUI Compressor。
Inclusion 入选
Unless a site is using some form of a master page, CMS, or something that dictates what can be included on a page beyond my control, I only included the scripts necessarily for the given page just for the small performance sake. 除非网站使用某种形式的母版页,CMS或某些内容来指示我无法控制的页面上包含的内容,否则我只是为了小的性能而仅包含了给定页面的脚本。 If a page doesn't require any script, there will be no script inclusions on that page. 如果页面不需要任何脚本,则该页面上不会包含脚本。
First of all, YUI Compressor . 首先, YUI Compressor 。
Keeping them organized is up to you, but most groups that I've seen have just come up with a convention that makes sense for their application. 让它们井然有序取决于你,但我见过的大多数团体刚刚提出了一个对他们的应用程序有意义的约定 。
It's generally optimal to package up your files in such a way that you have a small handful of packages which can be included on any given page for optimal caching. 通常最佳的方式是打包文件 ,使得您可以使用少量软件包,这些软件包可以包含在任何给定页面中以实现最佳缓存。
You also might consider dividing your javascript up into segments that are easy to share across the team. 您也可以考虑将您的javascript划分为易于在整个团队中共享的细分。
Cal Henderson (of Flickr fame) wrote Serving JavaScript Fast a while back. Cal Henderson(Flickr成名)在一段时间内写了“快速服务JavaScript” 。 It covers asset delivery, not organization, but it might answer some of your questions. 它涵盖资产交付,而不是组织,但它可能会回答您的一些问题。
Here are the bullet points: 以下是要点:
I'll add a few bullet points of my own: 我将添加一些我自己的要点:
lib
directory is a good start. 另一个答案表明,将第三方库放在lib
目录中是一个好的开始。 You can also divide your own JS files into sub-directories if it makes sense. 如果有意义的话,您也可以将自己的JS文件划分为子目录。 Ideally, you'll be able to arrange them in such a way that the files in a given sub-directory can be concatenated into one file. 理想情况下,您将能够以这样的方式排列它们,即给定子目录中的文件可以连接成一个文件。 I will have a folder for all javascript, and a sub folder of that for 3rd party/shared libraries, and sub folders for each component of the site to keep everything organized. 我将为所有javascript创建一个文件夹,为第三方/共享库提供一个子文件夹,并为站点的每个组件提供子文件夹,以保持一切有序。
For example: 例如:
/
+--/javascript/
+-- lib/
+-- admin/
+-- compnent1/
+-- compnent2/
Then run everything through a minifier/obfuscator during the build process. 然后在构建过程中通过minifier / obfuscator运行所有内容。
I'v been using this lately: http://code.google.com/apis/ajaxlibs/ 我最近一直在使用这个: http : //code.google.com/apis/ajaxlibs/
And then have a "jscripts" folder where I keep my custom code. 然后有一个“jscripts”文件夹,我保留自定义代码。
In my last project, we had three kinds of JS files, all of them inside a JS folder. 在我的上一个项目中,我们有三种JS文件,它们都在JS文件夹中。
The biggest effort was in having most of the code on the first two kinds, having custom code only know what to call, and when. 最大的努力是将前两种代码中的大部分代码放在一起,让自定义代码只知道要调用什么,以及何时调用。
This might be a different approach than what you're looking for, but I've been playing around with the idea of JavaScript templates in our blog engine. 这可能与您正在寻找的方法不同,但我一直在博客引擎中使用JavaScript模板的想法。 In a nutshell, you assign a Javascript template to a page id using the database and it will dynamically include and minify all the JavaScript files associated with that template and create a file in a server-side cache with the template id as a file name. 简而言之,您使用数据库为页面ID分配Javascript模板,它将动态地包含和缩小与该模板关联的所有JavaScript文件,并在模板ID作为文件名的服务器端缓存中创建文件。 When a page is loaded, it calls the template file which first checks if the file exists in the cache and loads it if it does. 加载页面时,它会调用模板文件,该文件首先检查文件是否存在于缓存中,如果存在,则加载它。 If it doesn't exist, it creates it on the fly and includes it. 如果它不存在,它会动态创建并包含它。 I also use the template file to gzip the conglomerate JavaScript file. 我还使用模板文件来gzip集合JavaScript文件。
The template idea would work well for site-wide JavaScript (like a JavaScript library), but it doesn't cover page-specific JavaScript. 模板的想法适用于站点范围的JavaScript(如JavaScript库),但它不包括特定于页面的JavaScript。 However, you can still use the same approach for page specific JavaScript by including a second file that does the same as above. 但是,通过包含与上面相同的第二个文件,您仍然可以对页面特定的JavaScript使用相同的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.