tab 插件封装 — 类似vue框架的思想
看了一个tab 封装的插件，插件简单，但思想很不错.
现分享给大家，可以看看
html 页面代码：
思想：
1. 使用节点的属性data来设置数据.
2. 使用 new MyTab("#my-tab"); 来初始插件
<body>
<div id="my-tab" data='[
{
"tab":"选项卡1",
"page":"页面1"
},
{
"tab":"选项卡2",
"page":"页面2"
},
{
"tab":"选项卡3",
"page":"页面3"
}
]'>
</div>
<!-- 引入模板文件 -->
<script src="tpl.js"></script>
<!-- 引入工具文件-->
<script src="utils.js"></script>
<script src="myTab.js"></script>
<script type="text/javascript">
new MyTab("#my-tab");
</script>
</body>模板文件：tpl.js
思想：
1、和一般的插件封装不一样，这里使用了模板的概念
2、模板中使用了双括号{{ }}，来表示变量
var tpl = (function () {
function tab(filed) {
switch (filed) {
case 'tab':
return (`<div class="tab-item {{ current }}">{{ tab }}</div>`);
case 'page':
return (`<div class="page-item {{ current }}">{{ page }}</div>`);
default:
break;
}
}
return {
tab:tab
}
})();工具文件：utils.js
思想：
1、正则表达式实现将双括号{{ }}替换成数据。
var tools = (function () {
function tabReplace(tpl,replaceObj) {
return tpl.replace(/\{\{(.*?)\}\}/g,function(node,key){
return replaceObj[key.trim()]
})
}
return {
tabReplace:tabReplace
}
})();插件文件：myTab.js
思想：
1、将全局变量，变成形参来使用
2、功能划分细致，模块独立 3、使用文档片断 createDocumentFragment, 减少对dom操作的次数
4、全部采用es3 es5来实现
5、使用bind(this)指定this, 让事件处理函数中，this指向类的实例
;(function (doc,tpl,tools) {
function myTab(el) {
this.el = doc.querySelector(el);
this.data = JSON.parse(this.el.getAttribute('data'));
this._index = 0 ; //选中选项卡的索引
this.init(); //初始化
}
myTab.prototype.init = function(){
this._render(); //渲染
this._bindEvent(); //绑定事件
}
myTab.prototype._render = function(){
var tabWrapper = doc.createElement('div');
var pageWrapper = doc.createElement('div');
var oFrag = doc.createDocumentFragment();
tabWrapper.className = 'tab-wrapper';
pageWrapper.className = 'page-wrapper';
this.data.forEach(function (item,index) {
tabWrapper.innerHTML += tools.tabReplace(tpl.tab('tab'),{
tab : item.tab,
current:!index?'current':''
})
// tpl.tab('page') :获取对应的模板
pageWrapper.innerHTML += tools.tabReplace(tpl.tab('page'),{
page : item.page,
current:!index?'current':''
})
})
oFrag.appendChild(tabWrapper);
oFrag.appendChild(pageWrapper);
this.el.appendChild(oFrag);
}
myTab.prototype._bindEvent = function(){
var doms= {
otabItem : doc.querySelectorAll('.tab-item'),
opageItem : doc.querySelectorAll('.page-item')
}
this.el.addEventListener('click',this._handleTabClick.bind(this,doms),false);
}
myTab.prototype._handleTabClick = function(){
var _doms = arguments[0],
tar = arguments[1].target,
className = tar.className.trim();
console.log(arguments)
if(className=='tab-item'){
_doms.otabItem[this._index].className='tab-item';
_doms.opageItem[this._index].className='page-item';
//使用数组的indexOf，找到tar对应的位置下标
this._index = [].indexOf.call(_doms.otabItem,tar);
console.log(this._index);
tar.className+=' current';
_doms.opageItem[this._index].className+=' current';
}
}
window.MyTab = myTab;
})(document,tpl,tools);分享结束，希望对大家有所启发
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-05-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
