RegularJS基础

构建数据驱动型组件的类库

---

基本用法：

---

```

模板：

- 文本插值 属性插值 {}

- 各种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库，发现部分使用问题，已经反馈。