前端的离线处理

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

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