In NetEase2017

Mockjs

独立前／后端，同时为了调试前端的功能完整性，需要一个模拟接口。
工作原理：生成随机数据，拦截Ajax请求
语法规范：
1／数据模版（template）定义规范

2／数据占位符（Mock.Random）定义规范

Mock.Random的方法在数据模版（template）中，成为“占位符“

Random.extend({
    collection: function(){
        var collections = ['金牛', '射手', '处女']
        return this.pick(collections)
    }
})//为Mock.Random扩展原型方法
//用的时候：1／2一样的，即Mock.Random中的（原型）方法，和 数据模版中的占位符 一一对应！
1／Random.collection()  // =>'金牛'
2／Mock.mock('@collection') // =>'金牛'
3／Mock.mock({
    collection: '@collection' // => { collection:  }
})

gulp是啥

gulp是一个自动化工具。
- 搭建web服务器
- 文件保存时自动重载浏览器
- 使用预处理器如Sass
- 优化资源，比如压缩css/js/img
和grunt相比，gulp更加简洁，执行效率更高

.ftl文件是什么文件

是Freemarker模版的文件后缀名
是“网页模版“和“数据模型“的结合体
好处是分离了“网页界面设计人员“和“编程人员“的工作
是一个非常优秀的模版引擎，它可用于任何场景。负责将数据模型中的数据合并到模版中，从而生成标准输出

直接判断“长度“是否为零

{#if !!arr.length}
  hh，证明你是有长度的
{/if}

arr.length = 0 ，则：
!arr.length == true
!!arr.length == false （判断关键！）

arr.length = 3 ，则：
!arr.length == false
!!arr.length ==true （判断关键！）

v-if／v-show

在regular里，
{#if}相当于v-if：完全回收，是一种语法元素；
r-hide相当于v-show：只是切换节点的可见性，是一种指令增强

[ ].filter( )

这是一个不会改变原数组的函数，传一个“规则函数“进去。

//返回数组arr中大于18的元素：
var arr = [32, 33, 16, 40];
function func1(item){
    return item >=18;
}
console.log(arr.filter(func1));

事件：1／dom事件；2／组件事件

dom事件：

on-开头（所有节点；都会被作为dom事件处理）
$event对象

组件事件：

on-开头（所有组件；其他除了on的都是作为data处理）
component. $on：用于添加事件监听器 component.$ off：用于解绑事件监听器
component.$emit：用于触发某个事件

自定义dom事件

//定义一个回车事件
Regular.event('enter', function(ele, fire){
    Regular.dom.on(ele, 'keypress', function(ev){
        if(ev.which === 13) fire(ev)
    })
})
//然后在组件直接on-enter= { remove }，代表：回车后抛出自定义事件remove

内建生命周期内的组件事件

regularjs会在初始化时的关键阶段抛出事件：
1／ $config：会在compile之前触发，可以在此时预处理组件数据 2／$ init：会在compile之后触发，此时dom结构已经生成，可以用ref来获取来
3／ $destroy：会在组件被destroy时触发（$ 前缀只是为了区分这个是内建的事件！）

内嵌内容（this.$body）

即被当前组件包裹的内容。
在Regular中，内嵌内容会成为组件的 $body属性，你可以通过this.$ $body来得到它。

与dom相关方法的简单封装

Regular.dom可以获得这个方法的集合.

var dom = Regular.dom;
dom.element(component, needAll)//needAll为true时，可用于获取组件内部的所有节点（数组）

//例子：
var dom = Regular.dom;
var component = new Regular({
    template: '<div id="first"></div><p id="last"></p>',
    init: function(){
        console.log(dom.element(this))//=> div#first
        console.log(dom.element(this, true))//=> [div#first, p#last]
    }
})

所以，dom.element 和 ref 都可以获取到节点
dom.element的优势：不需要做主动的／手动的标记；
ref的劣势：模版的控制权不在当前组件，如以下代码：

var Component = Regular.extend({
    template: '<div ref="container"></div>',
    init: function(){
        this.$refs.container
    }
})

var SubComponent = Component.extend({
    'template': '<div></div>'
})
//因为SubComponent覆盖的模版并没有标记container节点

计算属性Computed

用的时候请将它当作data里面的数据用，只不过在这个组件的属性声明中，和data一样声明它是经过怎么来的就行了。
Component.extend中传入的computed会被new Component的computed合并

var Component = Regular.extend({
    template: "<div>first: <input r-model={first}></div> \
              <div>last: <input r-model={last}></div> \
              <div>Wellcome! {wellcome}</div>\
              "
})

var component = new Component({
    computed: {
        wellcome: "'welcome ' + first + last"
    },
    data: {
        first: 'He',
        last: 'Shiyu'
    }
})

export default component

过滤器的定义

Regular.filter("name", function(){})

自定义事件

var dom = Regular.dom;
Regular.event('enter', function(elem, fire){
    function update(ev){
        //某些逻辑
    }
    dom.on(elem, "keypress", update);
    return function destroy(){
        dom.off(elem, "keypress" update);
    }
})
//用时：
<input on-enter={this.submit($event)} />

换行打码

最后加一个 \

脏检查（dirty-check）

脏检查：因为Angular/Regularjs无法判断数据是否变更，所以会把整个组件遍历一遍，将数据中最新的值呈现在界面上。（发生在View层抽象Virtual DOM上）
- 数据的“双向绑定“，从“UI“到“后台的数据“，是通过ajax请求／UI事件；从“后台的数据“到“UI“则是通过脏检查
- regularjs的数据驱动是基于代码脏检查的（与angularjs）一致，所以可以直接操作裸数据来完成状态变更。

获取子节点与子组件

ref可以标记某一个指定节点或组件
用法：

var component = new Regular({
    template: " <div ref='d1'>...</div>"    
})
console.log( component.$refs )//此时refs代表的是一个ref的集合

优点：

1／引用是动态的，如果某个指定的节点被回收，引用也会自动去除；
2／除了获取节点，还可以获取组件）

不足：

1／ref标记需要手写

Virtual DOM

1／脏检查发生在view层抽象Virtual DOM上
2／Diff计算差异并映射到View层，实现局部更新

组件的业务逻辑

一个组件的业务逻辑（对于一个mvvm模式的组件来讲，业务逻辑应该是纯数据操作）应该是在定义时（即封装组件extend时）就进行确定。（在extend时定义这些业务）