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程序设计有所帮助。
相关文章
拖动滑块验证功能在支付宝，微信各大平台都能见到这样的功能，那么基于js组件是如何实现此功能的呢？今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,需要的朋友参考下吧2016-11-11
这篇文章主要为大家详细介绍了JavaScript function函数种类，包括普通函数、匿名函数、闭包函数，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了微信小程序定义和调用全局变量globalData的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
js getBoundingClientRect使用方法详解
这篇文章主要介绍了js getBoundingClientRect使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
地图是我们平时经常用到的组件,而且地图是显示在最高层的原生组件,下面这篇文章主要给大家介绍了关于微信小程序地图标记多个位置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
当我们请求好第一页数据后,将请求下一页放到异步任务队列里（宏任务或者微任务）,等当前同步任务执行完成后,立马请求下一页数据,本文给大家介绍了JavaScript如何利用事件循环实现数据预加载,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了深入理解javascript的getTime()方法,需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了原生JS实现呼吸轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
本文主要介绍了简单的渐变轮播插件，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
本篇文章主要是对js判断输入是否为中文的函数进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
最新评论