jQuery - 自定义插件开发方式

jquery插件开发常用方法：

1. 通过$.extend()方法来拓展jquery。
2. 通过$.fn向jquery添加新的方法。

$.extend

$.extend是最简单的一种，只是在jquery基础上拓展（添加）新方法，只需要用$.functionName就可以调用，但是这种方法无法利用jquery选择器的优点以及便利性。

举个例子

$.extend({
    hello: function(str) {
        console.log('hello '+str);
    }
});

$.hello('mic'); //调用

输出结果如下：

$.fn

jQuery.fn对象是jQuery的原型对象。jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法。

$.fn.changeStyle = function(){
   this.css('color','red'); 
   return this;   // 返回自身，以支持链式调用
};

调用时，$(‘domName’).changeStyle ()就可以改变该DOM节点的字体颜色为红色了。

参数

在传递参数是，通常使用jQuery的extend方法。

1. 给extend方法传递单个对象的情况下，这个对象会合并到jQuery身上。
2. 给extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。

$.fn.changeStyle = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend({}, defaults, options);  //为了保护默认参数，第一个参数为空对象
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

面向对象的插件开发

//定义Changer的构造函数
var Changer= function(element, options) {
    this.$element = $(element),
    this.defaults = {
        'color': 'red',
        'fontSize': '12px'
    },
    this.options = $.extend({}, this.defaults, options);
};

//定义Changer的方法
Changer.prototype = {
    changeStyle: function() {
        this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize,
        });
    },
    changeText: function(text){
    	this.$element.html(text);
    }
};

// 在插件中使用对象，并将对象保存在相应的Data中
$.fn.myPlugin=  function(option){   //option作为第一参数
	var args = Array.apply(null, arguments);
	args.shift();  //args作为第二参之后的参数数组
    
    var result;
    // 选择符，可能选择多个Dom对象
    this.each(function(){
		var $this = $(this),
		data = $this.data('myPlugin'),
		options= typeof option === 'object' && option; //对象构造时使用
		
		if (!data){
			$this.data('myPlugin', (data = new Changer(this, options)));
		}
		if (typeof option === 'string' && typeof data[option] === 'function'){
			result= data[option].apply(data, args);
		}
    });
    return result || this; // 返回具体指或链式调用
};

这样代码就变得更面向对象了，更好维护和理解。如果增加新的功能，只需向在对象的prototype 中增加新的方法就可以了。
调用方法如下：

$('a').myPlugin({
		'color': 'blue',
		'fontSize': '20px'
	});
$("a").myPlugin("changeText","abcd");
$("a").myPlugin("changeStyle");

命名空间

1、通常做法是使用立即执行匿名函数包裹插件代码，这样就可以完全放心，安全地将它用于任何地方了，不会和其他插件重名而发生冲突。
2、代码开头加一个分号。避免其他JS中没有以【；】结尾，把我们的立即执行匿名函数和前面代码连起来，导致运行时出错。
3、将系统变量以参数形式传递到插件内部。把JQuery，window等系统变量传到插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能的提升。

最后得到一个结构良好的插件代码：

;(function($) {
    //定义Changer的构造函数
    var Changer= function(element, options) {
        this.$element = $(element),
        this.defaults = {
            'color': 'red',
            'fontSize': '12px'
        },
        this.options = $.extend({}, this.defaults, options);
    };

    //定义Changer的方法
    Changer.prototype = {
        changeStyle: function() {
            this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
            });
        },
        changeText: function(text){
        	this.$element.html(text);
        }
    };

    $.fn.myPlugin=  function(option){   //option作为第一参数
    	var args = Array.apply(null, arguments);
    	args.shift();  //args作为第二参之后的参数数组
        
        var result;
        // 选择符，可能选择多个Dom对象
        this.each(function(){
    		var $this = $(this),
    		data = $this.data('myPlugin'),
    		options= typeof option === 'object' && option; //对象构造时使用
    		
    		if (!data){
    			$this.data('myPlugin', (data = new Changer(this, options)));
    		}
    		if (typeof option === 'string' && typeof data[option] === 'function'){
    			result= data[option].apply(data, args);
    		}
        });
        return result || this; // 返回具体指或链式调用
    };
})(jQuery);