API

    scan

    有两个参数

    • 元素节点

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

    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
    37.                 },
    38.                 switch2: function () {
    39.                     setTimeout(function () {
    40.                         vm.test.tpl = v456
    41.                     })
    43.                 }
    44.             });
    45.             vm.$watch('onReady', function(){
    46.                 avalon.log('vm1 onReady')
    47.             })
    48.             var vm2 = avalon.define({
    49.                 $id: 'test2',
    50.                 ddd: 'aaaa',
    51.                 alert: function(){
    52.                     avalon.log('????')
    53.                 }
    54.             });
    55.             vm2.$watch('onReady',function(){
    56.                 avalon.log('vm2 onReady')
    57.             })
    58.             var vm3 = avalon.define({
    59.                 $id: 'test3',
    60.                 ddd: 'bbbb',
    61.                 alert: function(){
    62.                     avalon.log('!!!!')
    63.                 }
    64.             });
    65.             vm3.$watch('onReady',function(){
    66.                 avalon.log('vm3 onReady')
    67.             })
    69.                 $id: 'test4',
    70.                 fff: 'rrrr',
    71.                 alert: function(){
    72.                     avalon.log('!!!!')
    73.                 }
    74.             });
    75.             vm4.$watch('onReady',function(){
    76.                 avalon.log('vm4 onReady')
    77.             })
    78.             avalon.component('ms-span', {
    79.                 template: "<span ms-click='@click'>{{@ddd}}</span>",
    80.                 defaults: {
    81.                     ddd:'3333',
    82.                     click: function(){
    83.                         avalon.log('inner...')
    84.                     }
    85.                 }
    86.             });
    88.         </script>
    89.     </head>
    90.     <body ms-controller="test">
    91.         <div ms-html="@tpl"></div>
    92.         <button ms-click="@switch1">aaaa</button>
    93.         <button ms-click="@switch2">bbbb</button>
    94.         <div ms-important="test4">
    95.             {{@fff}}
    96.         </div>
    98.     </body>
    99. </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.     diff: function (copy, src, name) {
    15.        /*
    17.        src 最初的虚拟DOM树的节点
    18.        name 要比较的指令名
    19.        */
    20.     },
    21.     update: function (node, vnode, parent) {
    22.         /*
    23.        node 当前的真实节点
    24.        vnode  此真实节点在虚拟树的相应位置对应的虚拟节点
    25.        parent node.parentNode
    26.        */
    27.     }
    28. })

    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

    判定是否为一个函数

    isObject

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

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

    isPlainObject

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

    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批量赋值时用它

    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

    用于获取或修改样式,自动修正厂商前缀及加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

    取得元素的位置, 如 {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

    切换多个类名

    • 类名,以空格隔开
    • 可选, 为布尔时强制添加或删除这些类名

    bind

    类似于avalon.bind

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

    类似于avalon.unbind

    • 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.every