API

静态成员

vm&component

scan

用于描述HTML,将包括ms-controller/ms-imporant的元素的outerHTML取出来,变成对应的vm的render方法, 最终将里面的ms-*或双花括号变成vm中的属性与方法

注意: 如果你是将vm定义放在jQuery.ready或avalon.ready中必须手动调用这个方法.

注意: avalon2不会像avalon1那样将ms-*属性去掉了

注意: avalon不能扫描iframe的内容

有两个参数

  • 元素节点
  1. avalon.ready(function(){
  2.     avalon.define({
  3.        $id: 'test',
  4.        aaa: 111
  5.     })
  6.     vm.$watch('onReady', function(){
  7.         //页面上每个ms-controller, ms-important元素
  8.         //在其区域内的所有ms-*指令被扫描后会执行
  9.     })
  10.      //2.1.15起支持
  11.     vm.$watch('onDispose', function(){
  12.         delete avalon.vmodels[vm.$id]
  13.         if(avalon.scopes){
  14.            delete avalon.scopes[vm.$id]
  15.         }
  16.     })
  17.     avalon.scan(document.body)
  18. })

onReady回调,在2.1.0新加入,只会调用一次!

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <script src="../dist/avalon.js"></script>
  6.         <script>
  7.             function heredoc(fn) {
  8.                 return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
  9.                         replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
  10.             }
  11.             var v123 = heredoc(function () {
  12.                 /*
  13.                  <div ms-controller="test2">
  14.         <p ms-click="@alert">123</p>
  15.                  <wbr  ms-widget="{is:'ms-span'}"/>
  16.                  </div>
  17.                  */
  18.             })
  19.             var v456 = heredoc(function () {
  20.                 /*
  21.                  <div ms-controller="test3">
  22.          <p ms-click="@alert">456</p>
  23.                  <wbr  ms-widget="{is:'ms-span'}"/>
  24.                  </div>
  25.                  */
  26.             })
  27.         </script>
  28.         <script>
  30.             var vm = avalon.define({
  31.                 $id: 'test',
  32.                 tpl: "",
  33.                 switch1: function () {
  34.                     setTimeout(function () {
  35.                        vm.tpl = v123
  36.                     })
  38.                 },
  39.                 switch2: function () {
  40.                     setTimeout(function () {
  41.                         vm.test.tpl = v456
  42.                     })
  44.                 }
  45.             });
  46.             vm.$watch('onReady', function(){
  47.                 avalon.log('vm1 onReady')
  48.             })
  49.             var vm2 = avalon.define({
  50.                 $id: 'test2',
  51.                 ddd: 'aaaa',
  52.                 alert: function(){
  53.                     avalon.log('????')
  54.                 }
  55.             });
  56.             vm2.$watch('onReady',function(){
  57.                 avalon.log('vm2 onReady')
  58.             })
  59.             var vm3 = avalon.define({
  60.                 $id: 'test3',
  61.                 ddd: 'bbbb',
  62.                 alert: function(){
  63.                     avalon.log('!!!!')
  64.                 }
  65.             });
  66.             vm3.$watch('onReady',function(){
  67.                 avalon.log('vm3 onReady')
  68.             })
  69.             var vm4 = avalon.define({
  70.                 $id: 'test4',
  71.                 fff: 'rrrr',
  72.                 alert: function(){
  73.                     avalon.log('!!!!')
  74.                 }
  75.             });
  76.             vm4.$watch('onReady',function(){
  77.                 avalon.log('vm4 onReady')
  78.             })
  79.             avalon.component('ms-span', {
  80.                 template: "<span ms-click='@click'>{{@ddd}}</span>",
  81.                 defaults: {
  82.                     ddd:'3333',
  83.                     click: function(){
  84.                         avalon.log('inner...')
  85.                     }
  86.                 }
  87.             });
  89.         </script>
  90.     </head>
  91.     <body ms-controller="test">
  92.         <div ms-html="@tpl"></div>
  93.         <button ms-click="@switch1">aaaa</button>
  94.         <button ms-click="@switch2">bbbb</button>
  95.         <div ms-important="test4">
  96.             {{@fff}}
  97.         </div>
  99.     </body>
  100. </html>

define

创建一个vm对象,必须指定$id,详见这里

  1. avalon.define({
  2.   $id: 'aaa',
  3.   bbb: 1
  4. })

ready

当domReady发生时,框架会自动调用的方法,会传入avalon作为参数

该方法与jQuery.ready相仿.

  1. avalon.ready(fn1)
  2. avalon.ready(fn2)
  3. avalon.ready(fn3)
  4. avalon.ready(fn4)

当domReady发生时,fn1, fn2, fn3, fn4会依次执行!

