JS架构资料收藏

随着web技术的发展，web2.0开始成为主流，JS在整个系统中的地位越来越重要，而对于JS的优化和架构的建立也越来越受到重视。

一、为自己的系统选择一个合适的框架

prototype和Jquery都是很好的框架。

1. prototype是一个完全存在于底层的代码，他优化了JS的面向对象的扩展，封装了DOM操作API，很好的处理了事件，AJAX等，体积也很小。要说他的缺点，恐怕就是它本身并没有实现太多的功能。
2. JQuery，本身实现了很多特效，能帮助工程师完成很多工作，即便是工程师对JS并不那么熟悉。它很重视代码的简介与高效。是一个很不错的库类，鼎鼎大名的YUI都复用了很多他的代码。

选好了一个框架，之后就应该要求工程师按照框架的要求去进行开发。否则，这个框架的选择还有什么意义呢。

二、不要把只有单独的子项目才会使用的JS放在全站都会引用的.js文件里

这个几乎是毋庸置疑的。但是有时候我们需要去减少一张页面的JS文件请求数，这时候我们通常会把子类的代码直接放在基类的文件中，然后随着项目的增多，继承该基类的子类也增多，我们在下载页面的时候需要去加载的无关代码量也开始增大。于是我们在控制JS文件请求数的同时也要考虑到，我们应该如何去规划JS的目录结构。

通常我们把js放在www的js目录下或者是将站点的所有静态文件都放于http://static.yourdomain.com，其中js文件的目录是http://static.yourdomain.com/js。

而我们通常把一些全站都会用到的函数，或者一些简单的极其常用的基类定义在一个类似于global.js的文件里，然后把其他的一些跨应用的基类放在以类名为文件里并放在class/目录下，如class/ajaxlist.js，这个文件是处理ajax下生成和操作数据列表的类的代码。而对不同应用则应该有一个文件是对这些基类的实例化和逻辑处理的相关代码便放在属于他们自己的文件里然后存放于app目录，比如app/album.js是关于相册的代码。

于是，我们的HTML里面应该是这样的。

<script language="javascript" src="http://static.yourdomain.com/js/prototype.js?124" ></script>
<script language="javascript" src="http://static.yourdomain.com/js/global.js?326" ></script>
<script language="javascript" src="http://static.yourdomain.com/js/class/ajaxlist.js?178" ></script>
<script language="javascript" src="http://static.yourdomain.com/js/app/album.js?768" ></script>

<script language="javascript" src="http://static.yourdomain.com/js/prototype.js?124" ></script> <script language="javascript" src="http://static.yourdomain.com/js/global.js?326" ></script> <script language="javascript" src="http://static.yourdomain.com/js/class/ajaxlist.js?178" ></script> <script language="javascript" src="http://static.yourdomain.com/js/app/album.js?768" ></script>

而这样的代码是很符合优化策略的

三、在HTML里为你的JS加上版本号

这是很必要的。这将利用浏览器的缓存或SQUID等来减少浏览器像服务器进行请求的次数，也将节省用户的下载时间。只要版本号不变化，浏览器就不会重新下载。

四、在用户操作前为用户做好准备工作

有一些过度的结构化的代码反而会造成负担。特别是在IE的JS执行效率还不算很高的现在看来。有时候用服务器端去处理那些没必要交给JS的数据，将完整的初始状态留给用户对用户来说可能是更好的体验。

jQuery 

http://jquery.com/

jQuery中文入门指南

http://wiki.jquery.org.cn/doku.php

prototypejs

http://www.prototypejs.org/