如何写jQuery插件-上

2016/04/04
最近项目中用jQuery很多，在这个前端各种框架群雄争霸的年代，这个老古董仍然被许多网站在使用。项目中遇到特殊的需求时，就需要我们自己写jQuery插件，这篇系列文章也是从网上学来的，但是加了很多自己的注解，让你知道如何去做。

准备工作

我们知道jQuery把它设置成为一个全局变量，挂载在浏览器环境中的window对象上，并且为了方便使用，又把这个变量赋值给了符号$。而我们写插件也是写在这个全局变量上，这个全局变量是个对象，而把功能写在对象原型上，可以让实例都可以调用，而jQuery的原型处理如下：

jQuery.fn = jQuery.prototype = {
    // 一些属性和方法
}

我们正是要把插件写在$.fn上，那么所有的jQuery对象都可以使用。

正文

作用域

为了不使插件内部定义的变量、方法与其它作用域中的变量、方法发生命名冲突，我们把所有的代码独立在一个作用域（即函数）中，并且只接受一个jQuery对象作为参数：

function fn($){
    // do something
}

IIFE

而我们又需要这个函数在引入时就立即执行，所以写成匿名函数，并立即执行，即IIFE：

(function($){
    // do something
})(jQuery);

而这种自执行函数，第一个(前面要加;号的原因是防止像以下代码合并时产生的错误：

var fn = function(){
    // do something
}
(function($){
    // do something
})(jQuery);

// 以上代码压缩之后
// var fn = function(){}(function($){})(jQuery);
//                      ^
//                      此处{}紧跟()会照成编译器无法合理解析后续代码

模块化方案

我们代码的执行环境是浏览器，而不是nodejs

现在的javascript讲究模块化开发，可复用。比较常见的模块化开发实现有：

• AMD规范的实现requirejs
• CMD规范实现seajs
• CommonJS规范实现nodejs
• UMD规范等等

为了让我们的插件可以在这些模块化环境中也能使用，我们需要做一些判断，然后将整个插件代码按照相应模块化环境中的规则调用：

;(function(factory){
    'use strict';
    if(typeof define === 'function' && define.amd){
        // AMD 规范，比如 requirejs
        define(['jquery'], factory);
    }else if(typeof exports === 'object'){
        // CMD 规范，比如 nodejs
        module.exports = factory(require('jquery'));
    }else{
        // 浏览器环境
        if(typeof jQuery === 'undefined'){
            throw 'your plugin requires jQuery to be loaded first';
        }
        factory(jQuery);
    }
}(function($){
    // do something
}));

下一节大概讲解一下插件实现。