web前台技术学习总结(3)-轻便型全站javascript部署

核心提示：问题的提出 一年前刚开始做项目的时候,我对于前台技术还刚刚入门,用jquery写点小打小闹的交互效果还是没太大问题,但是要把所有这些效果干净,整洁的部署到全站,对我来说就有点头疼了.由于网站页面虽说不是特别多,但也有二三十个,如果每个页面写一个单独的js文件或者直接把js写在页面内,是不利于维护和有损前台性能的.按照y

问题的提出

一年前刚开始做项目的时候,我对于前台技术还刚刚入门,用jquery写点小打小闹的交互效果还是没太大问题,但是要把所有这些效果干净,整洁的部署到全站,对我来说就有点头疼了.由于网站页面虽说不是特别多,但也有二三十个,如果每个页面写一个单独的js文件或者直接把js写在页面内,是不利于维护和有损前台性能的.按照yahoo的前台性能提升建议,应该尽量减少js文件个数.于是我决定想办法把除了 jquery库及一些插件之外自写代码全部写到一个文件之中.虽然可能有时候某些页面载入的js会有用不到的代码,但是这样做对于一个中等规模的网站来说有如下的性能优势:

js文件数量很少,浏览器对服务器的请求次数会大大减少,节约了服务器的资源;

由于几乎每个页面要载入的js文件都相同,这样在首页载入后,再访问其他页面,浏览器可以直接从缓存中读取全部js,浏览速度大大提升

如果这个文件组织的比较有条理,很方便以后的维护.

这样的部署,可以谓之'轻便'.现在的问题就是,如何组织这个文件,让其尽量有条理. 当然当时的我还是菜鸟,写js的程度还在只会使用jquery的阶段,对于扩展jquery是一无所知,更不用说js闭包,用js模拟其他语言的OOP使用,以及设计模式这些比较专业的技巧了(其实现在对这些技术还在学习当中). 我不可能凭空想出一个好的办法来,所以就开始参考其他性能比较出色的web2.0站的js代码. 国外网站(如digg,netvibes)的js都用packer之类的东西加了密,人读起来很困难,于是又转向国内,看了看校内等,js文件好多,毕竟是大型网站不适合.后来找到豆瓣,发现性能性能相当出色,而且当时的js也没加密,只有三个文件jquery.js,suggest.js以及 douban.js.其中最后一个文件是值得参考的.

编缉推荐阅读以下文章

• web前台技术学习总结(2)-用jQuery自定义的请求JSON方法
• web前台技术学习总结(1)-CSS实现全浏览器兼容的ellipsis