以BootStrap Tab为例写一个前端组件

Bootstrap 前端之家
前端之家收集整理的这篇文章主要介绍了以BootStrap Tab为例写一个前端组件，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

介绍

本文以Bootstrap标签页组件为例，介绍如何编写或者封装一个前端组件，以下是实现效果：

原生的Bootstrap-tab组件主要有html,css组成，开发者使用时，需要写很多代码，不易于使用，对bootstrap-tab封装后，可以更方便地使用，同时提供关闭、增加tab页、指定当前选中页、即使加载等功能，这样组件可以适配更多的场景。

原生bootstrap-tab组件使用可参考https://www.runoob.com/bootstrap/bootstrap-tab-plugin.html

其中官网一段实例代码是：

    • 菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。

    @H_502_24@
    iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

    @H_502_24@
    jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。

    @H_502_24@
    Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

    @H_502_24@ @H_502_24@ @H_502_24@

    那么如何封装或者开发一个组件呢？

    组件开发步骤

    Step1：结构化静态代码，梳理核心的问题

    在组件开发流程中，可能拿到前端设计的静态代码（html+css的组合），这时候要拆解代码结构，使得结构能够模板化。其次梳理核心问题，bootstrap-tab组件化之后，应该能够动态加载tab内容，这个可以通过jquery.load方法解决，这样可以做到主页面和子页面解耦。

    读懂了静态代码，理解了结构和核心问题就可以写代码了，首先搭建组件的架子。

    Step2：组件骨架

    方法 $.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) @H_502_24@

    搭建了以上组件的骨架，并对组件命名为tabs，这样就可以通过$("#tab-container").data("tabs")获取组价的方法和属性。在入口方法中，会将初始化后的对象缓存到页面html中，这样可以避免重复创建对象。一些经典的开源前端组件都是这样写法，比如Bootstrap-treeview,大家有时间可以看看它的源码。

    以上的写法使用原型链的写法。定义了默认配置，结构模板，初始化入口。

    编写代码

    在组件的代码骨架里，填充模板代码，这里使用占位符{0}，{1}等表示外部传入的变量，然后在init方法中校验外部传入数据的合法性，然后构建组件，并且绑定关闭事件、点击事件。

    在开发前端组件的时候，往往不知道默认参数应该有什么，可以在开发的时候，用到就加上去，这里加了两个默认参数，一个showIndex是默认显示的tab页索引，一个loadAlltab是否一次性把所有的页面数据加载完。

    具体的逻辑请看下面的代码：

    显示页索引 loadAll: true,//true=一次全部加在页面,false=只加在showIndex指定的页面，其他点击时加载，提高响应速度 } //结构模板 BaseTab.prototype.template = { ul_nav: '