千行代码实现 IE8 兼容的仿 angular 指令式模板控制器

2015-05-19 by Dron

Angular 出来的时候火了一阵,现在受到 React 的冲击显得有些冷却,之前我只是听说,也听过 @隐若 老师的一些分享,但一直没有机会用上或深入了解他的特性。

直到上个月初,内部要做个 xx 平台,平台上的表单功能有些繁琐,所有表单域都是根据配置项动态渲染出来的,验证、联动什么的也都是配置。初步判断用 Angular 的指令和双向数据绑定可以很好满足,不过后来并没有直接用上 Angular,具体原因就不在这儿展开了。

Angular 的模板是基于 DOM 结构的,这一点与其它字符串类的前端模板有一个最大的不同:在数据发生变更时,无需使用 innerHTML 属性来更新整个视图,可以通过数据对比的手段实现最小范围的 DOM 节点更新。在渲染开销上有一定的优势,另外一个好处是:可以保留已注册的事件,而不必使用事件代理。

但是,Angular-1.3.15 压缩后还有 126kb,对于仅模板需求的小应用来说还是满大的,另外有点小遗憾的是 1.3 之后的版本不再对 IE8 进行兼容,这在当下国内环境中有点不太合适。

为了满足技术宅的那点小兴趣,我决定自己实现一个仿 Angular 模板控制器,没有双向数据绑定、没有 MVC、没有指令、没有过滤器、没有依赖注入器等,我对这个项目的定义是,只要实现超过 2000 行代码就放弃,当然,这已经是我上个月的决定了,因为我已经将它写出来了,JS 部分在 1000 行左右,压缩后 11kb,gzip 后 4k,还算满意。

我把它称为 domplate,名字意为 dom template,是一个基于 dom 结构的前端模板控制器:

文档:http://ucren.com/domplate

github: https://github.com/ChineseDron/domplate

本身 JS 的实现不多的,一周就写完,但是由于一直懒得整理文档和 demo,直到一个月后的今天才把文档写完,也刚好能在 博客 荒废满一周年之前赶紧再补充点料,不过按照之前我开源过的所有个人项目来看,我应该很快就会将它打入不维护状态。^_^

其实,Angular 的效仿者国内有很多,相信 react 版本的也很快会出来,唯一一点遗憾的是国内还没见过特别牛逼的关于模式创新的 JS 库,难道是因为国内的互联网公司都是商业公司,而不是像 google 或 facebook 那样的技术公司,愿意花时间和人力成本来孵化这种对公司来说价值不明显的技术产品?