1、结合资料对Regularjs的理解
它是一个基于动态模板来实现数据驱动的组件化的一个框架。
动态模板：实现view是会随着数据变化的而变化
数据驱动：双向数据绑定实现方式，数据绑定,局部刷新
组件： 组件化开发，将一些公用的东西组件化。
2、构建的基础步骤
第一步 var hello = Regular.extend{} html文件可放在template里面，extend返回一个组件结构函数
第二步var component = new hello{} data在里面设置
第三步 component.$inject('#app'); 将组件插在目标节点中，实际上就是js里面的append
<div id="app"></div>
<!-- 引入regular.js --><script src="https://rawgit.com/regularjs/regular/master/dist/regular.js"></script>
<script id="hello" type="text/regular" name="hello">
<p> Hello, Guest</p> <p>Hello,{username}</p>
</script>
<script>
var HelloRegular = Regular.extend({ template: '#hello'， data:{name: 22}});
var component = new HelloRegular({
data: {username: "leeluolee"},
config: function(data){
//会在模板编译 之前 被调用，config一般是用来初始化参数，
//它接收一个Object类型的参数data, 即你在初始化时传入的data参数. },
init: function(){
//会在模板编译 之后(即活动dom已经产生)被调用. 你可以在这里处理一些与dom相关的逻辑 }
});
component.$inject('#app');
</script>
3、基础
3.1生命周期钩子
1.在模板编译前调用、config(data)
2.在模板编译后调用 init，未插入到实际的DOM节点中
3.在组件销毁前调用 ，destroy,需要调用父类（this.supr()）,如监听器、内部事件之类
3.2插值
插值有两种：文本插值 <div>{content}</div>，属性插值 .modal-{klass}
1）如果属性是一个字符串，字符串中含有插值。那么解析后，会转化为相应的组合表达式。如：class="my-{className}"，解析my-{className}后会得到'my-' + className，通过这个表达式来求取值
2）非指令类的属性，会在绑定值改变的时候，自动更新属性值。如class={myClass}
3.3语句
1、条件语句，可以直接在页面编写 {#if condition}...{#elseif condition2}...{#else}...{#if}
2、list列表渲染，使用if控制属性，根据判断依据，指令、属性或事件会被添加或移除
{# list item as obj}
<div>{obj_index}:{obj}
</div>
{/list}
使用 track语句 加速你的列表渲染，超大列表中推荐使用这个，他的渲染速度比较快 ， 但是不能用在对象的列表渲染中
{#list sequence as item by Expression}{/list}
3、include用来标准引入一些内容，语句可用来引入动态的渲染片段。
{#include template}
template: 一个Expression,求值结果是字符串或模板AST
3.4指令
1. r-class <div r-class='{"active": page === "home"}'></div> 对象表达式，当值为真，添加对应的键作为class
2.r-style <div r-style={ {left:left+'px'} } ></div>
3.r-html
4. r-model <input type="radio"value="option1" r-model={radio}> 表单与对应的字段形成双向绑定
5. r-hide <div r-hide="!checkbox" ></div>
6. r-animation
7. on-click/.. 绑定事件 on-click on-click={ todos.splice(todo_index,1)
3.5动画
r-animation
1. 例子：实现一个click触发时的有淡出的动画效果
<button r-animation="on:click;class:animated fadeIn;wait:500;"></button>
（1） on:click,当点击时候触发，
（2） class:animated fadeIn，为按钮添加一个类名
（3）等待500
（4） 动画结束，类名移除
2.一些动画command:on,emit(触发),call（触发）,when...
（1）on和when是用于激活动画开始的Command。其中，对于on:event，当特定的event触发时，开始动画，event可以是当前节点的DOM事件，也可以是所在组件的事件。
（2）when，和on的作用类似，只不过它是在when: expression中的expression为真时触发
（3）例子: r-animation ='when:status==1 class:fadeIn'，当status为1 时候，会触发这个动画效果
（4）emit:event抛出某个事件，可能会导致触发另一个动画序列
（5） call:expression运行一个表达式，并进入脏检查
3.6过滤器
个人理解是比较实用的。比如，你遍历到得到一个数据，为50.234，而实际只需要50，那么去掉后面的小数，则是需要过滤器，把没有用的值过滤掉。
Regular.filter("setTime",function(value, type){
var theTime = parseInt(value);// 秒
var theTime1 = 0;// 分
var theTime2 = 0;// 小时
if(theTime > 60) {
theTime1 = parseInt(theTime/60);
theTime = parseInt(theTime%60);
if(theTime1 > 60) {
theTime2 = parseInt(theTime1/60);
theTime1 = parseInt(theTime1%60);
}
}
应用： {record.total_eff|setTime:record.type}
|前面的数据为需要变化的数据；
应用方法，function(value, type) value是为total_eff ，type是为record.type
3.7 $ref
在模板中，可以使用ref属性来标记一个节点或组件,并且ref可以动态使用<div ref="{name}"></div>。
在实例化后，可以通过component.$refs 来获取你标记的节点
在我的理解中，$ref是一个标记，与js的获取节点功效一样，在div做完标记后，可以在方法中直接进行操作。如下面可以直接赋值。
var slider = this.$refs.slide;
evtObj.value = slider.value;
3.7 $state
可作用于路由的跳转
当一个页面需要跳转到另一个页面时，可以直接添加点击事件，on-click={this.jump()
然后直接在方法中添加 this.$state.go('app.userquestion', { param: {page: page} })
第一个值为跳转的页面，后面的值为一些可以保留数值的参数
4、事件
regularjs的事件分为两类:DOM事件和组件事件
事件绑定写法：<div on-click="remove()"></div>
如果传入的是表达式，那么只需要在事件触发时运行一次。
4.1 dom事件
（1）事件绑定的语法为：on-eventName={Expression}。 事件触发时，Expression就会运行一次。
（2） 示例：<button on-click={count = count + 1}>INCREASE</button>
（3）在个人的理解中，dom事件为浏览器的本事自带的，不需要定义的，比如，click、mouseover、mouseout、键盘事件等等，
所以后面需要触发时不需要添加this.$emit("save",2）等等，一操作，就可以直接触发事件
（4）阻止事件的方式有两种：{Expression}返回false（即 === false），或者使用$event.preventDefault()
4.2 组件事件
component.$on: 用于添加事件监听
component.$off: 用于解绑事件监听
component.$emit:用于触发某个事件
4.3不同点
组件事件由 $emit 方法抛出，而 DOM 事件由浏览器抛出
DOM 事件由于 DOM 本身的特点，是可以冒泡的，而组件事件没有冒泡的机制
this.$on("save",function(arg){ console.log(arg); }); 添加组件事件
this.$emit("save",2） 触发组件事件 打印出2
this.$off("save"); 解绑组件事件
5、组件
在regular中，组件 = 模板 + 数据 + 业务逻辑
5.1定义组件
使用 Component.extend 定义一个可复用的组件
const Component = Regular.extend( {
template: `
<button on-click={count+=1}> 你点了{count}次按钮 </button>`,
config( data ){
data.count = 0;
}
});
5.2初始化组件
一种为new直接实例化，newComponent().$inject(document.body)
一种为内嵌组件<component></component>
6、dom操作
自己理解：regularJs获取节点有三种方法：（1）原生js获取（2）Regular.dom获取（3）$ref标记节点
如果只是简单的dom处理，可以直接使用Regular.dom。
具体操作方法：
1. 绑定事件Regular.dom.on(element, event, handle);Regular.dom.on(element,"click", function(event){});
2. 移除事件监听器Regular.dom.off(node, event, handle);
3. 添加节点classNameRegular.dom.addClass(element, className)
4. 移除节点的某段classNameRegular.dom.delClass(element, className)
5. 判断节点是否拥有某个classNameRegular.dom.hasClass(element, className)
6. 根据浏览器和节点, 设置节点的textContent或innerTextRegular.dom.text(element[, value])
7. 设置或获取节点的innerHTML值Regular.dom.html(element[, value])
8.设置或获取节点的指定属性Regular.dom.attr(element, name [ , value])
