迷你MVVM框架 avalonjs 学习教程8、属性操作

浏览数：49 / 时间：2015年06月09日

属性操作是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"。

下面是其源码：

       

                if (boolMap[attrName]) {
                    var bool = boolMap[attrName]
                    if (typeof elem[bool] === "boolean") {
                        return elem[bool] = !!val //处理布尔属性
                    }
                }
                if (!W3C && propMap[attrName]) {//旧式IE下需要进行名字映射
                    attrName = propMap[attrName]
                    var isInnate = true
                }
                if (val === false) || (val === null) || (val === void 0) {
                    return elem.removeAttribute(attrName)
                }
                if (window.VBArray && !isInnate) {
                    //IE下需要区分固有属性与自定义属性
                    //固有属性及VML元素必须使用中括号方式赋值
                    //SVG元素必须用setAttribute赋值
                    if (isVML(elem)) {
                        isInnate = true
                    } else if(window.SVGElement && !(elem instanceof SVGElement)) {
                        var attrs = elem.attributes || {}
                        var attr = attrs[attrName]
                        isInnate = attr ? attr.expando === false : attr === null
                    }
                }
                if (isInnate) {
                    elem[attrName] = val
                } else {
                    elem.setAttribute(attrName, val)
                }

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

<!DOCTYPE html>
<html>
    <head>
        <title>ms-attr-*</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>

        <script>
            avalon.define("ms-attr-*", function(vm) {
                vm.aaa = true
                vm.click = function() {
                    vm.aaa = !vm.aaa
                }
                vm.bbb = "@@@"
                vm.ccc = "&&&"
                vm.active = "active"
            })

        </script>
        <style>
            .active {
                background: goldenrod;
            }
            .readonly{
                border:1px solid blueviolet;
            }
        </style>

    </head>
    <body>
        <form method="get" action="aaa.html" ms-controller="ms-attr-*">
            <input ms-enabled="aaa" name="a1" value="12345"/>
            <input ms-disabled="aaa" name="a2" value="67890"/>
            <input ms-readonly="aaa" name="a3" ms-class="readonly: aaa" value="readonly" />

            <input ms-checked="aaa" type="checkbox" value="checkbox" name="a4"/>
            <select name="a5">
                <option>222</option>
                <option ms-selected="aaa">555</option>
            </select>
            <p>
                <input ms-attr-value="其他内容  {{ccc}}" name="a6" value="改"/>
                <input ms-attr-value="‘其他内容 ‘+ccc" name="a7" value="改" />
                <input ms-value="其他内容  {{ccc}}" name="a8" value="改"/>
            </p>
            <button type="button" ms-click="click" ms-attr-class="active">
                点我
            </button>
            <input type="submit" value="提交" />
            <svg width="100" height="100">
            <circle ms-attr-cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
            </svg>
        </form>
    </body>
</html>

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

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

迷你MVVM框架 avalonjs 学习教程8、属性操作