熟悉jQuery的人, 都知道domReady事件. window.onload事件是在页面所有的资源都加载完毕后触发的.如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. 另外我们需要在DOM准备完毕后, 再修改DOM结构, 比如添加DOM元素等. 否则有可能出现“Internet Explorer无法打开站点”的问题. 要模拟此错误, 可以在页面上添加下面的代码, 并用IE6打开:

  1. <div>
  2.     <script type="text/javascript">
  3.         var div = document.createElement('div');
  4.         div.innerHTML = "test";
  5.         document.body.appendChild(div);
  6.     </script>
  7. </div>

vmodels

放置所有用户定义的vm及组件指令产生的组件vm

  1. avalon.define({$id:'aaa'})
  2. console.log(avalon.vmodels) // {aaa: vm}

component

用于定义一个组件,详见这里

components

放置所有用avalon.component方法添加的组件配置对象

effect

用于定义一个动画效果,详见这里

validators

放置所有验证规则,详见这里

parsers

放置所有数据格式转换器

filters

放置所有过滤器,也可以在上面添加你的自定义过滤器

  1. avalon.filters.haha = function(str){
  2.   return str + 'haha'
  3. }

directive

定义一个指令, 请翻看源码,看css, attr, html是怎么玩的

  • 指令名
  • 配置对象
  1. avalon.directive('html', {
  2.     parse: function (copy, src, binding) {
  3.        /*
  4.        copy: 每次VM的属性时,avalon就会调用vm.$render方法重新生成一个虚拟DOM树
  5.        ,这个copy就是新虚拟DOM树的一个子孙节点
  7.        src: 第一次调用vm.$render方法生成的虚拟DOM树的某个节点,它将永驻于内存中,
  8.        除非其对应的真实节点被移除.以后不断用src与新生成的copy进行比较,
  9.        然后应用 update方法,最后用copy的属性更新src与真实DOM.
  11.        binding 配置对象,包括name,expr,type,param等配置项
  13.        return 用于生成vtree的字符串 */
  14.     },
  15.     diff: function (copy, src, name) {
  16.        /*
  17.        copy 刚刚生成的虚拟DOM树的某个子孙节点
  18.        src 最初的虚拟DOM树的节点
  19.        name 要比较的指令名
  20.        */
  21.     },
  22.     update: function (node, vnode, parent) {
  23.         /*
  24.        node 当前的真实节点
  25.        vnode  此真实节点在虚拟树的相应位置对应的虚拟节点
  26.        parent node.parentNode
  27.        */
  28.     }
  29. })

noop

空函数

控制台输出

log

类似于console.log,但更安全,因为IE6没有console.log,而IE7下必须打开调试界面才有console.log

可以传入多个参数

  1. avalon.log('aaa','bbb')

warn

  1. avalon.warn('aaa','bbb')

类似于console.warn, 不存在时内部调用avalon.log

error

抛出一个异常对象

  • 字符串,错误消息
  • 可选, Error对象的构造器(如果是纯字符串,在某些控制台下会乱码,因此必须包成一个对象)
  1. avalon.error('aaa')

类型检验

type

取得目标的类型 

  1. avalon.type('str') //'string'
  2. avalon.type(123) //'number'
  3. avalon.type(/\w+/) //'regexp'
  4. avalon.type(avalon.noop) //'function'

isWindow

判定是否为一个window对象

  1. avalon.isWindow('ddd')//false

isFunction

判定是否为一个函数

  1. avalon.isFunction(window.alert)//true

isObject

是否为一个对象, 返回布尔

  1. avalon.isObject({a:1,b:2})//true
  2. avalon.isObject(window.alert) //true
  3. avalon.isObject('aaa') //false

isPlainObject

判定是否为一个纯净的JS对象, 不能为window, 任何类(包括自定义类)的实例,元素节点,文本节点

用于内部的深克隆, VM的赋值, each方法

  1. avalon.isPlainObject({}) //trueavalon.isPlainObject(new Object) //trueavalon.isPlainObject(Object.create(null)) //truevar A = function(){}avalon.isPlainObject(new A) //false

DOM

bind

添加事件

  • 元素节点,window, document
  • 事件名
  • 回调
  • 是否捕获,可选
  1. avalon.bind(window, 'load',loadFn)

unbind

移除事件参数与bind方法相同

parseHTML

转换一段HTML字符串为一个文档对象

  1. avalon.parseHTML('<b>222</b><b>333</b>')

innerHTML

类似于element.innerHTML = newHTML ,但兼容性更好

  • node 元素节点
  • 要替换的HTML字符串
  1. var elem = document.getElementById('aaa')
  2. avalon.innerHTML(elem, '<b>222</b><b>333</b>')

clearHTML

用于清空元素的内部

  1. avalon.clearHTML(elem)

contains

判定A节点是否包含B节点

  • A 元素节点
  • B 元素节点
  1. avalon.contains(document.body, document.querySelector('a'))

String

hyphen

转换为连字符线风格

  1. avalon.hyphen('aaaAaa') //aaa-aaa

camelize

转换为驼峰风格

  1. avalon.hyphen('aaa-Bbb') //aaaBBB

rword

