前端工程化的研究与实践

摘要：随着前后端分离方案与web前端组件化思想的广泛传播，不断有新的技术方案涌出，在不同的业务场景下很大程度上提升了开发效率。该文提出的前端工程化的一种开发模式，适应大部分的业务需求与场景，经过了多个大中型项目的验证，解决了传统web开发模式带来的各种问题。

关键词：Grunt；Yeoman；Node server

中图分类号：TP399 文献标识码：A 章编号：1009-3044（2016）25-0224-03

所谓工程化，可以简单地认为是完成3项目标，避免重复性的工作，预测一些常遇到问题，提前解决，避免影响后续开发；提高开发效率，使用自动化的工具方法，编写可维护的项目代码，自动化完成调试测试等；完成优化工作，降低框架层面升级带给业务的损耗，帮助业务团队在无感知情况下的优化工作。本文结合多个项目实践中的经验，总结一套前端开发工程化的方案，能够有效的实现前端开发过程的自动化，提升工作效率。

1 Grunt，javascript世界的构建工具

Grunt，构建工具，实现了项目的自动化。对于需要反复重复的任务，例如压缩，编译，单元测试等，自动化工具能够减轻你的劳动，简化你的工作，当你在gruntfile文件中，正确配置了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

Grunt less任务，less可以让css变得更加简单，更易于维护，它可以定义常量，可以转换单位，还可以计算颜色，而且可以使用嵌套的方式把我们工重复的排列选择器的漩涡中解脱出来。grunt-contrib-less配合grunt-contrib-watch插件，可以实现less的实时编译功能。

实现：

grunt.initConfig（ {

pkg： grunt.file.readJSON（'package.json'），

watch： {

'less'： {

files： ['src/less/**/*.less']，

taskes：['less']

}

}，

less：{

files： {

'./src/css/*.css'： './src/less/*.less'

}

}

}）

Grunt sprite，grunt svgsprite任务。Grunt sprite是一个将css代码中的切片合成sprite图的工具，其主要功能是，

1） 使用二叉树排列算法，对css文件进行处理，收集切片系列，生成sprite图。

2） 在原css代码的基础上，精准定位，添加background-position属性。

3） 生成高清设备的高清sprite图，并在文件末尾追加media query媒体查询代码。

4） 在引用sprite的位置打上时间戳

5） 在样式末尾追加时间戳

实现方式，

