今天，先从最简单的开始，将已有的一个Tab选项卡切换功能改写成javascript插件形式。
原生函数写法
将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面
我们先来看看最原始的使用函数写法的代码：
tab.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta content="webkit"> <title>jquery_hjb_tab插件demo</title> <link href="https://www.jb51.net/article/h.css"/> </head> <body> <div> <div> <ul> <li><a href="#">tab1</a></li> <li><a href="#">tab2</a></li> <li><a href="#">tab3</a></li> <li><a href="#">tab4</a></li> </ul> </div> <div> <section>内容一</section> <section>内容二</section> <section>内容三</section> <section>内容四</section> </div> </div> <script> window.onload = h_tab('tab'); function h_tab(tabId){ var oLinks = document.getElementById(tabId).getElementsByTagName("a"); var oCons = document.getElementById(tabId).getElementsByTagName("section"); for(var i = 0; i<oLinks.length; i++){ oLinks[i].index = i; oLinks[i].onclick = function () { for(var j =0; j<oLinks.length; j++){ oLinks[j].className=""; oCons[j].style.display = "none"; } this.className="cur"; oCons[this.index].style.display ="block"; } } } </script>
h.css
@charset "utf-8"; /* //author:hjb2722404 //description: //date:2016/2/18 */ .tabs ul { width: 100%; list-style-type: none;} .tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;} .tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442} .tabs ul li a.cur { border-bottom: 3px solid #f26123;} .tabCons section { display: none;} .tabCons section:nth-child(1) { display: block;}
上面两份代码为基本代码，之后我们后一步步在这份代码的基础上进行改进。
原生插件写法
好，现在，我们就来将这个方法改写成挂载在window对象下的插件：
tab.html
…… // 下面是第一次改动 <script type="text/javascript" src="https://www.jb51.net/h_tabs.js"></script> <script> H_tab("tab"); </script> </body> </html>
h_tabs.js
window.H_tab = function(tabId){ var oLinks = document.getElementById(tabId).getElementsByTagName("a"); var oCons = document.getElementById(tabId).getElementsByTagName("section"); for(var i = 0; i<oLinks.length; i++){ oLinks[i].index = i; oLinks[i].onclick = function () { for(var j =0; j<oLinks.length; j++){ oLinks[j].className=""; oCons[j].style.display = "none"; } this.className="cur"; oCons[this.index].style.display ="block"; } } };
但是，我们发现这样的写法虽然很简单，但也有问题：window作为一个全局对象，如果我们把自己的方法都挂载到它下面作为插件使用的话，插件一多，就容易产生命名空间冲突，另一方面，使用原生js虽然可以减少对外部的依赖，但代码量相对还是很大，写法比较繁琐。
jquery写法
我们尝试引入jquery库，将此插件改写为jquery插件。
jquery插件有三种形式：类级别的形式，对象级别的形式，jquery UI组件的形式
jquery 类级别插件写法–单个方法
我们先来看类级别插件的形式。
第一种类级别插件的形式，直接把该方法挂载到jquery的根空间下，作为一个工具方法：
tab.html
…… <script src="https://www.jb51.net/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.jb51.net/h_tabs.js"></script> <script> $.h_tab('tab'); </script> </body> </html>
h_tabs.js
$.h_tab = function(tabId){ var oLinks = document.getElementById(tabId).getElementsByTagName("a"); var oCons = document.getElementById(tabId).getElementsByTagName("section"); for(var i = 0; i<oLinks.length; i++){ oLinks[i].index = i; oLinks[i].onclick = function () { for(var j =0; j<oLinks.length; j++){ oLinks[j].className=""; oCons[j].style.display = "none"; } this.className="cur"; oCons[this.index].style.display ="block"; } } };
jquery类级别插件写法-多个方法
如果你想要将多个方法绑定到jquery根空间上面，那么像下面这样写：
tab.html