属性操作是DOM操作很大的一块，它包括类名操作，表单元素的value属性操作，元素固有属性的管理，元素自定义属性的管理，某些元素的一些布尔属性的操作。大多数情况下，元素属性的值是字符串类型，我们称之为字符串属性，但有一些属性的是布尔，也存在是数字类型、节点引用的情况。当前jQuery处理它们就是搞了N个钩子对象，才摆平它们。avalon为了收拾它们也设置N多绑定，其中类名部分交由ms-class、 ms-hover、 ms-active处理，这些其他章节介绍；表单元素的value属性之前也说过，可以用ms-value、ms-duplex；剩下还有ms-checked、 ms-selected、 ms-readonly、 ms-disabled、 ms-enabled、 ms-value、 ms-title、 ms-alt、 ms-href、 ms-src、 ms-attr-☆ 11个。其他前五个为布尔属性绑定，后五个为字符串属性绑定，最后一个为通用属性绑定。不过 后来， 随着如何判定固有属性的技术的发掘，它们最终全部由ms-attr-☆实现。

在IE下，需要对属性进行区分，如果是固有属性使用elem[name] =
value赋值；是自定义属性，则直接使用elem.setAttribute(name,
value)；标准浏览器没有这么麻烦，全部使用elem.setAttribute(name,
value)，比如elem.setAttribute("value", "xxx")会自动同步到elee.value = "xxx"。

下面是其源码：

  1.  
  2.                 if (boolMap[attrName]) {
  3.                     var bool = boolMap[attrName]
  4.                     if (typeof elem[bool] === "boolean") {
  5.                         return elem[bool] = !!val //处理布尔属性
  6.                     }
  7.                 }
  8.                 if (!W3C && propMap[attrName]) {//旧式IE下需要进行名字映射
  9.                     attrName = propMap[attrName]
  10.                     var isInnate = true
  11.                 }
  12.                 if (val === false) || (val === null) || (val === void 0) {
  13.                     return elem.removeAttribute(attrName)
  14.                 }
  15.                 if (window.VBArray && !isInnate) {
  16.                     //IE下需要区分固有属性与自定义属性
  17.                     //固有属性及VML元素必须使用中括号方式赋值
  18.                     //SVG元素必须用setAttribute赋值
  19.                     if (isVML(elem)) {
  20.                         isInnate = true
  21.                     } else if(window.SVGElement && !(elem instanceof SVGElement)) {
  22.                         var attrs = elem.attributes || {}
  23.                         var attr = attrs[attrName]
  24.                         isInnate = attr ? attr.expando === false : attr === null
  25.                     }
  26.                 }
  27.                 if (isInnate) {
  28.                     elem[attrName] = val
  29.                 } else {
  30.                     elem.setAttribute(attrName, val)
  31.                 }

有关如何判定自定义属性或固有属性，及其详细推导过程，可以看我的书《javascript框架设计》的第十章。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>ms-attr-*</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width">
  7.         <script src="avalon.js"></script>
  8.  
  9.         <script>
  10.             avalon.define("ms-attr-*", function(vm) {
  11.                 vm.aaa = true
  12.                 vm.click = function() {
  13.                     vm.aaa = !vm.aaa
  14.                 }
  15.                 vm.bbb = "@@@"
  16.                 vm.ccc = "&&&"
  17.                 vm.active = "active"
  18.             })
  19.  
  20.         </script>
  21.         <style>
  22.             .active {
  23.                 background: goldenrod;
  24.             }
  25.             .readonly{
  26.                 border:1px solid blueviolet;
  27.             }
  28.         </style>
  29.  
  30.     </head>
  31.     <body>
  32.         <form method="get" action="aaa.html" ms-controller="ms-attr-*">
  33.             <input ms-enabled="aaa" name="a1" value="12345"/>
  34.             <input ms-disabled="aaa" name="a2" value="67890"/>
  35.             <input ms-readonly="aaa" name="a3" ms-class="readonly: aaa" value="readonly" />
  36.  
  37.             <input ms-checked="aaa" type="checkbox" value="checkbox" name="a4"/>
  38.             <select name="a5">
  39.                 <option>222</option>
  40.                 <option ms-selected="aaa">555</option>
  41.             </select>
  42.             <p>
  43.                 <input ms-attr-value="其他内容  {{ccc}}" name="a6" value="改"/>
  44.                 <input ms-attr-value="'其他内容 '+ccc" name="a7" value="改" />
  45.                 <input ms-value="其他内容  {{ccc}}" name="a8" value="改"/>
  46.             </p>
  47.             <button type="button" ms-click="click" ms-attr-class="active">
  48.                 点我
  49.             </button>
  50.             <input type="submit" value="提交" />
  51.             <svg width="100" height="100">
  52.             <circle ms-attr-cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  53.             </svg>
  54.         </form>
  55.     </body>
  56. </html>

