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