• avalonjs 0.5发布,迷你简单易用的MVVM框架


    为了方便编写控件,本次升级就是整合了一个迷你的三百行的迷你jQuery进去。主要更新如下:

    • 添加强大的UI绑定与自定扫描功能,让你一行JS也不用写生成UI。UI绑定的格式为ms-ui-opts?=uiName。 opts为VM中的对象名,uiName为控件名,UI会自动寻找data-id的值作为ViewModel的ID,然后你就可以在avalon.models[id]得到它。UI控件会优先使用data-*的值来作为UI的配置项,设计基本同bootstrap。
    • ms-controller绑定,功能同angular的ng-controller,指定某个区域由某个ViewModel负责,没有找就定义在它上方的ViewModel。可以参见该文。
    • ms-important绑定,指定某个区域只由某个ViewModel负责,没有就停止扫描。
    • ms-options功能大幅增强。
    • 迷你版jQuery。

    现在应某些人的要求,列举一下API


    静态方法与属性

    • mix(a,b), 相当于jQuery.extend
    • models, 用于放置生成的ViewModel
    • log(s), 打印日志
    • error(s),抛出异常
    • ui, 用于放置组件
    • ready(fn), domReady,将回调延迟到DOM树后才执行
    • oneObject(str|array, val?), 如果传入一个字符串则将它以逗号转换为一个字符串数组,否则一定要传字符串数组,第二个参数可选,为生成的对象的值。此方法是用于生成一个键名不一样,但键值都一样的对象。如{a:1,b:1,c:1,d:1}
    • type(obj), 返回传参的数据类型,值可能为Array, Date, Object, JSON, Number,String, Null, Undefined
    • range(start, end, step),生成一个整数数组,功能与underscorejs或python的同名函数一致。
    • bind(el, type, fn, phase),绑定事件,返回一个回调给你行卸载
    • unbind(el, type, fn, phase),卸载事件
    • forEach,功能同jQuery.each, 都是索引值或键名在前,值或元素在后
    • define(id?, deps?, factory),定义一个ViewModel
    • scan(element?, ViewModel?),开始扫描DOM树,抽取绑定。

    迷你jQuery对象

    要求传入一个元素节点或文档对象或window,你可以通过$().element, $()[0]再次访问到你传入的东西。它有以下原型方法。

    • hasClass(cls),判定有没有此类名
    • addClass(cls),只有元素不存在时才添加此类名
    • remvoeClass(cls),移除类名
    • toggleClass(cls, state?),切换类名,如果第2个参数为布名,则根据它强行添加或删除类名
    • attr(name,value?), 读写特性(此方法非常弱,直接使用setAttribute, getAttribute实现,没有做任何兼容性处理)
    • data(name, value?), 读写数据,使用HTML5的data-*特性实现。它会parse一下,让数据更为实现,思路同jQuery。
    • removeData(name), 移除数据
    • css(name,value?),读写样式,这个兼容性做得很好,因为长达一百行,连HTML5的私有前缀都能你补上。
    • width(val?), 读写宽度,注意对隐藏元素没有处理。
    • height(val?), 读写高度,注意对隐藏元素没有处理。
    • bind(type, fn, phase),绑定事件,这个没有做链式操作,目的是为了返回回调给你卸载。
    • unbind(type,fn, phase),卸载事件。
    • val,读取表单元素的value值,功能同jQuery。
    • offset,取得元素在文档中的坐标,功能只实现了jQuery的一半,只能读不能写。

    各种绑定

    • ms-html="str", 添加HTML
    • ms-class-xxx="boolean", 切换类名
    • ms-hover="className", 移上去时添加这类名,移出去掉。
    • ms-visible="boolean", 操作元素的style.display实现显示隐藏
    • ms-if="boolean", 决定是将此元素放出到DOM树还是移出
    • ms-each-el?="array", el用于下面的引用,不写默认为$data。在它的作用范围,你还可以访问$index得到其索引值,$first判定是否第一个元素,$last是否最后一个,$remove为一个方法,你执行它就会从数组中删除它,并将它作用的那一片元素都移出DOM树。
    • ms-model="property",只能用于表单元素,与ViewModel中的某些字段双向绑定,它会偷偷绑定一些事件进行同步。情况与angular的ng-model相同。
    • ms-controller="ViewModelName",指定一个ViewModel的作用范围
    • ms-important="ViewModelName",指定这个区域只能由这个ViewModel来渲染
    • ms-skip,不对此元素及后代进行扫描绑定,保证原样输出。
    • ms-on-type="callback",绑定一个事件,type为事件名,如ms-on-click="tick"。
    • ms-click="callback",ms-keypress="callback",ms-keydown="callback", ms-keyup="callback",ms-mousedown="callback"……等常用事件都做了一个快捷方式。
    • ms-disabled,ms-readyonly,ms-selected,ms-checked等布尔属性,根据属性值的情况决定添加与移除
    • ms-enabled="boolean",与ms-disabled相反。
    • {{ expr }}, 插值表达式,与angular相同,可以使用“|filter(args1, args2)”的形式添加多个过滤器。
    • ms-ui-opts?="name",生成一个UI控件。opts为ViewModel中的一个对象属性,name为控件名。

    ViewModel

    • 与angular的要求一致,$开头的为框架所保留,由于在IE6-8中然后VBS实现,无法区分大小写,不要同一个ViewModel定义两个近似的方法名。
    • $id为ViewModle的名字
    • $events为一个对象,用于保存$watch方法的回调
    • $watch(prop, callback),ViewModel只能通知它的视图进行更新,不能通知他在ViewModel的其他属性,对于监控属性,我们可能通过这方法实现兄弟间的通信。
    • $watch(prop,callback?),停止通知
    • 以$开头的属性,框架都不会将它转换为监控属性
    • 放在$skipArray中的属性名,也不会转换为监控属性
    • 一个包含get与set的对象被认为是一个计算属性。
    • 数组会转换为监控数组,只监控长短与排序引发的变化。

    大家可以到这里下载它或观看例子

    新增的两个控件都是从jQuery插件改过来,一个由250行改到130行,一个由800行改到200行,MVVM的威力突显!


    注意,v5中要求必须指定ms-controller或ms-important!

    机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
  • 相关阅读:
    ibatis核心内容概述
    ibatis selectKey
    setTimeout ;setInterval
    <select>设置multiple="multiple"属性后 下拉框全部展开了 不再是折叠的怎么回事
    $.ajax()实例
    html页面不显示中文
    sublime卡顿
    error_reporting
    js笔记
    怎样查看MYSQL数据库的端口号
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3053469.html
Copyright © 2020-2023  润新知