ミニMVVMフレームワークavalonjs学習チュートリアル8、属性操作

5670 ワード

属性操作は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個.その他の最初の5つはブール属性バインド、後の5つは文字列属性バインド、最後の5つは汎用属性バインドです.しかしその後,固有属性をどのように判定するかの技術の発掘に伴い,それらは最終的にms−attr−☆によって実現された.
IEでは,固有属性であればelem[name]=valueを用いて属性を区別する必要がある.カスタム属性であるelemを直接使用する.setAttribute(name, value);標準ブラウザはそんなに面倒ではありません.すべてelemを使用します.例えば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フレームワークデザイン』の第10章を参照してください.
<!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を使用するかを判定する必要はなく、自己処理を使用します.