JavaScript组件开发完整示例

更新时间：2015年12月15日 14:48:16 作者：hongweigg

这篇文章主要介绍了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程序设计有所帮助。

您可能感兴趣的文章:

微信小程序实现滚动消息通知
这篇文章主要为大家详细介绍了微信小程序实现滚动消息通知，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-02-02
layui结合form,table的全选、反选v1.0示例讲解
今天小编就为大家分享一篇layui结合form,table的全选、反选v1.0示例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
CKEditor扩展插件：自动排版功能autoformat插件实现方法详解
这篇文章主要介绍了CKEditor扩展插件：自动排版功能autoformat插件实现方法,结合实例形式详细分析了CKEditor扩展插件实现自动排版功能的autoformat插件具体定义、配置与使用技巧,需要的朋友可以参考下
2020-02-02
在线所见即所得HTML编辑器的实现原理浅析
这篇文章主要介绍了在线所见即所得HTML编辑器的实现原理浅析,本文用初始化、打开编辑功能、获取编辑器的内容、增加样式设置、再进一步等步骤阐述在线编辑器的基本实现原理,需要的朋友可以参考下
2015-04-04
如何基于JavaScript判断图片是否加载完成
这篇文章主要介绍了如何基于JavaScript判断图片是否加载完成,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
Html中 IFrame的用法及注意点
这篇文章主要介绍了Html IFrame的用法及注意点,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-12-12
动态的绑定事件addEventListener方法的使用
本文为大家介绍下动态的绑定事件的方法addEventListener的使用示例，不了解的朋友可以参考下
2014-01-01
解决微信小程序防止无法回到主页的问题
这篇文章主要介绍了解决微信小程序防止无法回到主页的问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
JavaScript实现字符串转JSON对象的4种方法代码
这篇文章主要给大家介绍了关于JavaScript实现字符串转JSON对象的4种方法,使用ajax的开发项目过程中,经常需要将json格式的字符串返回到前端,前端解析成js对象(JSON),需要的朋友可以参考下
2023-10-10
echarts图表设置宽度100%结果为100px的解决办法
在开发一个前端项目时需要用到Element-ui的el-tabs组件和Echart开源库,当两者嵌套使用时,我给Echart中的图表宽度设置为了100%,但是实际的宽度却只有100px,这篇文章主要给大家介绍了关于echarts图表设置宽度100%结果为100px的解决办法,需要的朋友可以参考下
2022-12-12