數據緩存(ms-data-*)

jQuery的許多功能都可以通過avalon的綁定屬性來處理，如click方法對應ms-click，

css方法對應ms-css，toggle方法對應ms-visible，它的數據緩存功能avalon也搬過來了。

但不同于jQuery的是，avalon是直接將數據保存到元素節點的HTML5的data-*屬性上。

在從data-*屬性還原數據時，它會簡單的數據轉換，再返回給你。

在ms-data綁定中，考慮到如果將對象轉換為字符串再還原會丟失函數什么的，因此它們會直接保存到元素之上。

TODO supply a title

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"]

)

}

})

點我

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

//1.3.8的源碼

// bindingHandlers.data 定義在if.js

bindingExecutors.data = function(val, elem, data) {

var key = "data-" + data.param

if (val && typeof val === "object") {

elem[key] = val

} else {

elem.setAttribute(key, String(val))

}

}

總結

以上是生活随笔為你收集整理的html引入avalon,avalon中文文档的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。