框架采用express,模板用ejs,前端用amazeui. 做完三个页面后，设计突然说要改UI设计，我勒个去，郁闷地一个个页面重新调整。下班之后反思一下，觉得花了太多时间在重复劳动上，是时候涉猎一下前端工程化的知识了。
用百度在互联网畅游了一番，总结了一下前端工程化的几个关键要素：编码规范化，结构模块化，流程自动化。本文所述的方法属于模块化，但只是简单地把dom，css,js拆分，以便更好地管理，而并非像vue框架那样的组件化，但这种方式可能更易于理解，可以作为过渡。
这是原来的目录结构
其中public目录里存放的是静态资源，按照传统的做法，css文件夹种存放less文件和css文件，img文件夹中存放图片资源，js中存放各页面（views目录中对应的页面）的js文件。
当页面越来越多，会遇到一些重复的部分。像图中的侧边菜单，顶部搜索框，底部菜单，在几个页面都有。如果每个页面拷贝一份样式，js，dom,当需求方要更改样式或者增加功能的时候，徒增工作量。
在一篇文章的启发下（ 前端开发工程化探讨 ），我将目录结构改成如下：
为了标准化，每个组件里的文件命名都相同。以侧边工具栏为例，dom.ejs是一个模板文件：
如果不熟悉ejs模板的语法，可以百度一下。另外，此模板还支持嵌套，并传入参数。
例如，下面是一个列表容器的dom结构，配合js可以实现上拉加载功能，但列表项的样式可能不一样，你可以在使用时再根据传入的templateName参数决定用哪个模板，非常灵活。
在使用模板时，这样嵌入页面。
注意，应使用<%-include()%>,而非<%=include()%>。<%-%>表示内容原样输出，不进行运算。而<%=%>会生成运算后的内容。
然后，再来考虑js和css文件应当怎么处理。如果在页面中逐个引入组件的js和css文件，维护起来会非常不方便。所以我考虑将某个页面涉及到的组件，还有页面本身的js和css打包成一个。这样做有个缺点，每个页面的js和css文件会有重复的内容。如果用seajs或requirejs等模块加载，可以解决重复的问题，但也可能增加项目的复杂度。考虑到打包后的文件只有10K大小，还是暂时使用打包的方法。有兴趣的朋友也可以将js模块化并测试一下性能。
打包涉及到gulp的应用，有许多文章谈论到，而我是通过开源项目学习的。
首先我需要写一个page-config.json文件，告诉gulp我要打包哪些资源：
将文件放在模板目录的根目录下面，与src,dist同级。src存放原文件，dist存放生成后的文件。
再写一个gulpfile.js,用于自动构建。
下面是gulp文件的写法：
在使用时，要在命令行安装gulp，切换到gulpfile.js所在的目录，运行gulp watch，这样，每次在css和js更改时，会自动重新打包。当然，为了不重复操作，你可以写一个脚本文件。
张克军 提出的“组件化就是函数式界面开发”这一说法我是难以接受的，函数式界面开发就让它好好地叫“函数式组件化”吧，不然我们会在所谓的“传统UI框架”和“函数式界面开发”之间出现一个Gap，岂不是又要造个词给填上，多累……我前面说会有一个Gap，这个Gap很可能就是我们现在想用“组件化”这个定义去表达的一些点，我想在此做一些个人的见解
我将之理解为以下几要素：
组件是对逻辑的封装，不限于图形元素。即我们可以把if做成组件、把一个倒计时做成组件、把一段动画做成组件、把路由做成组件、把数据架构做成组件，而这些并不能称为控件
组件具备单个可移植性，即“随加载随用”，不需要为其准备复杂的基础条件（如引入样式、引入框架等）。然而这一点现有那些所谓组件库做得并不好，技术上也不大现实
组件是声明式定义的，而非命令式。这个不想多说，很大程度上是自己主观的一个想法
而上面最重要的就是第一点，所以要问我什么是“组件化开发”，我的说法是：
把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式
这与传统开发框架的最大区别就是统一了图形元素与非图形元素，除此之外我再想不出其它真正体现区别的点了
在这个概念下，包括router、ajax、module loader、timer、animation、interval等，都是组件，共享统一的生命周期管理和对外接口，且都是声明式地进行组合
我的一位同事告诉我去年的深JS上，有位淘宝的朋友的话题叫做“前端组件服务化”，这里面提的那些个概念，是很符合我对“组件化”的认识的，他要是不给再强安个“服务化”的噱头就好了- -
不过话说回来，在这个要求之下，组件其实不是那么好进行抽象设计的，随便说几个例子，有难的也有简单的：
非图形元素的各种需求如何统一接口，如timer和ajax
组件可以横向组件，但是纵向复用如何解决，如希望任何图形元素都可以实现被鼠标拖拽的效果，则鼠标拖拽应该也是个组件，这个组件与其它组件的关系是什么
有些组件对其可被组合的组件是有要求的，比如HTML里就不大好意思把一个<p>放进一个<span>里，这一点如何在组件上表达（实现不难，表达比较难）
一些我们原本想当然认为纯的小函数的东西，是不是也能当组件玩，比如underscore.pick要不要也是个组件
