深入javascript.docVIP

一个网站js架构方案一个网站js架构要考虑的问题： 开发/维护 部署/版本控制 页面加载方案 开发/维护： 关注的问题除了功能实现外，目录结构是否清晰，针对具体应用的开发能否形成一个固定的开发模式，代码是否文档化以便新人来了以后可以迅速交接，这些都应该是架构应该解决的问题。更具体到应用中，我们希望我的文件要尽可能的独立，一旦发生问题，可以尽快的定位到具体的文件，甚至具体的函数某个line。同时相信很多的开发者也和我一样，希望能提供代码的debug途径。并且在上线部署后，能很快的将代码的开发debug状态，切换到生产状态，对线上代码的报错提供容错机制。 部署/版本控制： 版本控制本来是开发里面的事，我把它放到这里其实想说的是当新上线的代码出现问题时提供代码的回滚机制。这个通过详细的上线记录就可以做到。 页面加载方案： 主要考虑，减少请求次数（仅指JavaScript代码），浏览器缓存的利用，代码版本的控制，代码的改动频率等情况。针对稳定的代码经可能的利用本地缓存，针对改动频繁的代码提供自动的版本控制。 附注： 两个关键数值：80k和250k。有朋友告诉我说如果文件小于80k，那么一个tcp/ip包就可以下载完。另外，建立两个连接的两个三次握手的消耗，和用一个连接下载250k 文件的消耗是相当的.所以，1）要把文件控制在80k以内，2）如果文件不大于250k，就不要把文件拆成两个，即使，其中的很大部分可以用浏览器的缓存。这些数据我没有实验过，不保证他的正确性。 js架构设想： 文件组织结构分为三部分 核心类库（jquery，mootools，或自己做的框架） 通用的函数，组件等等 为具体应用而开发的代码（包括，与业务相关的组件，功能代码，和具体页面的逻辑） 可以复用的组件，函数，等放置到2级别的目录里，不可复用的组件，函数等，如果逻辑复杂，要单放成一个文件，放到3级别的目录里，而不要放到具体的页面中，或具体页面对应的js文件里。这样以后维护起来会方便的多，便于定位错误，或修正功能。 每个页面会对应一个js文件，在这个js文件里引入所需的通用组件，通用函数，以及具体的功能代码（核心类库默认加载，可以直接使用，不用引入），并完成页面的初始化操作。这里涉及引入其他文件这类文件之间相互依赖的问题，而JavaScript又没有提供类似“include”，“import”这类解决文件引入的功能，那我们就要想办法解决这个问题。这个问题稍后会有详细的讨论。 每个页面在head头中加载2个文件。1，是核心类库打包后的js文件，2，是一个名为boot.js的引导文件。我们通过php在页面内部传递一些变量给javascript，而boot.js根据这些php给的变量来识别并加载该页对应的js文件。这样无论我们改动php或改动boot.js都可以实现统一页面调用不同的js（或不同版本的同一个js），从而实现版本控制和 开发/生产状态切换。其实我们之所以考虑php和boot.js都可以控制版本，是因为有些浏览大的网站需要做页面静态化。页面静态化以后，刚才我们提到的php变量控制版本，便不再可用，这时就要用到boot.js来控制我们的版本了。只要保证boot.js是最新的。（只要我们不让boot.js缓存的时间太长就行）附注： 开发/生产状态：也就是debug状态 和 上线状态（容错状态） 解决JavaScript文件相互依赖 JavaScript没有提供类似“include”，“import”这类文件引入的功能。要解决文件之间的依赖问题，有以下几个途径： 把所有文件压成一个文件 通过php解析出文件之间的前后依赖关系，然后按照顺序在head头部输出script 标签，依次在页面引入js 通过javascript解析文件的依赖关系，然被依赖的文件先执行 在代码最终部署时，通过php解析文件间的依赖关系，然后按照顺序输出代码，并压缩成一个文件，这时文件依赖是不存在的。在开发的时候，我们希望所有的文件都是独立的，方便我们调试和定位问题，这时文件的依赖问题是必须解决的。我们以下面这个例子来说明解决的方法。 现在我们有3个文件，a.js,b.js,c.js。 a.js的内容： $import(b.js); $import(c.js); $import( function(){ } ); b.js的内容：$import(c.js); $import( function(){ //在这里写b.js 真正的逻辑 } ); c.js的内容：$import( function(){ //在这里写c.js 真正的逻辑 } ); 我们的页面a.html 对应的JavaScript是a.j