介绍
本文以Bootstrap标签页组件为例，介绍如何编写或者封装一个前端组件，以下是实现效果：
原生的Bootstrap-tab组件主要有html,css组成，开发者使用时，需要写很多代码，不易于使用，对bootstrap-tab封装后，可以更方便地使用，同时提供关闭、增加tab页、指定当前选中页、即使加载等功能，这样组件可以适配更多的场景。
原生bootstrap-tab组件使用可参考https://www.runoob.com/bootstrap/bootstrap-tab-plugin.html
其中官网一段实例代码是：
rush:js;">
菜鸟教程是
一个提供最新的web技术
站点，本站免费提供了
建站相关的技术文档，帮助广大web技术爱好者
快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。
iOS 是
一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于
负载和
性能测试。
Enterprise Java Beans（EJB）是
一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
rush:js;">
/**
* Bootstrap tab组件封装
* @author billjiang qq:475572229
* @created 2017/7/24
*
*/
(function ($,window,document,undefined) {
'use strict';
var pluginName = 'tabs';
//入口
方法
$.fn[pluginName] = function (options) {
var self = $(this);
if (this == null)
return null;
var data = this.data(pluginName);
if (!data) {
data = new BaseTab(this,options);
self.data(pluginName,data);
}
return data;
};
var BaseTab = function (element,options) {
this.$element = $(element);
this.options = $.extend(true,{},this.default,options);
this.init();
}
//
默认配置
BaseTab.prototype.default = {
}
//结构模板
BaseTab.prototype.template = {
}
//初始化
BaseTab.prototype.init = function () {
}
})(jQuery,document)
rush:js;">
//
默认配置
BaseTab.prototype.default = {
showIndex: 0,//
默认
显示页索引
loadAll: true,//true=一次全部加在
页面,false=只加在showIndex指定的
页面，其他点击时加载，提高响应速度
}
//结构模板
BaseTab.prototype.template = {
ul_nav: '
',ul_li: '- {1}
',ul_li_close: '关闭">',div_content: '',div_content_panel: '
'
}
//初始化
BaseTab.prototype.init = function () {
if (!this.options.data || this.options.data.length == 0) {
console.error("请指定tab页数据");
return;
}
//当前
显示的
显示的
页面是否超出索引
if (this.options.showIndex < 0 || this.options.showIndex > this.options.data.length - 1) {
console.error("showIndex超出了范围");
//指定为
默认值
this.options.showIndex = this.default.showIndex;
}
//清除原来的tab页
this.$element.html("");
this.builder(this.options.data);
}
//使用模板搭建
页面结构
BaseTab.prototype.builder = function (data) {
var ul_nav = $(this.template.ul_nav);
var div_content = $(this.template.div_content);
for (var i = 0; i < data.length; i++) {
//nav-tab
var ul_li = $(this.template.ul_li.format(data[i].id,data[i].text));
//如果可
关闭,插入
关闭图标，并绑定
关闭事件
if (data[i].closeable) {
var ul_li_close = $(this.template.ul_li_close);
ul_li.find("a").append(ul_li_close);
ul_li.find("a").append("");
}
ul_nav.append(ul_li);
//div-content
var div_content_panel = $(this.template.div_content_panel.format(data[i].id));
div_content.append(div_content_panel);
}
this.$element.append(ul_nav);
this.$element.append(div_content);
this.loadData();
this.$element.find(".nav-tabs li:eq(" + this.options.showIndex + ") a").tab("show");
}
BaseTab.prototype.loadData = function () {
var self = this;
//tab点击即加载事件
//设置
一个值，记录每个tab页是否加载过
this.stateObj = {};
var data = this.options.data;
//如果是当前页或者配置了一次性全部加载，否则点击tab页时加载
for (var i = 0; i < data.length; i++) {
if (this.options.loadAll || this.options.showIndex == i) {
if (data[i].url) {
$("#" + data[i].id).load(data[i].url);
this.stateObj[data[i].id] = true;
} else {
console.error("id=" + data[i].id + "的tab页未指定url");
this.stateObj[data[i].id] = false;
}
} else {
this.stateObj[data[i].id] = false;
(function (id,url) {
self.$element.find(".nav-tabs a[href='#" + id + "']").on('show.bs.tab',function () {
if (!self.stateObj[id]) {
$("#" + id).load(url);
self.stateObj[id] = true;
}
});
}(data[i].id,data[i].url))
}
}
//
关闭tab事件
this.$element.find(".nav-tabs li a i.closeable").each(function (index,item) {
$(item).click(function () {
var href = $(this).parents("a").attr("href").substr(1);
$(this).parents("li").remove();
$("#" + href).parent().remove();
})
});
}
测试
编写一个前端界面，测试组件
rush:js;">
<
Meta charset="UTF-8">
Tab组件
