类angluarjs的模板引擎-- 前篇

目前的业界，js模板引擎百花齐放，按各种原理实现的都有, 唯独之前第一次见到angluar的模板引擎的时候, 觉得眼前一亮 - 这应该就是我设想的。我很喜欢他的这些特性：

1. 我们所需要处理的是，是html的模板，所以，我并不希望如果某种情况我需要将模板内的内容直接显示出来的时候，会把外面的表达式一起渲染出来（诚然我们可以让他经过渲染器过滤掉，但是仍然会有些问题，第2点来描叙）。而angluar的模板表达式在html元素内, 做为元素的属性存在, 这样当需要直接显示在页面上的时候, 不会将表达式一起显示出来.
2. 模板可以在非前端的环境下使用, 而非得依托某特定解释器存在. 既不能够存在特定的表达式。这样如果我需要从后端直接显示模板的时候，他也应该能够显示出来而非依托js模板引擎的解释器来渲染。
3. 通用性和扩展性强。同2, 里面不含有特殊的处理方式，最好是字符串式的处理，可以使得他可以应用在更多的平台上。

我们纵观其他的模板引擎，利用js 的特性来处理的占一部分，然后另外一部分以从其他语言（如php，java，.net等)的模板引擎借鉴之（其实这部分的，比相对用js特性来处理的，又要好些，毕竟通用性强一点）。 虽然各有应用场景，但是就我们设想的未来更大的通用和扩展性来说，觉得angluar 类似的处理模式更方便。

由于我只从表现去看angluar的模板引擎，并未研究他的代码，所以，实现应该还是有比较大的差别的。 这里说的我的模板引擎的特点：

1. 表达式在html 元素内部，做为元素的属性存在，当然，生成之后会过滤掉那些属性
2. 没用使用js特性或者某些语言特性的处理，而是采用的字符串的拼接方式，效率未必够高，但是兼容和拓展应该更好。

3. 目前只支持部分表达式, if， loop。 if 里只支持 ==, ===, !=, !==, , >= 表达式如下 … 当满足条件时, 表达式才存在, 不满足时, 整行会被过滤掉.

   loop 里支持无限嵌套(即可循环套循环) 表达式如下: ….{{a.x}} 其中, a是这个里面的临时变量, 相当于js里的 for (var a in b), 而b则是我们传入的一个object对象.

4. 以传入的数据为基准点做递归，渲染含有传入的数据的字段的内容。

基本原理如下：

1. 传入data。
2. 遍历data。
3. 如果data里的值为 数组或者对象，(则说明可以循环递归了) 3.1. 如果该值存在在loop的里，则取得相关的元素节点，并且循环递归遍历。 3.2. 对象存在但是没有在loop里，继续递归。

    3.2.1. 如果他是上一次递归传递下来的值，则加入到递归替换的对象里。
    3.2.2. 否则说明他本身就是本次值，直接替换即可
   

4. 如果data里的值， 存在在if里。 4.1. 获得if里的元素节点，并且遍历，判断元素节点里的判断符是否与data里传入的值相等。

    4.1.1. 相等，则将元素节点替换成相应值。
    4.1.2. 不相等，则将该元素节点剔除。
   

   4.2. 不存在，则直接替换成data里的值的内容。

示例如下： 假设数据为 { items: [ {a: 1}, {a:2}, {a:3}, {a:4} ] } 方法为 {{item.a}} 结果为 1234 (将去掉我们给设定的那个对象)

对于if { a: 1 } 方法为 123 有且当 a 为 1 时才会显示， 其他不显示 则结果为 123

另外对于对象, 我们支持的判断有 String, Number, Boolean(true|false), Null (null), Undefined (undefined). 权重又右到左 （即如果字符串为 true | false, 则自动判断为布尔值， 其他的类推）。

具体的代码部分，请待续。。。

扫码关注w3ctech微信公众号