JavaScript组件开发完整示例


Posted in Javascript onDecember 15, 2015

本文实例讲述了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组件开发完整示例

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

Javascript 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
jQuery获取DOM节点实例分析(2种方式)
Dec 15 #Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 #Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 #Javascript
js简单网速测试方法完整实例
Dec 15 #Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 #Javascript
理解javascript闭包
Dec 15 #Javascript
jQuery检测滚动条是否到达底部
Dec 15 #Javascript
You might like
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
django中的setting最佳配置小结
2017/11/21 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python开发游戏的前期准备
2019/05/05 Python
python for和else语句趣谈
2019/07/02 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
期中考试后的感想
2015/08/07 职场文书
Python访问Redis的详细操作
2021/06/26 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis
Hive常用日期格式转换语法
2022/06/25 数据库