关于 JavaScript & jQuery 的插件开发
最近在温故 JavaScript 的面向对象，于是乎再次翻开了《JavaScript高级程序设计》第3版，了解到其中常见的设计模式，以前刚出道时遗留下来的困惑和不解，同时也茅塞顿开豁然开朗了，每一次翻阅每一次都有新的认识。
之前写过 jQuery 插件，其实其中原理也很简单，不过我在想原生 JavaScript 插件的我应该要怎么写？网上的教程略显复杂，我自己理解来说就是把一些属性跟方法封装起来可以随时复用吧。
不知道用 构造函数+原型模式 来封装一个函数（类）然后随时调用，把它当作一个插件（这个想法我也不知道正不正确，因为很少用原生 JS 写插件），在接口传参达到复用目的。（如果这种想法有错误，恳请大神们严厉指正）
好了，直接上码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 简单选项卡插件</title>
<style>
.tabbox input {
background-color: #FFF;
}
.tabbox input.active {
background-color: #000;
color: #FFF;
}
.tabbox div {
display: none;
width: 200px; height: 200px;
background-color: #CCC;
}
</style>
</head>
<body>
<section id="tabBox1" class="tabbox">
<input class="active" type="button" value="tab1" />
<input type="button" value="tab2" />
<input type="button" value="tab3" />
<div style="display:block;">tab-cont1</div>
<div>tab-cont2</div>
<div>tab-cont3</div>
</section>
<br>
<section id="tabBox2" class="tabbox">
<input class="active" type="button" value="tab1" />
<input type="button" value="tab2" />
<input type="button" value="tab3" />
<div style="display:block;">tab-cont1</div>
<div>tab-cont2</div>
<div>tab-cont3</div>
</section>
<script>
window.onload = function () {
new Tabs("tabBox1");
new Tabs("tabBox2");
};
var Tabs = function(ID) {
var _this = this;
var oDiv = document.getElementById(ID);
this.aBtn = oDiv.getElementsByTagName("input");
this.aDiv = oDiv.getElementsByTagName("div");
for(var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].index = i;
this.aBtn[i].onclick = function() {
_this.fnClick(this);
};
}
};
Tabs.prototype.fnClick = function(oBtn) {
for(var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].className = ''
this.aDiv[i].style.display = "none";
}
oBtn.className = "active";
this.aDiv[oBtn.index].style.display = "block";
}
</script>
</body>
</html>
刚出道的我看过一本书 《锋利的jQuery》第2版 在这本书里面了解到了 jQuery 插件开发，首先在开发之前先简单了解一下它的特点：
1. 使用闭包
(function($) {
// Code goes here
})(jQuery);
可能我们有时候会见到这种写法
;(function($) {
// Code goes here
})(jQuery);
在最前面多了一个 ； 分号，这是因为我们开发插件一般都会用前端自动化工程打包发布版本，会压缩和合并一些代码，加上 ； 分号是为了避免代码压缩和与其它代码合并混淆时候出现报错，所以就加了一个 ； 分号与前面代码分隔出来，各自执行不干扰。
这是 jQuery 官方的插件开发规范要求，使用这种编写方式有什么好处呢？
- 避免全局依赖；
- 避免第三方破坏；
- 兼容 jQuery 操作符 '$ ' 和 'jQuery '。
对于这种写法不理解？没关系，我们换个写法，其实它等同于：
var jq = function($) {
// Code goes here
};
jq(jQuery);
这样写清楚了吧？
2. 扩展
jQuery 提供了 2 个供用户扩展的 ‘基类’ $.extend 和 $.fn.extend；
$.extend 用于扩展自身方法，如 $.ajax , $.getJSON 等， $.fn.extend 则是用于扩展 jQuery 类，包括方法和对 jQuery 对象的操作。为了保持 jQuery 的完整性，我比较趋向于使用 $.fn.extend 进行插件开发而尽量少使用$.extend；
3. 选择器
jQuery 提供了功能强大，并兼容多种 css 版本的选择器，不过发现很多同学在使用选择器时并未注重效率的问题。
- 尽量使用Id选择器，jQuery的选择器使用的 API 都是基于 getElementById 或 getElementsByTagName，因此可以知道 效率最高的是 Id 选择器，因为 jQuery 会直接调用 getElementById 去获取 dom，而通过样式选择器获取 jQuery 对象时往往会使用 getElementsByTagName 去获取然后筛选；
- 样式选择器应该尽量明确指定 tagName, 如果开发人员使用样式选择器来获取 dom，且这些 dom 属于同一类型，例如获取所有 className 为 jquery 的 div，那么我们应该使用的写法是 $("div.jquery") 而不是 $(".jquery")，这样写的好处非常明显，在获取 dom 时 jQuery 会获取 div 然后进行筛选，而不是获取所有 dom 再筛选；
- 避免迭代，很多同学在使用 jQuery 获取指定上下文中的 dom 时喜欢使用迭代方式，如 $(".jquery .child")，获取 className 为j query 的 dom 下的所有 className为 child 的节点，其实这样编写代码付出的代价是非常大 的，jQuery 会不断的进行深层遍历来获取需要的元素，即使确实需要，我们也应该使用诸如 $(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2) 之类的方式。
让我们看看其中的基础框架：
//为避免冲突，将我们的方法用一个匿名方法包裹起来
;(function($) {
//扩展这个方法到jQuery
$.fn.extend({
//插件名字
pluginname: function() {
//遍历匹配元素的集合
return this.each(function() {
//在这里编写相应代码进行处理
});
}
});
//传递jQuery到方法中，这样我们可以使用任何JavaScript中的变量来代替"$"
})(jQuery);
根据上面的代码，我来写一个简单的 jQuery 插件：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 简单选项卡插件</title>
<style>
.tabbox input {
background-color: #FFF;
}
.tabbox input.active {
background-color: #000 !important;
color: #FFF !important;
}
.tabbox div {
display: none;
width: 200px; height: 200px;
}
</style>
</head>
<body>
<section id="tabBox1" class="tabbox">
<input class="active" type="button" value="tab1" />
<input type="button" value="tab2" />
<input type="button" value="tab3" />
<div style="display:block;">tab-cont1</div>
<div>tab-cont2</div>
<div>tab-cont3</div>
</section>
<br>
<section id="tabBox2" class="tabbox">
<input class="active" type="button" value="tab1" />
<input type="button" value="tab2" />
<input type="button" value="tab3" />
<div style="display:block;">tab-cont1</div>
<div>tab-cont2</div>
<div>tab-cont3</div>
</section>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jQuery.tabBox.js"></script>
</body>
</html>
jQuery.tabBox.js
;(function($) {
$.fn.extend({
//插件名称 - Tabs
Tabs: function (options) {
//参数和默认值
var defaults = {
tabMenuColor: "#FFF", //选项卡按钮的背景颜色
tabBoxColor: "#CCC", //选项卡内容区的背景颜色
currentActive: 'active' //选项卡按钮选中样式（class名称）
};
var options = $.extend(defaults, options);
return this.each(function () {
var o = options;
//获得当前对象（最外层（父层）为看作一个整体对象，用它操作其内部的dom元素）
var obj = $(this);
//得到obj中的input对象
var aMenus = $("input", obj);
//得到obj中的div对象
var aBoxs = $("div", obj);
//为按钮绑定切换方法
aMenus.on("click",function() {
var mthis = $(this);
var currIndex = mthis.index();
mthis.addClass(o.currentActive).siblings().removeClass(o.currentActive);
aBoxs.hide().eq(currIndex).show();
});
//改变切换卡样式
aMenus.css("backgroundColor",o.tabMenuColor);
aBoxs.css("backgroundColor",o.tabBoxColor);
});
}
});
})(jQuery);
使用插件：
$(function() {
//使用默认参数
$("#tabBox1").Tabs();
//使用自定义参数
$("#tabBox2").Tabs({
tabMenuColor: "#940",
tabBoxColor: "#360"
});
});
好了，该码上都码了，写的比较仓促，后面会慢慢的优化这篇文章，若有低级问题恳请大神们严厉指正。
