当模板字符串中有循环存在时,它将被编译成嵌套更深的tokens。
最后判断token[0]的值,若是"text"则与结果字符串直接拼接,若是"name"则取data中对应的值之后再拼接,若是"#"说明有嵌套数组则要递归。
之前用artTemplate的时候,直接替换整个html会闪一下,所以自己搞了个数据绑定主要思路我觉得就是在dom的属性上绑一些model的字段,如果model有变化,就去改变相应的model(整个很好做),然后更新dom。。
比如说
<div>{{person.name}}</div>
会被渲染成
<div data-binding="person.name">{{person.name}}</div>
那么如果person.name变化了,自然能够通过data-binding整个属性去改变div的值
反向的话,如果model更新,我觉得应该是事件触发的,比如说自带就有change,blur这些
我觉得关键是需要non-logic的模板引擎,否则在模板里加了逻辑。。整个就跪了,因为另一个逻辑分支的内容不会被渲染到dom里面,从而你如果model更新换了逻辑分支的话那就没办法了
{{if a}}
<div>{{person.name}}</div>
{{else}}
<div>{{person.age}}</div>
那么条件a变了,你也没法从age切到name
构建数据驱动型组件的类库
---
基本用法:
---
```
模板:
- 文本插值 属性插值 {}
- 各种js表达式(except ++ -- &| )
- @(绑定一次的变量名) ——》脏值检测
- | filterName:arg1,arg2 Regular.filter(name,callback)
- 1..3 === [1,2,3]
- 变量undefined不报错
- Rule包括 list(item_index/item) if/else/elseif include
- 注释 {! !}
```
```
动态模板引擎是一种介于常规字符串模板(jade, ejs)和Dom模板(angulrjs, vuejs)之间的模板技术,编译生成的不是字符串而是Living dom, 使得view是会随着数据变化的
保证了regularjs的数据驱动的开发模式 和 100%的独立性
```
组件:
---
```
内嵌组件:
- Component.component('custome-pager', Pager)
- 默认属性均变为data的key/value,缺省boolean为true,属性驼峰,支持 on-事件名
- 保证组件隔离,使用issolate属性(保证父数据变不对子组件进行脏值检测)
通用组件-复用:
-逻辑类似:混入-Component.implement(ReduxMixin{}), 类似mixin
-组件继承: 继承-Regular.extend({})
-框架类似:组合-{#include this.$body} (类似slot)
----- 通用组件 extend({name,template:'XXX{#inc this.$body}XXX'}
----- 引用组件 name 填充内容
```
组件生命周期:
---
```
new Componment()
- 合并_options到data/events中
- 解析模板为AST
- 注册事件
- 触发config
- AST编译为dom
- 触发init
```
事件:
---
```
- DOM事件分类:
DOM组件 on-XXX
自定义组件 Component.event(event,fn)
事件代理支持:
delegate-click 在超大列表里避免绑定过多事件
$event对象为修正后的对象
- 组件事件:
component.$on/$off/$emit
绑定在组件上的
Tips:本身事件的监听销毁都是自动完成的
```
深入组件:
---
```
- 访问子节点/组件:
this.$ref.AA
dom.element
- 组件组合:
内嵌内容
{#include content} ——》html,但是content的上下文是alert的
{#include this.$body}
```
单页面路由:
---
```
支持SSR
异步
自动降级
依赖与Promise
用法:
restate({routes:{}})
启动 manager.start(options)
支持生命周期:
enter leave
支持事件:
begin/end/notfound
```
单页面涉及到cas的权限控制,具体参考node接入cas,以及独立的[前端工程ndp配置](http://note.youdao.com/noteshare?id=99150d7e60e648c1872c5210a7fc5d51)
其他:
---
目前接触8个工程项目,涉及到regulajs的占一半。基本的项目架构均为一个BaseComponent实现基本的方法封装,其他组件依赖于基础组件。多页面的以页面为单位,再深入划分组件。整体思路清晰,流畅,但可以加强组件的复用。过程中用到nek-ui库,发现部分使用问题,已经反馈。