切割字符串为一个个小块，以空格或逗号分开它们，结合replace实现字符串的forEach

  1. "aaa,bbb,ccc".replace(avalon.rword, function(a){
  2.   console.log(a)//依次打出 aaa, bbb, ccc
  3.   return a
  4. })

Array&Object

range

用于生成整数数组

  • start 开始值,
  • end 结束值, 可以为负数
  • step 每隔多少个整数
  1. avalon.range(10)
  2. => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  3. avalon.range(1, 11)
  4. => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  5. avalon.range(0, 30, 5)
  6. => [0, 5, 10, 15, 20, 25]
  7. avalon.range(0, -10, -1)
  8. => [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]
  9. avalon.range(0)

each

用于遍历对象或类数组,数组

  1. avalon.each(arr, function(index, el){
  3. })

mix

用于合并多个对象或深克隆,类似于jQuery.extend

注意,不要加VM批量赋值时用它

  1. //合并多个对象,返回第一个参数
  2. target = avalon.mix(target, obj1, obj2, obj3)
  3. //深拷贝模式, 要求第一个参数为true, 返回第二个参数
  4. target = avalon.mix(true, target, obj1, obj2)

slice

用于转换类数组对象为纯数组对象

  • 目示对象
  • 开始索引, 默认为0
  • 结束索引, 默认为总长
  1. avalon.slice(document.body.childNodes)

oneObject

将一个以空格或逗号隔开的字符串或数组,转换成一个键值都为1的对象

  • 以空格或逗号隔开的字符串或数组, "aaa,bbb,ccc",['aaa','bbb','ccc']
  • 生成的对象的键值都是什么值,默认1
  1. avalon.oneObject("aaa,bbb,ccc")//{aaa:1,bbb:1,ccc:1}

Array.merge

合并两个数组 

  1. avalon.Array.merge(arr1,arr2)

Array.ensure

只有当前数组不存在此元素时只添加它

  1. avalon.Array.ensure([1,2,3],3)//[1,2,3]
  3. avalon.Array.ensure([1,2,3],8)//[1,2,3,8]

Array.removeAt

移除数组中指定位置的元素，返回布尔表示成功与否

  1. avalon.Array.removeAt([1,2,3],1)//[1,3]

Array.remove

移除数组中第一个匹配传参的那个元素，返回布尔表示成功与否

  1. avalon.Array.remove(['a','b','c'],'a')//['b','c']

实例成员

avalon

  • 可以传入元素节点,文档对象,window对象构成一个avalon实例
  1. var a = avalon(document.body)
  2. console.log(a[0]) //document.body
  3. console.log(a.element) // document.body

与jQuery对象不同的是,它只能传入一个元素或对象,而jQuery是可以传入CSS选符串获得一大堆元素节点,组成一个类数组对象avalon作为一个MVVM框架, 目的是实现最小化刷新, 通常没有操作一大堆节点的需求

avalon的实例方法主要供框架内部使用,除了自己写组件,所有操作的DOM的需求请使用ms-如果要使用第三方的jQuery插件,请务必将它们封装成*avalon的组件

API - 图1

css

用于获取或修改样式,自动修正厂商前缀及加px,与jQuery的css方法一样智能

  1. avalon(elem).css('float','left')

width

取得目标的宽,不带单位,如果目标为window,则取得窗口的宽,为document取得页面的宽

  1. avalon(elem).width()

height

取得目标的高,不带单位,如果目标为window,则取得窗口的高,为document取得页面的高

innerWidth

类似于jQuery的innerWidth

innerHeight

类似于jQuery的innerHeight

outerWidth

类似于jQuery的outerWidth

outerHeight

类似于jQuery的outerHeight

offset

取得元素的位置, 如 {top:111, left: 222}

attr

用于获取或修改属性

  1. avalon(elem).attr('title','aaa')

注意,这个方法内部只使用setAttribute及getAttribute方法,非常弱建议使用ms-attr指令实现相同的功能

addClass

添加多个类名, 以空格隔开

  1. avalon(elem).addClass('red aaa bbb')

removeClass

移除多个类名, 以空格隔开

  1. avalon(elem).removeClass('red aaa bbb')

hasClass

判定目标元素是否包含某个类名

toggleClass

切换多个类名

  • 类名,以空格隔开
  • 可选, 为布尔时强制添加或删除这些类名
  1. avalon(elem).toggleClass('aaa bbb ccc')

bind

类似于avalon.bind

  1. avalon(elem).bind('click', clickFn)

unbind

类似于avalon.unbind

被修复了的ecma262方法

  • String.prototype.trim
  • Function.prototype.bind
  • Array.isArrayavalon内部使用它判定是否数组
  • Object.keys
  • Array.prototype.sliceIE6-8下有BUG,这里做了修复
  • Array.prototype.indexOf
  • Array.prototype.lastIndexOf
  • Array.prototype.forEach
  • Array.prototype.map
  • Array.prototype.filter
  • Array.prototype.some
  • Array.prototype.every