``` function Li(options) { function TabLiContent(options) { this._init(options); } TabLiContent.prototype = { // 數據初始化 _init : function(options) { this.tabIndex = options.tabIndex || 0; this.liNum = options.liNum || 0; this.container = options.container || null; this.index = options.index || 0; return this; }, // 數據校驗 _checkData : function() { if (this.container == null) { throw new Error('have not container'); } return this; }, // 隨機填充container _makeLi : function() { this._checkData(); var str = ''; str += '<li data-index='+this.index+' data-tab='+this.tabIndex+' class="li_con">' str += '<span data-index='+this.index+' data-tab='+this.tabIndex+' class="li_word">這是第' + this.tabIndex + 'tab欄的第' + this.liNum + '個li</span>' str += '<span class="list_ok" data-index='+this.index+' data-tab='+this.tabIndex+'>刪除</span>' str += '</li>'; return str; }, // 獲取當前對象的數據 _getObjSData:function(dom){ return dom.dataset; }, // 點擊跳轉詳情 _openDetail: function(data) { var that = this; var data = that._getObjSData(data); console.log(data); alert('即將打開' +data.index+'商品詳情的頁面 '+data.tab+''); }, // 刪除 _delListOne:function(data) { var that = this; var data = that._getObjSData(data); console.log(data); alert('即將刪除此商品' +data.index+'') }, // 事件綁定[所有的點擊事件通過事件委托方式綁定] _bindEvent : function(options) { var con = this.container; var that = this; con.onclick = function(ev) { var ev = ev || window.event; 　　 　　 var target = ev.target || ev.srcElement; switch(target.className){ case 'li_con': // 進入詳情 that._openDetail(target); break; case 'list_ok': // 刪除 that._delListOne(target); break; case 'li_word': // 進入詳情 that._openDetail(target); break; } } }, main : function() { try { this._checkData(); this.container.innerHTML += this._makeLi(); } catch(e) { console.log(e); } } } return function(options) { var tabLiContent = new TabLiContent(options); tabLiContent.main(); tabLiContent._bindEvent(options); return tabLiContent; }(options); } ``` ``` var dom = document.querySelector('#listOne'); var dom1 = document.querySelector('#listTwo'); var dom2 = document.querySelector('#listThree') var json = [{ tabIndex : 0, liNum : 1, container : dom, index : 0 }, { tabIndex : 0, liNum : 2, container : dom, index : 1 }, { tabIndex : 0, liNum : 3, container : dom, index : 2 }, { tabIndex : 0, liNum : 4, container : dom, index : 3 }]; var json1 = [{ tabIndex : 1, liNum : 1, container : dom1, index : 0 }, { tabIndex : 1, liNum : 2, container : dom1, index : 1 }, { tabIndex : 1, liNum : 3, container : dom1, index : 2 }]; var json2 = [{ tabIndex : 2, liNum : 1, container : dom2, index : 0 }, { tabIndex : 2, liNum : 2, container : dom2, index : 1 }, { tabIndex : 2, liNum : 3, container : dom2, index : 2 }]; json.forEach(function(item) { Li(item); }) json1.forEach(function(item) { Li(item); }) json2.forEach(function(item){ Li(item); }) ```