JavaScript组件开发完整示例

本文实例讲述了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>

最终效果如图：

希望本文所述对大家JavaScript程序设计有所帮助。