利用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