前端的离线处理

这里的离线处理指线下把一些事件提早作好，不在应用运行时再去作

其实前端的离线处理在一些工具中能够看到，好比说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属性作处理便可，这样开发时只去关注基础功能的实现，其它的适配都应该交由工具去实现，最大化的解放本身。