這里的離線處理指線下把一些事件提前做好，不在應(yīng)用運(yùn)行時(shí)再去做
其實(shí)前端的離線處理在一些工具中可以看到，比如說(shuō)css中的背景圖，某些css工具在打包處理的時(shí)候，如果圖片的文件大小比較小，工具會(huì)讀取文件內(nèi)容轉(zhuǎn)成base64直接放到css文件內(nèi)，減少http請(qǐng)求。
類(lèi)似的還有使用字符串模板的情況下，提前把字符串模板變成js中的函數(shù)，避免運(yùn)行時(shí)再去生成相應(yīng)的函數(shù)
接下來(lái)聊聊其他的離線處理
模板的離線處理
自定義標(biāo)簽
現(xiàn)在很多前端框架支持自定義標(biāo)簽的書(shū)寫(xiě)方式，比如基于vue的element。我們以它的inputnumber為例來(lái)看一下： http://element.eleme.io/#/en-US/component/input-number
一個(gè)自定義的el-input-number標(biāo)簽，最終生成的html是
vue會(huì)把自定義標(biāo)簽替換成最終實(shí)現(xiàn)的html內(nèi)容，這個(gè)過(guò)程是運(yùn)行時(shí)做的。其實(shí)這個(gè)過(guò)程是可以通過(guò)工具線下處理好的，不必在程序運(yùn)行時(shí)再做。
字符串模板
字符串模板在很多前端頁(yè)面中可見(jiàn)，模板引擎也很多，以u(píng)nderscore中的template方法為例：https://github.com/jashkenas/underscore/blob/master/underscore.js#L1579，它里面在生成函數(shù)時(shí)，如果沒(méi)有variable參數(shù)，則會(huì)加一個(gè)with語(yǔ)句，通常我們是避免掉with的
那么有沒(méi)有什么辦法是不用傳variable，也不使用with語(yǔ)句呢？這個(gè)也是可以線下處理好的。
比如模板如下
<%for(var i=0;i
<%=list[i].text%>
<%}%>
通過(guò)工具我們是很容易轉(zhuǎn)換成下面的內(nèi)容的
<%for(var i=0;i
<%=obj.list[i].text%>
<%}%>
這個(gè)就需要借助acorn類(lèi)似的工具來(lái)處理了，不過(guò)肯定是可以做到的。
有的同學(xué)說(shuō)這樣做是錯(cuò)的，因?yàn)閣ith語(yǔ)句不在運(yùn)行時(shí)，根本不知道它里面的變量從哪里取值。是的，不過(guò)我們完全可以通過(guò)約定模板中用到的變量都應(yīng)該在使用時(shí)，顯式傳遞
比如window上有一個(gè)getUser()方法
在去掉with前
var tmpl="<%=getUser()%>";
_.template(tmpl,{});
這時(shí)可以正常工作
通過(guò)離線工具的處理，去掉with后，模板變成了
var tmpl="<%=obj.getUser()%>";
_.template(tmp,{});
這時(shí)候就不行了，不過(guò)我們可以約定模板中使用到的都應(yīng)該在調(diào)用時(shí)顯式傳遞，從而避免一些潛在的問(wèn)題出現(xiàn)。
當(dāng)然，這個(gè)模板字符串離線處理最好的結(jié)果是直接就是一個(gè)函數(shù)放在那里了。
css圖片的處理
在我們的項(xiàng)目中，考慮如下文件結(jié)構(gòu)
|____index.html
|____index.css
|____index.js
我們通常是把html和css打包時(shí)，打包到j(luò)s文件中的，因?yàn)閖s文件可以很方便的模塊化，把html，css依附在js文件上。這樣js按需加載時(shí)，html和css也按需加載了，而且不需要為它們特殊處理。
假設(shè)它們最終打包出來(lái)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這個(gè)打包工具。
樣式變成一個(gè)字符串放在js文件中。
我們看一個(gè)事情：在css中使用背景圖時(shí)，為了達(dá)到最佳實(shí)踐，我們希望在支持webp后綴的使用webp，在高清屏下使用2倍圖等 。如果我們用純css實(shí)現(xiàn)，要寫(xiě)很多media query,產(chǎn)生很多css代碼。
其實(shí)這個(gè)事情我們沒(méi)辦法離線處理，但我們可以這樣做：書(shū)寫(xiě)css仍然是寫(xiě)最基礎(chǔ)的背景圖，不去考慮webp，2倍圖等事情，也不需要寫(xiě)media query之類(lèi)的。在打包時(shí)，把圖片這塊調(diào)用js函數(shù)在運(yùn)行時(shí)動(dòng)態(tài)處理
如前面文件結(jié)構(gòu)中的，假設(shè)index.css中使用了一個(gè)背景圖
.title{background-image:url(//cdn/a.png)}
我們打包到j(luò)s中時(shí)，完全可以變成
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，七牛云存儲(chǔ)等，都有相應(yīng)的規(guī)則生成相應(yīng)的webp或壓縮圖片等功能，所以我們adaptImg方法很容易實(shí)現(xiàn)
同時(shí)因?yàn)槲覀兪褂玫氖亲罨A(chǔ)的css功能，所以不存在瀏覽器不兼容的問(wèn)題，像css背景圖中image-set用來(lái)處理2倍圖的方案，在firefox中是不被支持的。
模板中的圖片
如css中的圖片處理一樣，我們同樣可以用工具離線處理。通過(guò)識(shí)別模板中的img標(biāo)簽，再對(duì)src屬性做處理即可，這樣開(kāi)發(fā)時(shí)只去關(guān)注基礎(chǔ)功能的實(shí)現(xiàn)，其它的適配都應(yīng)該交由工具去實(shí)現(xiàn)，最大化的解放自己。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80948.html
