JQuery插件实现

我们实现的一些独立的功能，可以写成jQuery插件的形式封装起来，不仅可以在其它地方使用这个功能，还可以用jquery链式调用。

1、关系：

jQuery.fn = jQuery.prototype 即jQuery对象的原型，

jQuery.fn.extend(object)就是扩展jQuery对象的原型方法。

$.extend(object) 可以理解为JQuery 添加一个静态方法。

$.fn.extend(object) 可以理解为JQuery实例添加一个方法。

 

2、$.extend()重载覆盖默认参数

$.extend()重载版本：jQuery.extend([deep], target, object1, [objectN])，用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。var opts = $.extend({}, defaults, option);

 

3、jQuery.fn.extend(object)封装插件步骤:

　　1、使用自执行的匿名函数创建私有作用域，使外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。　

　　(function ($) { })(window.jQuery);

 

 　　2、在jQuery.fn.extend(object)上添加拓展方法

//闭包限定命名空间
(function ($) {
    $.fn.extend({
        "highLight":function(options){
            //do something
        }
    });
})(window.jQuery);

　　3、实现功能，定义默认参数

//闭包限定命名空间
(function ($) {
    $.fn.extend({
        "highLight": function (options) {
            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
            return this.each(function () {  //这里的this 就是 jQuery对象, return返回jQuery对象，为了支持链式调用
                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                //根据参数来设置 dom的样式
                $this.css({
                    backgroundColor: opts.background,
                    color: opts.foreground
                });
            });

        }
    });
    //默认参数
    var defaluts = {
        foreground: 'red',
        background: 'yellow'
    };
})(window.jQuery);

以上三步便可以制作出一个基础的jQuery插件。jQuery的基本格式

　　4、如果有需求的话还可以暴露公共方法 给别人来扩展你的插件

//公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。

$.fn.highLight.format = function (str) {
    return "<strong>" + str + "</strong>"; 
}

 　　5、还可以定义插件的私有方法、供插件内部使用，比如检查传入参数是否规范

//私有方法，检测参数是否合法 
function isValid(options) {
     return !options || (options && typeof options === "object") ? true : false;
 }

加上上面两步便可以封装一个较完善的jQuery插件。