JavaScript組件開發完整示例

2019-11-20 11:00:42

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JavaScript組件開發的技巧。分享給大家供大家參考，具體如下：

使用JavaScript，按照面向對象的思想來構建組件。

現以構建一個TAB組件為例。

從功能上講，組件包括可視部分和邏輯控制部分；從代碼結構上講，組件包括代碼部分和資源部分（樣式、圖片等）。

組件的特點：高內聚，低耦合（不與其他代碼邏輯交叉，可以繼承，包含）；封裝性（隱藏私有方法和變量）；可重用性（可反復多次使用，用來組裝更復雜的應用）。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JS 組件</title><style>.TabControl{ position:absolute;}.TabControl .tab-head{ height:22px;width:100%;/* border-left: solid 0px #e0e0e0;border-right: solid 0px #e0e0e0;border-top: solid 0px #e0e0e0;border-bottom: solid 1px #e0e0e0; */ position:absolute; z-index:9;}.TabControl ul{ position:absolute; top:2px; padding:0px; margin:0px; z-index:10;}.TabControl li{ list-style:none; /* 將默認的列表符號去掉 */ padding-left:10px; padding-right:10px; margin:0;  float:left; border: solid 1px #e0e0e0; background-color:#ffffff; height:20px; cursor:default;}.TabControl li.selected{ border-bottom: solid 1px #ffffff;border-top: solid 1px #ff0000; z-index:10;}.TabControl li.unselected{ border-bottom: solid 1px #e0e0e0;border-top: solid 1px #e0e0e0; z-index:10;}.TabControl .pageSelected{ position:absolute; display:block; border: solid 1px #e0e0e0;  width:100%;height:100%; z-index:1; top:23px;}.TabControl .pageUnSelected{ display:none; border: solid 1px #e0e0e0;  width:100%;height:100%; z-index:1; top:23px;}</style></head><body><script lang="javascript"> var TabControl = function(width, height){  var me = this;  //TAB控件容器，頭，列表  var cbody,tabHead, ul;  //最后選中的TAB頁  var lastSelectedPage = 0;  //TAB頁管理容器  var pages = [];  /**   * 初始化函數   * param{tabCount}, 創建tab頁的個數   */  me.init = function(tabCount){   //創建TAB容器   cbody = document.createElement("DIV");   cbody.className = "TabControl";   cbody.style.width = width || "400px";   cbody.style.height = height || "300px";   //創建TAB控件頭   tabHead= document.createElement("DIV");   tabHead.className = "tab-head";   cbody.appendChild(tabHead);   //創建TAB頭   ul = document.createElement("UL");   tabHead.appendChild(ul);   //根據參數初始化TAB頁，缺省創建2個TAB頁   var tc = tabCount || 2;   for(var i=0;i<tc;i++){    me.insertPage(i,"tabPage" + i)    }   //缺省選中第一頁   me.selectPage(0);   }  /**   * 插入TAB頁   * param{idx},插入位置   * param{title},TAB頁標題   *   */  me.insertPage = function(idx,title){   if(parseInt(idx)>=0){     var li = document.createElement("LI");     li.className = "unselected";     li.innerText = title;     var chd = ul.childNodes[idx];     ul.insertBefore(li);     li.onclick = function(){      me.selectPage(getSelectedIndex(li));     }     //創建page     var page = document.createElement("DIV");     page.className = "pageUnSelected";     pages.push(page);     cbody.appendChild(page);    }  }  /*   * 內部函數   * 根據選中的對象，獲取對應的TAB頁索引   */  function getSelectedIndex(li){   var chd = ul.childNodes;   for(var i=0;i<chd.length;i++){    if(chd[i] == li){     return i;    }   }  }  /**   * 選中某頁   * param{idx},選中頁的索引   */  me.selectPage = function(idx){   if(parseInt(idx)>=0){    var lis = ul.childNodes;    alert(lastSelectedPage + ',' + idx);    lis[lastSelectedPage].className = "unselected";    lis[idx].className = "selected";/*    for(var i=0;i<lis.length;i++){     if( i== idx){      lis[i].className = "selected";     } else{      alert('B:'+ i + ',' + lis[idx].innerText);      lis[i].className = "unselected";     }    }*/    //隱藏無需顯示的TAB頁，顯示選中的TAB頁    pages[lastSelectedPage].className = "pageUnSelected";    pages[idx].className = "pageSelected";    lastSelectedPage = idx;   }  }  //在函數尾部調用初始化函數執行初始化  me.init();  //最后返回DOM對象  return cbody; } var tabControl = new TabControl(); document.body.appendChild(tabControl);</script></body></html>

最終效果如圖：