前言
成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),原州企業(yè)網(wǎng)站建設(shè),原州品牌網(wǎng)站建設(shè),網(wǎng)站定制,原州網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,原州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
在開發(fā)中經(jīng)常會在DOM上存儲一些自定義數(shù)據(jù),我們可以通過setAttribute方法來實(shí)現(xiàn)。但是當(dāng)數(shù)據(jù)為引用類型時(shí),存儲后的數(shù)據(jù)卻無效。這里將用原生的JS對data方法進(jìn)行實(shí)現(xiàn)。
使用setAttribute:
<div id="test-data"></div> <p class="test-data-list"></p> <p class="test-data-list"></p> <p class="test-data-list"></p> <p class="test-data-list"></p>
var testData = document.querySeletor('#test-data'); testData.setAttribute('baukh', {a:1,b:2})// 執(zhí)行后DOM節(jié)點(diǎn)變化為<div baukh="[object Object]"></div> testData.getAttribute('baukh'); // => "[object Object]"
可以從上面的代碼中看出,存進(jìn)去的是個(gè)Object,取出來的是Object.toString()
所產(chǎn)出的字符串。
分析
在JS經(jīng)典類庫-jQuery中存在data方法是通過jQuery.cache的方式進(jìn)行數(shù)據(jù)存儲,那么還有沒有其它方法可以實(shí)現(xiàn)?
由于使用場景不同,我想實(shí)現(xiàn)的方式是將數(shù)據(jù)直接存儲到DOM節(jié)點(diǎn)上,以達(dá)到使用時(shí)更方便簡捷的目的。
那如何存儲? 變量testData存儲的是通過document.querySeletor('#test-data')
獲取到的Element,而Element是Object的一個(gè)實(shí)例。通過[testData instanceof Object]
可以進(jìn)行驗(yàn)證。
那么一切都簡易了,即然是Object類型,那么就可以隨意的增刪自定義屬性。
通過在Element的原型上增加data方法來實(shí)現(xiàn)DOM擴(kuò)展
Element.prototype.data = function(key, value){ var _this = this, _dataName = 'testData', // 存儲至DOM上的對象標(biāo)記, 這里只是測試用名 _data = {}; // 未指定參數(shù),返回全部 if(typeof key === 'undefined' && typeof value === 'undefined'){ return _this[_dataName]; } // setter if(typeof(value) !== 'undefined'){ // 存儲值類型為字符或數(shù)字時(shí), 使用attr執(zhí)行 var _type = typeof(value); if(_type === 'string' || _type === 'number'){ _this.setAttribute(key, value); } _data = _this[_dataName] || {}; _data[key] = value; _this[_dataName] = _data; return this; } // getter else{ _data = _this[_dataName] || {}; return _data[key] || _this.getAttribute(key); } };
這里來試一下:
var testData = document.querySelector('#test-data'); // 字符串類型測試 testData.data('name', 'baukh'); console.log(testData.data('name')); // => 'baukh' // 對象類型測試 testData.data('info', {'name': 'baukh', 'age': 27}); console.log(testData.data('info')); // => Object {name: "baukh", age: 27}
解決NodeList存儲
現(xiàn)在還有一個(gè)問題, 通過Element.prototype
綁定的方法只支持Element類生效,而對NodeList類并無效果.
可以通過下面這些代碼進(jìn)行效果測試:
var testDataList = document.querySelectorAll('.test-data-list'); // 獲取的為NodeList 而非 Element testDataList.data('name', 'baukh'); // Uncaught TypeError: testDataList.data is not a function
這肯定不是想要的結(jié)果, 那么NodeList類就需要如下處理:
NodeList.prototype.data = function (key, value) { // setter if(typeof(value) !== 'undefined'){ [].forEach.call(this, function (element, index) { element.data(key, value); }); return this; } // getter else{ return this[0].data(key, value); // getter 將返回第一個(gè) } };
來測試下NodeList類的data實(shí)現(xiàn):
var testDataList = document.querySelectorAll('.test-data-list'); // 獲取的為NodeList 而非 Element testDataList.data('name', 'baukh'); // Uncaught TypeError: testDataList.data is not a function // 字符串類型測試 testDataList.data('name', 'baukh'); console.log(testDataList.data('name')); // => 'baukh' // 對象類型測試 testDataList.data('info', {'name': 'baukh', 'age': 27}); console.log(testDataList.data('info')); // => Object {name: "baukh", age: 27}
這樣就功能上就完成了.
當(dāng)然也可以將NodeList與Element進(jìn)行互換, 具體情況具體考慮.
很簡單不是嗎?
順帶說一下,Array類型的數(shù)據(jù),也可以增加自定義屬性。
var ar = [1,2,3]; console.log(ar instanceof Object); //true 能添加自定義屬性的原因就在這里,Array也是Object的實(shí)例。 ar.test1 = {a:1,b:2}; console.log(ar); //[1, 2, 3, test1: Object] console.log(ar.test1); //Object {a: 1, b: 2}
隨筆一行
這是前端最好的時(shí)代, 這也是前端最壞的時(shí)代。 眾多前端框架滿天飛,隨著 jQuery 在前端行業(yè)的慢慢弱化,總是會有一種斯人遠(yuǎn)去,何者慰籍的感覺。互勉吧,各位。
另推薦個(gè)表格組件gridManager
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對創(chuàng)新互聯(lián)的支持。
文章標(biāo)題:利用原生JS實(shí)現(xiàn)data方法示例代碼
本文路徑:http://bm7419.com/article26/gosjjg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、面包屑導(dǎo)航、企業(yè)建站、定制開發(fā)、微信小程序、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)