Monthly Archives: January 2010

静态文件是前端开发的根本，和巧妇难为无米之炊一样。它是前端工作的成果载体。 静态文件一直以来是静态存在的，单独的css,js,img。这些都给维护带来了很大的不便。前端有时很讨厌那些静态的零碎的东西，他会引起很多问题。 例如： 1）时间戳：你修改了一个样式文件，涉及到的n多页面，都要把它引用时间戳改掉。如果漏了，发布后，不懂技术的同事就来说样式乱了，页面错位了，这时你只能说，清一下缓存吧。从我做前端开始到现在，每次发布都或多或少遇到这样的额问题。 2）管理零散的样式和脚本文件：前端将设计转化为工业化生产，于是我们就会做组建，做模块，这些零碎的静态资源再组合拼装成我们最终的页面。如何管理这些组建也是需要有个系统来控制，不然全靠手动就乱套了。 面对这种问题，yui产出了yui.loader，实现了在页面上方便快捷的调用组建。 在这第四届D2之前，我在项目中经常遇到发布时，改很多时间戳，组建过多不好管理的问题。于是想办法解决。 这个方法很快就想到了，没多复杂。最终靠着牛逼的韩强同学用python把这个实现了.部署到php环境的项目中,以后再也不用改一次静态文件,就改相关的时间戳了.发布变的轻松很多.能让机器做的事情.干嘛要手动来呢? 下面是这套东西的工作原理： 页面中涉及到的组件很多，比如有4个组件，这四个组件分类有它自己的js和样式，我们有个总控文件来配置这些该页面所有的组件。在本地这些文件是一个个独立引用的。到线上时，我们就从配置文件里把它们找出来打包成一个，再压缩。每次修改一个静态文件，比如样式,js等就自动将涉及到该组件的所有页面静态文件时间戳+1。 具体来说就是这样。 <source var=”address_up” src=”pub/add1.js” version=”1″ type=”js” name=”这是页面address_up.html用到的静态文件”> <one src=”js/1.js” version=”1″></one> <one src=”js/2.js” version=”1″></one> </source> 假设页面里我们用到了两个js文件,js/1.js和js/2.js，这里就是一些拆分的组建。引用时只需要写类似$address_up 就可以在页面中打出 <script src=”js/1.js”></script><script src=”js/2.js”></script> 而在线上环境，这两段js会被合并成一个压缩版的<script src=”pub/add1.js?version=1″></script> 我在本地更改一次js/1.js或js/2.js，打包后的pub/add1.js时间戳就会加1,变为pub/add1.js?verson=2。 这就是打包和自动时间戳的原理。后来参加d2，看见有人说也做了自动时间戳，不知道他们是怎么处理。