原生JS插件（超详细）
作为一个前端er，如果不会写一个小插件，都不好意思说自己是混前端界的。写还不能依赖jquery之类的工具库，否则装得不够高端。那么，如何才能装起来让自己看起来逼格更高呢？当然是利用js纯原生的写法啦。以前一直说，掌握了js原生，就基本上可以解决前端的所有脚本交互工作了，这话大体上是有些浮夸了。不过，也从侧面说明了原生js在前端中占着多么重要的一面。好了。废话不多说。咱们就来看一下怎么去做一个自己的js插件吧。
插件的需求
我们写代码，并不是所有的业务或者逻辑代码都要抽出来复用。首先，我们得看一下是否需要将一部分经常重复的代码抽象出来，写到一个单独的文件中为以后再次使用。再看一下我们的业务逻辑是否可以为团队服务。
插件不是随手就写成的，而是根据自己业务逻辑进行抽象。没有放之四海而皆准的插件，只有对插件，之所以叫做插件，那么就是开箱即用，或者我们只要添加一些配置参数就可以达到我们需要的结果。如果都符合了这些情况，我们才去考虑做一个插件。
插件封装的条件
一个可复用的插件需要满足以下条件：
- 插件自身的作用域与用户当前的作用域相互独立，也就是插件内部的私有变量不能影响使用者的环境变量；
- 插件需具备默认设置参数；
- 插件除了具备已实现的基本功能外，需提供部分API，使用者可以通过该API修改插件功能的默认参数，从而实现用户自定义插件效果；
- 插件支持链式调用；
- 插件需提供监听入口，及针对指定元素进行监听，使得该元素与插件响应达到插件效果。
关于插件封装的条件，可以查看一篇文章：原生JavaScript插件编写指南
而我想要说明的是，如何一步一步地实现我的插件封装。所以，我会先从简单的方法函数来做起。
插件的外包装
用函数包装
所谓插件，其实就是封装在一个闭包中的一种函数集。我记得刚开始写js的时候，我是这样干的，将我想要的逻辑，写成一个函数，然后再根据不同需要传入不同的参数就可以了。
比如，我想实现两个数字相加的方法：
function add(n1,n2) {
return n1 + n2;
}
// 调用
add(1,2)
// 输出：3
这就是我们要的功能的简单实现。如果仅仅只不过实现这么简单的逻辑，那已经可以了，没必要弄一些花里胡哨的东西。js函数本身就可以解决绝大多数的问题。不过我们在实际工作与应用中，一般情况的需求都是比较复杂得多。
如果这时，产品来跟你说，我不仅需要两个数相加的，我还要相减，相乘，相除，求余等等功能。这时候，我们怎么办呢？
当然，你会想，这有什么难的。直接将这堆函数都写出来不就完了。然后都放在一个js文件里面。需要的时候，就调用它就好了。
// 加
function add(n1,n2) {
return n1 + n2;
}
// 减
function sub(n1,n2) {
return n1 - n2;
}
// 乘
function mul(n1,n2) {
return n1 * n2;
}
// 除
function div(n1,n2) {
return n1 / n2;
}
// 求余
function sur(n1,n2) {
return n1 % n2;
}
OK，现在已经实现我们所需要的所有功能。并且我们也把这些函数都写到一个js里面了。如果是一个人在用，那么可以很清楚知道自己是否已经定义了什么，并且知道自己写了什么内容，我在哪个页面需要，那么就直接引入这个js文件就可以搞定了。
不过，如果是两个人以上的团队，或者你与别人一起协作写代码，这时候，另一个人并不知道你是否写了add方法，这时他也定义了同样的add方法。那么你们之间就会产生命名冲突，一般称之为变量的 全局污染
用全局对象包装
为了解决这种全局变量污染的问题。这时，我们可以定义一个js对象来接收我们这些工具函数。
var plugin = {
add: function(n1,n2){...},//加
sub: function(n1,n2){...},//减
mul: function(n1,n2){...},//乘
div: function(n1,n2){...},//除
sur: function(n1,n2){...} //余
}
// 调用
plugin.add(1,2)
上面的方式，约定好此插件名为plugin，让团队成员都要遵守命名规则，在一定程度上已经解决了全局污染的问题。在团队协作中只要约定好命名规则了，告知其它同学即可以。当然不排除有个别人，接手你的项目，并不知道此全局变量已经定义，则他又定义了一次并赋值，这时，就会把你的对象覆盖掉。当然，可能你会这么干来解决掉命名冲突问题：
if(!plugin){ //这里的if条件也可以用： (typeof plugin == 'undefined')
var plugin = {
// 以此写你的函数逻辑
}
}
或者也可以这样写：
var plugin;
if(!plugin){
plugin = {
// ...
}
}
这样子，就不会存在命名上的冲突了。
也许有同学会疑问，为什么可以在此声明plugin变量？实际上js的解释执行，会把所有声明都提前。如果一个变量已经声明过，后面如果不是在函数内声明的，则是没有影响的。所以，就算在别的地方声明过var plugin，我同样也以可以在这里再次声明一次。关于声明的相关资料可以看阮一锋的如何判断Javascript对象是否存在。
基本上，这就可以算是一个插件了。解决了全局污染问题，方法函数可以抽出来放到一单独的文件里面去。
利用闭包包装
上面的例子，虽然可以实现了插件的基本上的功能。不过我们的plugin对象，是定义在全局域里面的。我们知道，js变量的调用，从全局作用域上找查的速度会比在私有作用域里面慢得多得多。所以，我们最好将插件逻辑写在一个私有作用域中。
实现私有作用域，最好的办法就是使用闭包。可以把插件当做一个函数，插件内部的变量及函数的私有变量，为了在调用插件后依旧能使用其功能，闭包的作用就是延长函数(插件)内部变量的生命周期，使得插件函数可以重复调用，而不影响用户自身作用域。
故需将插件的所有功能写在一个立即执行函数中：
;(function(global,undefined) {
var plugin = {
add: function(n1,n2){...}
...
}
// 最后将插件对象暴露给全局对象
'plugin' in global && global.plugin = plugin;
})(window);
对上面的代码段传参问题进行解释一下：
- 在定义插件之前添加一个分号，可以解决js合并时可能会产生的错误问题；
- undefined在老一辈的浏览器是不被支持的，直接使用会报错，js框架要考虑到兼容性，因此增加一个形参undefined，就算有人把外面的
undefined定义了，里面的 undefined 依然不受影响； - 把window对象作为参数传入，是避免了函数执行的时候到外部去查找。
其实，我们觉得直接传window对象进去，我觉得还是不太妥当。我们并不确定我们的插件就一定用于浏览器上，也有可能使用在一些非浏览端上。所以我们还可以这么干，我们不传参数，直接取当前的全局this对象为作顶级对象用。
;(function(global,undefined) {
"use strict" //使用js严格模式检查，使语法更规范
var _global;
var plugin = {
add: function(n1,n2){...}
...
}
// 最后将插件对象暴露给全局对象
_global = (function(){ return this || (0, eval)('this'); }());
!('plugin' in _global) && (_global.plugin = plugin);
}());
如此，我们不需要传入任何参数，并且解决了插件对环境的依事性。如此我们的插件可以在任何宿主环境上运行了。
上面的代码段中有段奇怪的表达式：
(0, eval)('this')，实际上(0,eval)是一个表达式，这个表达式执行之后的结果就是eval这一句相当于执行eval('this')的意思，详细解释看此篇：(0,eval)('this')释义或者看一下这篇(0,eval)('this')
关于立即自执行函数，有两种写法：
// 写法一
(function(){})()
//写法二
(function(){}())
上面的两种写法是没有区别的。都是正确的写法。个人建议使用第二种写法。这样子更像一个整体。
附加一点知识：
js里面()括号就是将代码结构变成表达式，被包在()里面的变成了表达式之后，则就会立即执行，js中将一段代码变成表达式有很多种方式，比如：
void function(){...}();
// 或者
!function foo(){...}();
// 或者
+function foot(){...}();
当然，我们不推荐你这么用。而且乱用可能会产生一些歧义。
到这一步，我们的插件的基础结构就已经算是完整的了。
使用模块化的规范包装
虽然上面的包装基本上已经算是ok了的。但是如果是多个人一起开发一个大型的插件，这时我们要该怎么办呢？多人合作，肯定会产生多个文件，每个人负责一个小功能，那么如何才能将所有人开发的代码集合起来呢？这是一个讨厌的问题。要实现协作开发插件，必须具备如下条件：
- 每功能互相之间的依赖必须要明确，则必须严格按照依赖的顺序进行合并或者加载
- 每个子功能分别都要是一个闭包，并且将公共的接口暴露到共享域也即是一个被主函数暴露的公共对象
关键如何实现，有很多种办法。最笨的办法就是按顺序加载js
<script type="text/javascript" src="part1.js"></script>
<script type="text/javascript" src="part2.js"></script>
<script type="text/javascript" src="part3.js"></script>
...
<script type="text/javascript" src="main.js"></script>
但是不推荐这么做，这样做与我们所追求的插件的封装性相背。
不过现在前端界有一堆流行的模块加载器，比如require、seajs，或者也可以像类似于Node的方式进行加载，不过在浏览器端，我们还得利用打包器来实现模块加载，比如browserify。不过在此不谈如何进行模块化打包或者加载的问题，如有问题的同学可以去上面的链接上看文档学习。
为了实现插件的模块化并且让我们的插件也是一个模块，我们就得让我们的插件也实现模块化的机制。
我们实际上，只要判断是否存在加载器，如果存在加载器，我们就使用加载器，如果不存在加载器。我们就使用顶级域对象。
if (typeof module !== "undefined" && module.exports) {
module.exports = plugin;
} else if (typeof define === "function" && define.amd) {
define(function(){return plugin;});
} else {
_globals.plugin = plugin;
}
这样子我们的完整的插件的样子应该是这样子的：
// plugin.js
;(function(undefined) {
"use strict"
var _global;
var plugin = {
add: function(n1,n2){ return n1 + n2; },//加
sub: function(n1,n2){ return n1 - n2; },//减
mul: function(n1,n2){ return n1 * n2; },//乘
div: function(n1,n2){ return n1 / n2; },//除
sur: function(n1,n2){ return n1 % n2; } //余
}
// 最后将插件对象暴露给全局对象
_global = (function(){ return this || (0, eval)('this'); }());
if (typeof module !== "undefined" && module.exports) {
module.exports = plugin;
} else if (typeof define === "function" && define.amd) {
define(function(){return plugin;});
} else {
!('plugin' in _global) && (_global.plugin = plugin);
}
}());
我们引入了插件之后，则可以直接使用plugin对象。
with(plugin){
console.log(add(2,1)) // 3
console.log(sub(2,1)) // 1
console.log(mul(2,1)) // 2
console.log(div(2,1)) // 2
console.log(sur(2,1)) // 0
}
插件的API
插件的默认参数
我们知道，函数是可以设置默认参数这种说法，而不管我们是否传有参数，我们都应该返回一个值以告诉用户我做了怎样的处理，比如：
function add(param){
var args = !!param ? Array.prototype.slice.call(arguments) : [];
return args.reduce(function(pre,cur){
return pre + cur;
}, 0);
}
console.log(add()) //不传参，结果输出0，则这里已经设置了默认了参数为空数组
console.log(add(1,2,3,4,5)) //传参，结果输出15
则作为一个健壮的js插件，我们应该把一些基本的状态参数添加到我们需要的插件上去。
假设还是上面的加减乘除余的需求，我们如何实现插件的默认参数呢？道理其实是一样的。
// plugin.js
;(function(undefined) {
"use strict"
var _global;
function result(args,fn){
var argsArr = Array.prototype.slice.call(args);
if(argsArr.length > 0){
return argsArr.reduce(fn);
} else {
return 0;
}
}
var plugin = {
add: function(){
return result(arguments,function(pre,cur){
return pre + cur;
});
},//加
sub: function(){
return result(arguments,function(pre,cur){
return pre - cur;
});
},//减
mul: function(){
return result(arguments,function(pre,cur){
return pre * cur;
});
},//乘
div: function(){
return result(arguments,function(pre,cur){
return pre / cur;
});
},//除
sur: function(){
return result(arguments,function(pre,cur){
return pre % cur;
});
} //余
}
// 最后将插件对象暴露给全局对象
_global = (function(){ return this || (0, eval)('this'); }());
if (typeof module !== "undefined" && module.exports) {
module.exports = plugin;
} else if (typeof define === "function" && define.amd) {
define(function(){return plugin;});
} else {
!('plugin' in _global) && (_global.plugin = plugin);
}
}());
// 输出结果为：
with(plugin){
console.log(add()); // 0
console.log(sub()); // 0
console.log(mul()); // 0
console.log(div()); // 0
console.log(sur()); // 0
console.log(add(2,1)); // 3
console.log(sub(2,