JQuery插件开发简述

jQuery优秀的插件不计其数,个人还是看好JQ对DOM完善的操作性。

先了解几个概念

把代码放在闭包中

(function ($) {
    $.fn.extned({
     //code here  
    });
})(jQuery);

上述代码等价于

var justFun = function ($) {
    $.fn.extned({//Code here
    });
}

justFun(jQuery);

为什么要这样,说的官方一点避免全局依赖,避免第三方库的兼容,兼容jQuery与$ 总之好处多多(一般还会在前面加‘;’,体现压缩代码需要遵循规则)。

为插件提供默认选项

可以通过jQuery的extend功能来设置这些选项,具体猛击这里：JQuery.extend()与JQuery.fn.extend()

var defaults = {
    Text: "this is my first JqPlug.",
    Color: "red"
}; 
var setting = $.extend({}, defaults, options);

遵循链式操作

$.fn.Tabs = function (options) {
    return this.each(function () {
        $(this).xxx; //code here
    })
}

这样我们的插件将会支持链式操作

把一次性的代码放在循环体外

如插件的配置参数

var defaults = { Text: "this is my JQPlug",
    Color: "red"
};
$.fn.textHover = function (options) {
    var setting = $.extend({}, defaults, options); //code here
}

简单的说如果有一段代码是一堆默认值,只需要被实例化一次,而不是每次调用你插件功能的时候都实例化，你应该把这段代码放在插件方法的外面。

这样可以让你的插件运行的更高效,节省内存。

管理好 prototype(原型与面向对象)

function Person(options){ 
    this.name=”Irving”,
    this.age=”22”,
    this.photo=null
 }
 Person.prototype={
 generate:function(){  
    //code here
  } }

这样有什么好处呢,保证数据是每一个实例自己的,可以用this来引用,避免重复代码,节省内存,好吧 总之各种好处。

闭包传递正确的this引用(js中的闭包还是要理解一下的)

可以声明变量来保存 var $this =this;这个要看具体应用,高级话题,我也不太深入 哈哈哈!

插件的种类

ok,继续说几点概念,开发JQ插件有几种方式呢!

封装全局函数($.ajax等方法) 封装对象方法(如$('xx').appendto等方法) 选择器插件(自定义自己的选择器 如$('girlfind bf guy:money(1000000…)'))

一般情况下选择器插件可以是不必要的,原因不解释,但特殊情况下还是蛮有用的,如做一个隔行变色的插件,后面将会介绍,当然其他方式也可以实现。

jQuery插件的机制就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法来扩展jQuery的功能。

扩展全局函数插件

; function ($) {
    $.extend({
        getSize: function () { },
        getPage: function () { } //……
    });
} (jQuery)

或者简写

jQuery.getSize=function(){}; jQuery.getPage=function(){};

备注:上述的写法当然可以加上命名空间

jQuery.myNameSpace = {
    getSize: function () { },
    getPage: function () { }
};

调用jQuery.getSize();或$.getPage();

优点就是方便,缺点就是破坏JQ本身的贞操,具体什么时候用看最后摘抄的2条,这能为我们扩展什么功能呢,如取出字符串中的空字符串,序列化对象数据,数据验证,数值的操作等等。

扩展对象方法插件

要扩展对象方法就需要在$.fn.extend({});上扩展我们的插件,如扩展一个能使元素淡出的动画(只是为了示例),我们命名为jquery.myFadeOutPlugin.js

; (function ($) {
    $.fn.extend({ "myFadeOutPlugin": function (value) { return this.fadeOut("5000"); } });
})(jQuery);

或者简写

; (function ($) {
    $.fn.myFadeOutPlugin = function () { return this.fadeOut("5000"); };
})(jQuery);

备注:如果需要多个方法

;(function($){$.fn.extend({
       "myFadeOutPlugin":function(){        
           return this.fadeOut("5000");        
         },       
        "myFadeInPlugin":function(){} //and so on    
       });
})(jQuery);

调用(注意这里的return为了链式)

$('#XX').myFadeOutPlugin();

这里只有一个元素(没有元素的遍历)并没有提供任何默认参数

如果有多个元素呢,OK ,so easy!

(function ($) {
    $.fn.myFadeOutPlugin = function () { return this.each(function () { $(this).fadeOut("5000"); }); };
})(jQuery);

要提供默认参数呢如 渐变的时间,ok,改造如下

(function ($) {
    var defaults = { time: 5000 }; $.fn.myFadeOutPlugin = function (options) { options = $.extend({}, defaults, options); return this.each(function () { $(this).fadeOut(options.time); }); };
})(jQuery);

调用:

$('.div').myFadeOutPlugin({time:1000});//当然也可以使用缺省值

一般开发插件都是基于对象方法的插件,尽量保持JQAPI不变动,具体神马功能自己挖掘吧!

OK,最后给一个模板方便自己

选择器插件

I’am wroking on my way,waiting! 表格渐变插件介绍一个Ajax插件与反射的案例

附一个模板

/*
* @Extends jquery.1.7.2
* @Overview 搜索提示框
* @Author Irving
* @Email  * @version 0.xx
* @Date xxxx年1月4日1:11:33
* @Copyright (c) xxxx Irving
*/
(function ($) {
    var defaults = { xxx: xxx }; //params
     $.fn.yourPlugName = function(options){   
       options = $.extend(defaults, options);     
           this.each(function(){               
                   //code here
               });     
        };
})(jQuery);

 摘抄一段话

jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JS库插件混淆。
所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身。        可以通过this.each 来遍历所有的元素      在插件头部加上一个分号，以免他人的不规范代码给插件带来影响。
所有的方法或函数插件，都应当以分号结尾，以免压缩时出现问题
除非插件需要返回的是一些需要获取的变量，插件应该返回一个jQuery对象，以保证插件的可链式操作。
利于jQuery.extend()方法设置插件方法的默认参数，增加插件的可用性。          在插件内部,this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样,内部的this指向的是DOM元素。

网络上说开发插件是多用data(.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险),绑定事件用Bind(xxx,function(){});不过我还没领悟其中的奥秘。要想写出优秀的插件,需要对原生js理论有一定的功底,JQ api的熟练,看大牛们写的插件源码,Good luck!