迷你MVVM框架 avalonjs 學習教程七、數據緩存

時間 2019-11-19

標籤迷你 mvvm 框架 avalonjs 學習教程數據緩存简体版

原文原文鏈接

jQuery的許多功能均可以經過avalon的綁定屬性來處理，如click方法對應ms-click，css方法對應ms-css，toggle方法對應ms-visible，它的數據緩存功能avalon也搬過來了。但不一樣於jQuery的是，avalon是直接將數據保存到元素節點的HTML5的data-☆屬性上。在從data-☆屬性還原數據時，它會簡單的數據轉換，再返回給你。javascript

在ms-data綁定中，考慮到若是將對象轉換爲字符串再還原會丟失函數什麼的，所以它們會直接保存到元素之上。css

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js"></script>
        <script>
            avalon.define({
                $id: "test",
                $skipArray: ["array", "object"],
                number: 111,
                number2: NaN,
                bool: false,
                bool2: true,
                nn: null,
                vv: void 0,
                array: [1, 2, 3],
                date: new Date,
                object: {
                    name: "這是數據"
                },
                show: function() {
                    var elem = avalon(this)
                    console.log(
                            elem.data("number"), elem.data("number2"),
                            elem.data("bool"), elem.data("bool2"),
                            elem.data("null"), elem.data("void"),
                            elem.data("fn"), this["data-array"],
                            this["data-date"], this["data-object"]
                            )
                }
            })
        </script>
    </head>
    <body ms-controller="test">
        <div ms-data-number="number"
             ms-data-number2="number2"
             ms-data-bool="bool"
             ms-data-bool2="bool2"
             ms-data-void="vv"
             ms-data-null="nn"
             ms-data-array="array"
             ms-data-date="date"
             ms-data-object="object"
             ms-data-fn="show"
             ms-click="show"
             >點我</div>
    </body>
</html>

這是一個很簡單的綁定，沒什麼好說的，只要記住對象與數組是直接保存在元素節點上就好了。下面是它的源碼：html

"data": function(val, elem, data) {
    var key = "data-" + data.param
    if (val && typeof val === "object") {
        elem[key] = val
    } else {
        elem.setAttribute(key, String(val))
    }
},

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。