利用text插件和css插件优化web应用

JavaScript的模块化开发到如今，已经相当成熟了，当然，一个应用包含的不仅仅有js，还有html模板和css文件。

那么，如何将html和css也一起打包，来减少没必要的HTTP请求数呢？

本文将和大家一起分享两个requrejs插件：text和css

 

1. html模板与text插件

我们在开发一个widget时，如果将html模板直接写在js文件中，将会很难维护，处理各种换行以及双引号就会让人抓狂，对于后续维护的人来说也是噩梦。

个人比较推荐的做法是将widget的html模板提取到一个独立的文件中，减少html与js的耦合，同时方便维护与管理。

那么，widget内部如何获取这个独立的html模板文件呢？如果直接在widget内部通过ajax加载，势必增加后续的维护成本。

这时text插件就上场了！

我们可以像这么做:

define([

　　"text!./templates/login.html"//指向当前组件依赖的模板文件

],function(template /*html模板字符串*/){
   //do something
   //declare widget
});

 

当应用上线之前，我们需要打包这些widget，而text插件会将widget依赖的模板文件一并打包进去，模板文件将做为一个独立的字符串模块存在。

这样一来，我们就达到了两个目的：1.将html模板与js文件解耦 2.减少HTTP请求数 

 

2. css文件与css插件

大部分widget都会有自己的样式，就像jquery-ui那样，每一个ui组件都有自己的样式文件。

某些情况下，我们希望css文件与js打包在一起加载，而不需要去html/head添加各种css文件引用，当使用的时候，我们只需要require这个widget就好。

这时，css插件就上场了。

define([

　　"css!./css/login.css"

],function(){

      //这个时候，css文件已经被append到html/head中了，也就是说，你的widget依赖的样式已经就绪

　　//declare widget

});

 

 当我们打包这些widget的时候，css插件会将widget依赖的模板文件一并打包进去，同时可以自动优化css，比如去除空格，合并重复样式等等。

这样一来，我们就达到了两个目的：1.自动加载css依赖 2.减少HTTP请求数 

 

当然，text插件和css插件在打包时，还有很多参数可以配置，大家有兴趣的可以点击链接到Github去查看。

 

PS: 尊重他人原创，转载请务必注明来自http://www.cnblogs.com/Raoh/p/4204228.html