本文展示了JavaScript组件开发的技巧。分享给大家参考，如下：

使用JavaScript按照面向对象的思想构建组件。

以构建TAB组件为例。

在功能上，该组件包括一个可视部分和一个逻辑控制部分。在代码结构方面，组件包括代码部分和资源部分(样式、图片等)。).

组件的特点：高内聚、低耦合(不与其他代码逻辑交叉，而是继承和包容)；封装(隐藏私有方法和变量)；可重用性(可以重复使用来组装更复杂的应用程序)。

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312'titleJS组件/titlestyle .制表符控制{位置：绝对；}.TabControl .tab-head { height :22 px；宽度：100%;/*边框-左侧：实心0px # e0e0e 0；右边框：实心0px # e0e0e 0；边框-顶部：实心0px # e0e 0；边框-底部：实心1px # e0e0e 0；*/位置：绝对；z索引：9;}.tab控制ul {位置：绝对；top :2 xpadding :0 pxmargin :0 pxz索引：10;}.选项卡控件李{列表样式：无；/* 将默认的列表符号去掉*/padding-left :10 px；填充-右：10 pxmargin :0 float : leftborder : solid 1px # e0e 0背景-color : # ffffff；高度：20 pxcursor:default}。tab控制李。所选{边框-底部：实心1px # ffffff边框-top:实心1px # ff0000z索引：10;}.tab控制李。取消选择{边框-底部：实心1px # e0e 0e 0；边框-顶部：实心1px # e0e0e 0；z索引：10;}.TabControl .页面选中{位置：绝对；显示：块；border:实心1px # e0e0e0宽度：100%;高度：100%;z索引：1;top:23px}。TabControl .页面取消选择{ display : none border 3360 solid 1px # e0e0e 0宽度：100%;高度：100%;z索引：1;top :23 px }/style/head dyscript lang=' JavaScript ' var TabControl=function(宽度、高度){ var me=this//TAB控件容器，头，列表var cbody，tabHead，ul；//最后选中的拉环页var lastSelectedPage=0；//TAB页管理容器var pages=[]；/** * 初始化函数* param{tabCount}，创建标签页的个数*/我。init=function(Tabcount){//创建拉环容器CBO dy=文档。创建元素(' DIV ')；CBO死了。类名=' TabCONtrolCBO死了。风格。width=width | | ' 400 pxCBO死了。风格。height=height | | ' 300 px//创建拉环控件头tab head=文档。创建元素(' DIV ')；标签头。类名=' tab-head '；CBO死了。append child(TabHead)；//创建拉环头ul=文档。创建元素(“UL”)；标签头。阑尾切除术；//根据参数初始化拉环页，缺省创建2个拉环页var TC=Tabcount | | 2；for(var I=0；国贸中心；i ){ me.insertPage(i，' tabPage' i) } //缺省选中第一页我。选择页面(0)；} /** * 插入拉环页* param{idx}，插入位置*参数{标题},选项卡页标题* */me.insertPage=function(idx，title){ if(ParSeint(idx)=0){ var LI=document。创建元素(“LI”)；' li.className='未选择；li.innerText=titlevar CHD=ul。子节点[idx]；ul。在(李)之前插入；李。onclick=function(){ me。selectpage(GetSelectedindex(Li))；} //创建page var page=文档。创建元素(' DIV ')；佩奇。类名=' page unselectpages.push(页面);cbody.appendChild(第页);} } /* * 内部函数* 根据选中的对象，获取对应的拉环页索引*/function GetSelectedindex(Li){ var CHD=ul。子节点；for(var I=0；ichd。长度；I){ if(CHD[I]==李){ return I；} } } /** * 选中某页* param{idx}，选中页的索引*/我。select page=function(idx){ if(ParSeint(idx)=0){ var lis=ul。子节点；alert(lastSelectedPage '，' idx)；列表[最后选择的页面]。' className='未选中；lis[idx].选定的/表示(var I=0；长度；i ){ if(i==idx){ lis[i].已选择} else{ alert('B:' i '，' lis[idx]).innerText)；lis[i].' className='未选中；} }*///隐藏无需显示的拉环页，显示选中的拉环页页面[最后选择的页面]。类名=' page unselect页面[idx].class name=' page selectedlastsselectedpage=idx } }//在函数尾部调用初始化函数执行初始化我。init()；//最后返回数字正射影像图对象返回CBO dy } var TAbCONtrol=new TAbCONtrol()；文件。尸体。appendchild(选项卡控件)；/脚本/正文/html最终效果如图：

希望本文所述对大家Java脚本语言程序设计有所帮助。