页面仔初窥"前端工程化"

今天看了几篇前端界的一位大牛--张云龙的文章，其中一篇在自己的理解范围内看得懂一些，有所收获，说的是前端工程化的事，看完算是对前端工程形成了一个模糊的概念。

现在我所接触到的前端开发，还是张云龙大神所说的“茹毛饮血”的前端时代，但是关于前端工程的概念，在我了解前端的过程中却不绝于耳。现在我所做的项目，应该还算不上复杂的工程，技术选型方面，可能还停留在选哪个UI框架上。目前所使用的最高级的工具，也只是avalon，甚至连avalon的组件化都使用甚少，只是做了一个通用的下拉选择组件。但这与文章中言明的前端工程还相差甚远，接下来我说下自己看完文章后，对前端发展为一个工程的理解。

从jQuery加Bootstrap说起

jQuery加Bootstrap，需要哪里搭哪里，复用极低，资源的依赖关系基本靠开发人员脑力记忆，这是最初级的前端开发方案，也是我现在比较熟练的方案。JS的复用，是一个public.js文件，里面是我写的一个_public模块，模块在匿名函数空间内运行，向外暴露出一个_public对象作为接口，避免污染全局的运行空间，里面是一些自己写的好用的函数和一些兼容低版本浏览器的polyfill。CSS的复用是一个public.css文件，里面根据不同的作用对象，定义了不同class，用于各个页面去复用这些样式。另外引入的各种插件的依赖关系和引入顺序，主要由人工记忆。这种方式下，我自己可以明显感觉到的缺点是：1.复用性太低，能复用的除了一些功能函数和简单的样式，没有可复用的组件，比如一个日期选择的组件都没有，于是每次需要一个功能，就要手写一个功能，最多从别处粘贴一下代码完成"复用"……2.资源的引入很复杂，不能一个import搞定一个资源，引用路径和依赖关系每次都很麻烦。比如引用一个jQuery的插件，一定要先引入JQuery，再引入插件，且有些插件会要引入多个文件，加上写这些插件的路径，事情就变得一点也不"智能"了。

avalon-我自己迈出的第一步

因为React,Angular,Vue的流行，我也接触到了这些看起来更高级一些的框架，由于Vue的文档被大家所推崇，并且还是国人尤雨溪大神的作品，所以我选择从Vue开始学起，第一次看文档是比较痛苦的，文档中说到的很多概念都没有，反反复复看了一遍又一遍，结合一些实例，总算理解了组件，父子组件的通信，组件的生命周期，路由，状态管理这些是什么，这个过程是有点痛苦的，因为从没接触过webpack, npm这些，为了能知道自己粘贴的命令行是在干什么，自己粘贴的这个webpack.config.js是在干什么，经历了一个这样的过程：

Vue里的这些都是个啥？-->不管了，弄个例子下来看看-->github上弄下来，发现不知道怎么运行起来-->原来需要用webpack啊-->原来还要npm install各种依赖包啊。这些东西一次性突然蹦出来的时候，其实我是凌乱的，之前连Node是什么都不知道啊……在这期间，发现了一篇好文章，照着做了一遍以后，很有收获，也理解了这些是在干什么了。推荐如果同样不懂这些的前端同学也可以看一看。

Vue懂了是什么，该怎么用，怎么学以后，我就跃跃欲试打算用在公司的项目中了。可是后来得知了一个噩耗，因为我们服务的客户主要还是原始人类（仅本人观点，与公司无关，客户你要怼就怼我吧），用的机器和系统所限，我们必须要兼容IE8，我了解到的Vue应该是基于getter, setter的，这些特性IE9才支持，换句话说，使用Vue是不可能了。不过我依然贼心不死，想找找有没有兼容IE8的MVVM框架，这一找还真找到了，是司徒正美大神写的avalon，看了下大神处理issue的速度，惊为天人，于是就决定使用avalon了。说实话，avalon的文档的确对新手很不友好……可能是因为版本更新飞快吧……不过大神写的教程可比文档要好，因为还带着版本更新日志，看完以后总算能开始做事了。其实这也是我第一次了解到设计模式，用了avalon以后，比如想写一个面板切换，是这样的：

main.html:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>test</title>

  <script type="text/javascript" src="avalon.js"></script>

  <script type="text/javascript" src="main.js"></script>

</head>

<body>

  <div ms-controller="app" class="ms-controller">

    <button type="button" ms-click="@panel = 'panel1'">面板1</button>

    <button type="button" ms-click="@panel = 'panel2'">面板2</button>

    <button type="button" ms-click="@panel = 'panel3'">面板3</button>

    <div ms-visible="@panel === 'panel1'"></div>

    <div ms-visible="@panel === 'panel2'"></div>

    <div ms-visible="@panel === 'panel3'"></div>

  </div>

</body>

</html>

main.js:

var appVm = avalon.define({

  $id: 'app',

  panel: 'panel1'

})

ms-click是绑定click事件，ms-visible将根据它的表达式的值，控制它所在的元素的显示隐藏，这样就很容易看懂了。这么做有一个好处，我们可以将注意力更多地关注在虚拟模型"appVm"上，控制它的内容的值就可以了，avalon将自动为我们完成从虚拟视图到视图的渲染。avalon还有一个组件的模块，可以生成自定义的组件，不过这个组件没有那么多指令可以用，也没有那么灵活，但是有生命周期，所以还是可以提高一些代码的复用性的。我也是刚学习MVVM框架，我相信用先进的设计模式，能够做的事情肯定不止这点，用得好将会非常厉害！

回到前端工程化 - 压缩和资源合并

以下的内容都是我还不了解，正在或者将要学习的，更多是记录和摘要。

当技术选型完成以后，除了开发，代码的运行效率也成了前端需要关注的点，于是就引出了代码的压缩，校验，和资源合并的问题。我所理解的代码压缩可以让文件变得更小，用于开发的日志功能和debug功能都会被压缩掉，这样才可以刚才地用于生产环境。代码校验其实我是不懂的，在将来接触到之前，我暂时把它理解成每个资源都有自己的版本，对应有签名标识和完整性问题，于是就需要对资源进行校验才能更好地构建和进行资源的整合。资源合并以后，最起码的，发送的请求的次数就减少了。做完这一步，代码的运行效率就提升了。这件事人力完成压缩在合并显然是不可能的，这样改一次源码就要手动更新一次用于生产环境的压缩后的代码，还要整合在一起，所以这些必须借助工具自动完成，这样前端工程自动化的道路才开始了。

模块化开发

这是一个我觉得很有意思的部分，模块化开发，像大神所说的，模块化开发的最大价值应该是分治。那么一个大的系统被拆成了一个个小系统，再被拆成一个个组件，这样不论是对于不同人员进行并行开发，维护，还是复用性，都是有大好处的。需要哪个JS模块或者CSS模块就直接引入，想想都觉得会减少很多重复性工作的时间。

组件化开发和资源管理

以上两点已经超出了目前我的能力范围了，之前的我还能想一想也许怎样就能实现，但这里的内容我暂时是想不到怎么实现的，所以只得先在此留坑，等我走到这一步的时候再回来填坑啦！