RegularJS基础

JavaScript014

RegularJS基础,第1张

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

---

基本用法:

---

```

模板:

- 文本插值 属性插值 {}

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

javascript监听数组变化思路

1、定义变量arrayProto接收Array的prototype

2、定义变量arrayMethods,通过Object.create()方法继承arrayProto

3、重新封装数组中push,pop等常用方法。(这里我们只封装我们需要监听的数组的方法,并不做JavaScript原生Array中原型方法的重写的这么一件暴力的事情)

4、其他js数组变化监听方法

js监听数组变化实现方法

这里我们首先需要确定的一件事情就是,我们只需要监听我们需要监听的数据数组的一个变更,而不是针对原生Array的一个重新封装。

其实代码实现起来会比较简短,这一部分代码我会直接带着注释贴出来

// 获取Array原型const arrayProto = Array.prototypeconst arrayMethods = Object.create(arrayProto)const newArrProto = []

[ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method =>{ // 原生Array的原型方法

let original = arrayMethods[method] // 将push,pop等方法重新封装并定义在对象newArrProto的属性上

// 这里需要注意的是封装好的方法是定义在newArrProto的属性上而不是其原型属性

// newArrProto.__proto__ 没有改变

newArrProto[method] = function mutator() {console.log('监听到数组的变化啦!') // 调用对应的原生方法并返回结果(新数组长度)

return original.apply(this, arguments)

}

})let list = [1, 2]// 将我们要监听的数组的原型指针指向上面定义的空数组对象// newArrProto的属性上定义了我们封装好的push,pop等方法list.__proto__ = newArrProto

list.push(3) // 监听到数组的变化啦! 3// 这里的list2没有被重新定义原型指针,所以这里会正常执行原生Array上的原型方法let list2 = [1, 2]

list2.push(3) // 3

目前为止我们已经实现了数组的监听。从上面我们看出,当我们将需要监听的数组的原型指针指向newArrProto对象上的时候(newArrProto的属性上定义了我们封装好的push,pop等方法)。这样做的好处很明显,不会污染到原生Array上的原型方法。

可以直接将数字进行计算

function Add(num1,num2){

    return (num1+num2)//返回num1和num2的和

    

    //return (num1-num2)//返回num1和num2的差

    //return (num1*num2)//返回num1和num2相乘结果

    //return (num1/num2)//返回num1和num2相除结果

}

返回由字符串转换得到的整数。

parseInt(numString, [radix])

参数:numString 必选项。要转换为数字的字符串。

radix 可选项。在 2 和 36 之间的表示 numString 所保存数字的进制的值。如果没有提供,则前缀为 '0x' 的字符串被当作十六进制,前缀为 '0' 的字符串被当作八进制。所有其它字符串都被当作是十进制的。

说明 :parseInt 方法返回与保存在 numString 中的数字值相等的整数。如果 numString 的前缀不能解释为整数,则返回 NaN(而不是数字)。

parseInt("abc") // 返回 NaN。

parseInt("12abc") // 返回 12。

可以用 isNaN 方法检测 NaN。

-----------------------------

floor 返回不大于的最大整数

round 则是4舍5入的计算,入的时候是到大于它的整数

ceil 则是不小于他的最小整数