sprite： {

'public-icons'： {

src： 'src/less/default/public/icons/**/*.png'，

destImg： 'src/themes/default/common/images/public/icons.png'，

destCSS： 'src/less/default/public/icons.less'，

padding： 10，

cssFormat： 'less'，

engine： 'phantomjs'，

// More information can be found below

cssTemplate： spriteLessTemplate（'icons.tmpl'， {

baseClass： 'icon-public'

}），

// OPTIONAL： Manual override for imgPath specified in CSS

imgPath： 'images/public/icons.png'，

// OPTIONAL： Map variable of each sprite

cssVarMap： function （sprite） {

// `sprite` has `name`， `image` （full path）， `x`， `y`

// `width`， `height`， `total_width`， `total_height`

// EXAMPLE： Prefix all sprite names with 'sprite-'

sprite.name = 'icon-' + sprite.name；

}

}

通过icons-tmpl的配置，可以实现不同状态的图片，普通态，hover态下的sprite图。当然，如果是在不同的项目业务场景下，根据不同的站点风格，可以设置不同的hover态rule，自定义grunt插件，专门处理hover态下的图片颜色，例如default态下颜色为gray，hover态下为blue，借助ps的color处理方法，自动生成hover态图片，保证全站风格的统一。

2 组件式开发，seajs模块按需加载

Seajs追求简单、自然的代码书写和组织方式，简单友好的模块定义规范：Sea.js遵循CMD规范，可以像Node.js一般书写模块代码；自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰。

根据业务需求，在Seajs的基础上，编写更适合业务场景的模块加载器，按需加载，缓存处理，

核心实现，

function Module（url， deps） {

this.url = url；

this.dependencies = deps || []；

this.exports = null；

this.status = 0；

//depend on me

this._after = {}；

//wait for but unloaded

this._remain - 0；

}

Module.prototype.resolve = function（） {

var mod = this；

var ids = mod.dependencies；

var urils = []；

for（ var i = 0， len = ids.length； i < len； i++） {

...

}

}

Module.prototype.load = function（） {

for（var i = 0； i < len； i++） {

m = cachedMods[urils[i]]；

if（m.status < STATUS.FETCHING） {

m.fetch（requestCache）；

}else if（m.status === STATUS.SAVED） {

m.load（）；

}

}

}

自定义组件库，采用常用的MVC思想，为复杂的web应用程序提供模型（models）、集合（collection）、视图（views）的结构。其中模型用于绑定键值数据和自定义事件；集合富有可枚举函数的丰富API；视图可以声明事件处理函数，并通过RESTful JSON接口接连到应用程序。

基础组件类Node.js，采用inject jquery的方式，既保证了与jquery的兼容性，也能最大程度上提升我们的开发效率。其次，组件生命周期的控制，根据render，created，detached，removed不同时间点的状态控制与事件响应。以及，基础prop属性，option，events的自定义配置。组件拥抱webcomponent的的新标准，模拟shadow dom，custom element的自定义新元素方式x-tag。

例如，文本输入框text-input组件。

DBL.register（'x-text-input'， function（ require） {

var Node = require（'x-node'）；

var TextInput = Node.extend（ {

events： {

...

}，

render： function（） {

...

}，

created： function（） {

...

}，

placeholder： function（） {

...

}

}）；

return TextInput；

}）

3 Yeoman项目工程化自动工程

Yeoman不仅为新项目建立工作流，同时解决前端开发所面临的诸多严重问题，例如零散的依赖关系。它的目标便是通过grunt与Bower（前端资源的包管理器）的包装为开发者创建一个易用的工作流。

利用Yeoman快速搭建骨架的特性，创建一个项目骨架生成器，既有利于同事之间的彼此协作，也有益于项目的扩展。Yeoman简单易用，可以很方便的创建生成器generator，例如创建成功后的项目骨架生成器为generator-dbl。

那么新建项目便可以通过，npm install -g generator-dbl，生成项目结构。

4 页面直出node方式，生成模拟数据mockjs，模板使用arttemplate

通过直出方式，降低首屏加载时间。从用户在浏览器端输入url到展示页面的过程，这种模式简单的分为以下部分。

1） Browser，客户端输入url地址，发出请求，指向静态nginx

2） Nginx，判断如果是静态请求html模板，直接向模板服务器发出请求，如果不是，映射向php服务器发出请求。

3） Php服务器收到请求后，向server数据服务器请求，得到所需的数据后，将数据映射给专门处理模板的服务器。

4） 模板机收到数据后，使用arttemplate模板，渲染出完整的页面，返回给php。

5） Php将完成的页面返回到用户浏览器。

通过这种直出的方式，不再需要请求到html文件后，单独向server请求数据，减少了一次网络请求。同时，不再强依赖js加载结束，才能渲染出页面，大大降低了首屏加载时间，提升了用户的体验。

通过这种方式，前后端开发不再相互依赖。前端使用node server启动local server即可，通过配置route路由，浏览器输入url，node server接收到请求后，将cgi目录下同一路径的json作为响应，通过arttemplate模板，渲染出完整的html，作为响应，开发十分便捷。

Arttemplate性能卓越，执行速度是Mustache和tmpl的20多倍，而且支持运行时调试，可以精确定位异常模板所在的语句，支持include语句，所以采用了arttemplate模板。

前端对于cgi请求，每次手动编写json数据，静态模拟数据。通常情况下会遇到这些问题：某些逻辑复杂的代码，加入和去除模拟数据时得小心翼翼；想要尽可能还原真实的数据（Php返回的数据），就要多次改动模拟数据；特殊的格式，例如IP，随机数，图片，地址等，需要去收集。通过引入mock.js，解决了这些问题，可以基于数据模板生成模拟数据，这样就可以通过node读取数据模板，mockjs生成模拟数据后，node写json文件，输出模拟数据，无需等待。

该模式下，前后端开发可以完全不再互相依赖，开发之前只要定义好接口，然后独立开发，当开发完成后，再在开发环境或者测试环境联调即可。而且通过数据直出的方式，页面在js加载出来之前就已经显示出来，增强了用户体验。

5 结束语

通过以上的一整套的技术实践方案，从grunt，yeoman技术到页面直出方案，以及通过多个项目的实践结果表明，该方案的可行性与工程化。

参考文献：

[1] Azat Mardan. Node.js项目实践构建可扩展的Web应用[M]. 北京： 电子工业出版社， 2015.

[2] 吴中骅， 雷宗民. Node.js实战 [M]. 北京： 电子工业出版社， 2015.