ms-enabled是ms-disabled的相反面，它根据表达式的值是否为真移除disabled属性。

avalon的ms-attr绑定无比强大，不用像jQuery那么需要用户判定是使用attr还是prop方法，使用自行处理。

迷你MVVM框架 avalonjs 学习教程8、属性操作的更多相关文章

  1. 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制

    在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...

  2. 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

    avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...

  3. 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

    大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...

  4. 迷你MVVM框架 avalonjs 学习教程1、引入avalon

    avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...

  5. 迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信

    avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch.$unwatch.$fire三个方法,它们就是我们本节的主题. 词如其名,非常直白,一看就知道做什么 ...

  6. 迷你MVVM框架 avalonjs 学习教程20、路由系统

    SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...

  7. 迷你MVVM框架 avalonjs 学习教程11、循环操作

    avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...

  8. 迷你MVVM框架 avalonjs 学习教程4、数据填充

    MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...

  9. 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域

    一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...

随机推荐

  1. LocalStorage漏洞分析

    之前LocalStorage爆出过一个漏洞,使用Chrome打开这个网站:http://filldisk.com,会将磁盘空间给撑爆,而且Chrome还会Crash.除了FireFox之外,其他浏览器 ...

  2. protel 99se 加载库文件 files not recognised 解决办法-转

    WIN7操作系统下,protel99se添加元件库的操作方法(非修改ADVSch99SE方法) 最近更换了新电脑,操作系统是正版的WIN7,在用protel时发现元件库无法加载,很是郁闷,上网查找解决 ...

  3. UsernameToken 【转】

    原文:http://idior.cnblogs.com/articles/381534.html 使用用户名和密码来验证用户的身份是最普通也最常见的方法,虽然在安全性方面也比较弱,由于其运用的广泛性还 ...

  4. 【转】Bash Shell中命令行选项/参数处理

    原文网址:http://www.cnblogs.com/FrankTan/archive/2010/03/01/1634516.html 0.引言 写程序的时候经常要处理命令行参数,本文描述在Bash ...

  5. VirtualBox的vdi映像导入遇到的uuid冲突问题 (转)

      virtualbox导入vdi文件时出现下面的问题: 打开hard disk D:\software\GT5.0.0.vdi 失败 Cannot register the hard disk 'D ...

  6. LINQ to SQL 建立实体类 (转)

    http://www.cnblogs.com/DebugLZQ/archive/2012/11/14/2770449.html 使用LINQ to SQL时,需要首先建立用于映射数据库对象的模型,也就 ...

  7. 函数前修饰const与函数名后修饰const

    #include<iostream> #include<cstring> #include<cstdlib> #include<cstdio> #inc ...

  8. Qemu创建KVM虚拟机内存初始化流程

    转载请注明:[转载自博客xelatex KVM],并附本文链接.谢谢. [注]文章中采用的版本: Linux-3.11,https://www.kernel.org/pub/linux/kernel/ ...

  9. WinForm应用程序中实现自动更新功能

    WinForm应用程序中实现自动更新功能 编写人:左丘文 2015-4-20 近来在给一客户实施ECM系统,但他们使用功能并不是我们ECM制造版提供的标准功能,他们要求对系统作一些定制功能,为了避免因 ...

  10. HR-人力资源管理系统（Human Resources Management System，HRMS）

    人力资源管理系统(Human Resources Management System,HRMS),是指组织或社会团体运用系统学理论方法,对企业的人力资源管理方方面面进行分析.规划.实施.调整,提高企业 ...