RegularJS基础

JavaScript011

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

做项目时前台表单验证用了jquery.validation插件。

发现在做正则表达式验证时没有参数设置可以使用,需要一个个添加方法,比较麻烦。

就做了一个简单的分装,也总结了一些正则表达式。

/**

* @anthor ycf

* @date 1017/11/3

*

* 本js是对jquery.validator的自定义方法的封装

* 只能用于正则表达验证

* 页面必须调用jquery.validator.js

* 共两个方法

* regular 只添加一个正则自定义函数

* regulararr 批量导入,传入对象即可。

* 具体信息请看页面展示及函数参数说明

* 以下是一些常用的正则表达式。

*/

//用户名验证

var usernameExp = /^[a-zA-Z0-9_-]{4,16}$/

//姓名验证

var nameExp = /^[\u4E00-\u9FA5A-Za-z]+$/

//密码验证

var pwdExp = /^[0-9a-zA-Z_#!@$%^&*]{6,16}$/

//年龄验证

var ageExp = /^(?:0|[1-9][0-9]?|120)$/

//邮箱验证

var emailExp = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/

//固定电话验证

var telExp = /^0\d{2,3}-\d{7,8}(-\d{1,6})?$/

//手机号码验证

var phoneExp = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/

//英文名验证

var enameExp = /^[a-zA-Z]+$/

//邮政编码验证

var postalcodeExp = /^[0-9][0-9]{5}$/

//QQ验证

var qqExp = /^\d{5,10}$/

//非法字符验证

var ffzfExp = /[@#\$%\^&\*]+/g

//IP验证

var ipExp = /((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/

//非负整数验证

var ffzsExp = /^(0|[1-9]\d*)$/

//正负小数验证

var zfxsExp = /^[+-]?\d*\.\d{1,3}$/

//正负整数和小数验证

var zfzshxsExp = /^(-)?\d+(\.\d+)?$/

//身份证号验证

var idcardExp = /^[1-9][0-9]{5}(19[0-9]{2}|200[0-9]|201[0-9]|202[0-9]|203[0-9])(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9xX]$/i

//限制输入

var limitExp = /^((?!test).)*$///不能输入包含test的字符串

/**

* 自定义正则匹配方法

* @param funName 自定义方法名

* @param Exp 正则表达式

* @anthor ycf

*/

function regular(funName,Exp){

jQuery.validator.addMethod(funName, function(value, element) {

return this.optional(element) || Exp.test(value)

}, "不通过")

}

/**

* 批量添加自定义正则匹配方法

* @param objExp 对象

* 例如{ "postalcodeCheck":postalcodeExp}

*

* @anthor ycf

*/

function regularArr(objExp){

$.each(objExp, function(i) {

jQuery.validator.addMethod(i, function(value, element) {

return this.optional(element) || objExp[i].test(value)

}, "不通过")

})

}

这样在前台js里只需要申明一个对象,并引入这个js文件就行了。希望能帮到大家。