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>

最终效果如图：