這里的離線處理指線下把一些事件提前做好，不在應用運行時再去做
其實前端的離線處理在一些工具中可以看到，比如說css中的背景圖，某些css工具在打包處理的時候，如果圖片的文件大小比較小，工具會讀取文件內容轉成base64直接放到css文件內，減少http請求。
類似的還有使用字符串模板的情況下，提前把字符串模板變成js中的函數，避免運行時再去生成相應的函數
接下來聊聊其他的離線處理
模板的離線處理
自定義標簽
現在很多前端框架支持自定義標簽的書寫方式，比如基于vue的element。我們以它的inputnumber為例來看一下： http://element.eleme.io/#/en-US/component/input-number
一個自定義的el-input-number標簽，最終生成的html是
vue會把自定義標簽替換成最終實現的html內容，這個過程是運行時做的。其實這個過程是可以通過工具線下處理好的，不必在程序運行時再做。
字符串模板
字符串模板在很多前端頁面中可見，模板引擎也很多，以underscore中的template方法為例：https://github.com/jashkenas/underscore/blob/master/underscore.js#L1579，它里面在生成函數時，如果沒有variable參數，則會加一個with語句，通常我們是避免掉with的
那么有沒有什么辦法是不用傳variable，也不使用with語句呢？這個也是可以線下處理好的。
比如模板如下
<%for(var i=0;i
<%=list[i].text%>
<%}%>
通過工具我們是很容易轉換成下面的內容的
<%for(var i=0;i
<%=obj.list[i].text%>
<%}%>
這個就需要借助acorn類似的工具來處理了，不過肯定是可以做到的。
有的同學說這樣做是錯的，因為with語句不在運行時，根本不知道它里面的變量從哪里取值。是的，不過我們完全可以通過約定模板中用到的變量都應該在使用時，顯式傳遞
比如window上有一個getUser()方法
在去掉with前
var tmpl="<%=getUser()%>";
_.template(tmpl,{});
這時可以正常工作
通過離線工具的處理，去掉with后，模板變成了
var tmpl="<%=obj.getUser()%>";
_.template(tmp,{});
這時候就不行了，不過我們可以約定模板中使用到的都應該在調用時顯式傳遞，從而避免一些潛在的問題出現。
當然，這個模板字符串離線處理最好的結果是直接就是一個函數放在那里了。
css圖片的處理
在我們的項目中，考慮如下文件結構
|____index.html
|____index.css
|____index.js
我們通常是把html和css打包時，打包到js文件中的，因為js文件可以很方便的模塊化，把html，css依附在js文件上。這樣js按需加載時，html和css也按需加載了，而且不需要為它們特殊處理。
假設它們最終打包出來index.js如下
var Magix=require("magix");
var indexHTML="...
";
Magix.applyStyle("mp-ec5",".mp-et5-content{color:red}");
更多信息可參考 https://github.com/thx/magix-combine/issues/15這個打包工具。
樣式變成一個字符串放在js文件中。
我們看一個事情：在css中使用背景圖時，為了達到最佳實踐，我們希望在支持webp后綴的使用webp，在高清屏下使用2倍圖等 。如果我們用純css實現，要寫很多media query,產生很多css代碼。
其實這個事情我們沒辦法離線處理，但我們可以這樣做：書寫css仍然是寫最基礎的背景圖，不去考慮webp，2倍圖等事情，也不需要寫media query之類的。在打包時，把圖片這塊調用js函數在運行時動態處理
如前面文件結構中的，假設index.css中使用了一個背景圖
.title{background-image:url(//cdn/a.png)}
我們打包到js中時，完全可以變成
var Magix=require("magix");
var ataptImg=function(img){
//處理webp 2倍圖等
return img
}
Magix.applyStyle("mp-ec5",".mp-et5-title{background-image:url("+adaptImg("http://cdn/a.png")+"}");
這樣可以很方便的處理掉這些事情。像阿里cdn，七牛云存儲等，都有相應的規則生成相應的webp或壓縮圖片等功能，所以我們adaptImg方法很容易實現
同時因為我們使用的是最基礎的css功能，所以不存在瀏覽器不兼容的問題，像css背景圖中image-set用來處理2倍圖的方案，在firefox中是不被支持的。
模板中的圖片
如css中的圖片處理一樣，我們同樣可以用工具離線處理。通過識別模板中的img標簽，再對src屬性做處理即可，這樣開發時只去關注基礎功能的實現，其它的適配都應該交由工具去實現，最大化的解放自己。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80948.html
