前端的離線處理

這裏的離線處理指線下把一些事件提早作好，不在應用運行時再去作

其實前端的離線處理在一些工具中能夠看到，好比說css中的背景圖，某些css工具在打包處理的時候，若是圖片的文件大小比較小，工具會讀取文件內容轉成base64直接放到css文件內，減小http請求。

相似的還有使用字符串模板的狀況下，提早把字符串模板變成js中的函數，避免運行時再去生成相應的函數

接下來聊聊其餘的離線處理

模板的離線處理

自定義標籤

如今不少前端框架支持自定義標籤的書寫方式，好比基於vue的element。咱們以它的inputnumber爲例來看一下： http://element.eleme.io/#/en-US/component/input-number

<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>

一個自定義的el-input-number標籤，最終生成的html是

<div class="el-input-number">
    <div class="el-input">
        <input type="text" autocomplete="off" class="el-input__inner">
    </div>
    <span class="el-input-number__decrease el-icon-minus is-disabled"></span>
    <span class="el-input-number__increase el-icon-plus"></span>
</div>

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.length;i++){%>
    <%=list[i].text%>
<%}%>

經過工具咱們是很容易轉換成下面的內容的

<%for(var i=0;i<obj.list.length;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='<div class="mp-et5-content">...</div>';
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('//cdn/a.png')+'}');

這樣能夠很方便的處理掉這些事情。像阿里cdn，七牛雲存儲等，都有相應的規則生成相應的webp或壓縮圖片等功能，因此咱們adaptImg方法很容易實現

同時由於咱們使用的是最基礎的css功能，因此不存在瀏覽器不兼容的問題，像css背景圖中image-set用來處理2倍圖的方案，在firefox中是不被支持的。

模板中的圖片

如css中的圖片處理同樣，咱們一樣能夠用工具離線處理。經過識別模板中的img標籤，再對src屬性作處理便可，這樣開發時只去關注基礎功能的實現，其它的適配都應該交由工具去實現，最大化的解放本身。