日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

學(xué)做jQuery中的data()函數(shù)...

 posondlq 2011-06-23

看到這個(gè)內(nèi)容的時(shí)候,很吃驚,其實(shí)我在以前看到過一個(gè)R開頭的網(wǎng)站時(shí)(記不清了,實(shí)在記不清了),他用JS做了一個(gè)cache函數(shù),對(duì)函數(shù)做了緩存。還用了斐伯拉切函數(shù)做了測(cè)試。后來我根據(jù)他寫的代碼用jQuery寫了一個(gè)類似的插件(它是把方法注冊(cè)到了window對(duì)象里,所以加快了一些速度)。后來感覺這樣的方法也同樣可以用在數(shù)據(jù)上,又根據(jù)這樣的想法寫了一個(gè)存儲(chǔ)數(shù)據(jù)的cache函數(shù)。也分別用在了兩個(gè)不同的項(xiàng)目里。

如今又看到有人寫這樣類似的東西,就把他貼上來進(jìn)行分享。

文章的內(nèi)容來自:

原文如下:http://www./article.asp?id=1295

在jQuery中可以使用data()來給元素存儲(chǔ)臨時(shí)的變量:
// jQuery:
    // Set data:
    $(elem).data('customProperty', 12345);
    // Get data:
    $(elem).data('customProperty');

在mootools中可以使用store()來給元素存儲(chǔ)臨時(shí)的變量:
// MooTools:
    // Set data:
    elem.store('customProperty', 12345);
    // Get data:
    elem.retrieve('customProperty');


下面我們用JavaScript 自己動(dòng)手寫一個(gè):
(function(){

    var cache = [0],
          expando = 'data' + +new Date();

    function data(elem) {

        var cacheIndex = elem[expando],
            nextCacheIndex = cache.length;

        if(!cacheIndex) {
            cacheIndex = elem[expando] = nextCacheIndex;
            cache[cacheIndex] = {};
        }

        return cache[cacheIndex];

    }

    window.data = data;

})();

使用:
var myElem = document.getElementById('id');
// 設(shè)置data:
data(myElem).customProperty = 12345;
// 獲取 data:
data(myElem).customProperty; // returns 12345

//  用其他的變量
data(myElem).info = {
    a : 123,
    b : [4,5,6]
};


這個(gè)腳本其實(shí)很簡(jiǎn)單,就是往cache 數(shù)組里添加 下標(biāo) 元素。
默認(rèn)cache=[0] ,當(dāng) elem[expando] 沒有獲取到時(shí),則往數(shù)組里 添加一個(gè)下標(biāo),同時(shí)下標(biāo)又與數(shù)組是關(guān)聯(lián)起來的。
如果elem[expando]獲取到時(shí),則直接返回  cache[cacheIndex] 。


這點(diǎn)搞定后,那就簡(jiǎn)單了,就是往一個(gè)空對(duì)象中 配置 屬性了。



進(jìn)一步修改函數(shù):
// WITH ENCAPSULATION:
(function(){

    var cache = [0],
        expando = 'data' + +new Date();

    function data(elem) {

        var cacheIndex = elem[expando],
            nextCacheIndex = cache.length;

        if(!cacheIndex) {
            cacheIndex = elem[expando] = nextCacheIndex;
            cache[cacheIndex] = {};
        }

        return {
            get : function(key) {
                return cache[cacheIndex][key];
            },
            set : function(key, val) {
                cache[cacheIndex][key] = val;
                return val;
            }
        }

    }

    window.data = data;

})();

用法:
var myElem = document.getElementById('id');

// 設(shè)置data:
data(myElem).set('customProperty', 12345);

// 獲取data:
data(myElem).get('customProperty'); // returns 12345


ok,一個(gè)類似jQuery的data()函數(shù)就完成了。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多