对前端模板的思考

前言

这几天，我一直对模板这个词耿耿于怀。暂且不去思考后端的工程模板什么的，就单单前端而言，模板很容易让人想到的是模板引擎，Underscore Templates、Embedded JS Templates、HandlebarsJS。在node上用的还有Jade templating、ejs、express template….。等等，但是boss想的不是这个模板啊，应该是快速开发方向去思考，模板应该是页面，应该是一看到就能拿过来用的页面，这样帮助程序猿快速开发啊。原来发现，认知就不在一个频道。
模板引擎总结
angular
果纯用模板的话，推荐doT，速度快，支持编译成函数。
react，比模板更高级点。
vue.js 国人做的框架和angular类似不过精简了很多。中文文档非常全。
mustcache
模板引擎看一下 layer的吧
如果想高级的推荐 riotjs 2.0，riotjs，你看看它1.x的版本里面有个简洁的模板实

riot.render = function(tmpl, data, escape_fn) {
    if (escape_fn === true) escape_fn = default_escape_fn;
    tmpl = tmpl || '';
    return (FN[tmpl] = FN[tmpl] || new Function("_", "e", "try { return '" +
        tmpl.replace(/[\\\n\r']/g, function(char) {
            return template_escape[char];
        }).replace(/{\s*([\w\.]+)\s*}/g, "' + (e?e(_.$1,'$1'):_.$1||(_.$1==undefined?'':_.$1)) + '") + "' } catch(e) { return '' }")
    )(data, escape_fn);
};

JADE
UNDERSCOREJS
HANDLEBARSJS
DOTJS

10款模板引擎

对页面的快速开发的思考

方向之一：模板引擎

使用模板引擎，可以实现代码复用，可以增强渲染性能。

方向之二：示例页面

一个示例页面，应该是对某个典型场景的展示示例，也许不需修改或是简单修改，即可拿来就用。

方向之三：UI组件

这是一种组件化的方式：一个页面切分为多个UI组件，每个UI组件功能独立，可以直接复用到任何一个页面，每个UI组件会有其独立的css、js、json、模板片段(jsx php html jsp vm…)。

对示例页面的理解

分两个方向：一个是抽出一些典型的业务相关页面；一个是示例页面由我们封装的UI组件组成，说到底，我们沉淀的是组件，示例页面只是呈现组件的方式。

典型的业务相关页面

这里话不多说，我们已经积攒了部分页面。但纠结要给哪些典型页面，哪些场景的页面，页面要出到什么程度，这个很难说。开发者即使感觉你的页面有点用户，也是轻易不会去用的，因为拿来终究是需要修改的，麻烦。或者开发者所在的公司有UE出图，那更不需要了，他们需要的，是功能插件，他们没有时间精力甚至是能力去封装的功能插件。

由UI组件组成的示例页面

这个方向需要好好聊一下。看下图：

页面的UI组件细分：

对UI中模板片段的说明：