开发jQuery插件总结

1.开发插件的方式有两种:

　　1.1类级别的开发

　　　　a) 类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子有$.AJAX(),$.getJSON(),将函数定义于jQuery的命名空间中

　　　　b) 直接给jQuery添加一个函数

　　　　　　jQuery.pluginTest = function() {

　　　　　　　　alert(“this is a plugin test add by class”);

　　　　　　}

　　　　　　调用方式 :  jQuery.pluginTest();

　　　　c) 通过jQuery.extend()添加函数

　　　　　　jQuery.extend({

　　　　　　　　pluginTest:function() {

　　　　　　　　　　alert(“this is a plugin test add by extends”);

　　　　　　　　}

　　　　　　});

　　　　　　调用方式 : jQuery.pluginTest();

　　　　d) 以命名空间的方式添加函数

　　　　　　有点: 避免某些函数或变量名将于其他jQuery插件冲突

　　　　　　jQuery.pluginTest = {

　　　　　　　　test : function() {

　　　　　　　　　　alert(“this is a plugin test add by namespace”);

　　　　　　　　}

　　　　　　}

　　　　　　调用方式 : jQuery.pluginTest.test();

 

　　1.2对象级别的开发

　　　　a) 第一种对象级别开发方式:

   　　　　　jQuery.fn.extend({pluginTest : function() {

　　　　　　　alert(“this is plugin test add by object1”);

  　　　　　}});

   　　　　  调用 : $(“#id”).pluginTest();

　　　　b) 第二种对象级别开发方式:

　　　　　　jQuery.fn.pluginTest = function() {

　　　　　　　　alert(“this is plugin test add by object2”);

　　　　　　}

　　　　　　调用 : $(“#id”).pluginTest();

  　　　 c) 保证私有函数的私有性(闭包):

　　　　　　优点 : 定义更多的函数而不搅乱命名空间也不暴露实现

　　　　　　(function($) {

　　　　　　　　$.fn.pluginTest = function() {

　　　　　　　　　　test();

　　　　　　　　}

　　　　　　　　function test() {

　　　　　　　　　　alert(“this is a closure test”);

　　　　　　　　}

　　　　　　})(jQuery);

　　　　　　调用: $(“#id”).pluginTest();

　　　　d) 通过接收参数options 改变默认的值

　　　　　　(function($) {

　　　　　　　　$.fn.pluginTest = function(options) {

　　　　　　　　var opt = $.extend({width : 20, height : 20, color : ’ red’ }, options);

　　　　　　　　this.width(opt.width);

　　　　　　　　this.height(opt.height);

　　　　　　　　this.css(“color”, opt.color);

　　　　　　　　}

　　　　　　})(jQuery)

　　　　　　调用 : $(“#id”).pluginTest({width:50,  height:50,  color : ‘yellow’});

　　　　c) 通过暴露属性改变默认值

　　　　　　(function () {

　　　　　　　　$.fn.pluginTest = function() {

　　　　　　　　　　this.width($.fn.pluginTest.defaults.width);

　　　　　　　　　　this.height($.fn.pluginTest.defaults.height);

　　　　　　　　　　this.css(“color”, $.fn.pluginTest.defaults.color);

　　　　　　　　}

　　　　　　　　$.fn.pluginTest.defaults = {

　　　　　　　　　　Width : 20,

　　　　　　　　　　height: 20,

　　　　　　　　　　Color :‘red’ 

　　　　　　　　}

　　　　　　})(jQuery)

　　　　　   调用: 

　　　　　　$(“#id”).pluginTest.defaults = {

　　　　　　　　width : 50,

　　　　　　　　height: 50,

　　　　　　　　Color :‘red’

　　　　　　}

　　　　　　$(“#id”).pluginTest();

 

 

2.开发插件时需要注意的几点:

　　a) 推荐使用插件的命名方法jQuery.[插件名].js||[插件名].js

　　b) 所有的对象方法都应当附加到JQuery.fn对象上面,而所有的全局函数都应当附加到JQuery对象本身上

　　c) 在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素

　　d) 可以通过this.each 来遍历所有的元素 

　　e) 所有方法或函数插件,都应当以分号结尾,否则压缩的时候可能会出现问题.为了更加保险写,可以在插件头部添加一个分号（;）,以免他们的不规范代码给插件带来 影响.

　　f) 插件应该返回一个jQuery对象,以便保证插件的可链式操作.

　　链式操作：($("#div1").css("color","red").addClass("Add"))

 

 

3.jQuery.extend() 和 jQuery.fn.extend()区别

　　3.1 jQuery.extend()函数;

　　　　a).var tar = jQuery.extend(target, src1, src2...);

　　　　作用:将target,src1,src2中的属性合并添加到target中并返回

　　　　b).var tar = jQuery.extend({},target,src1,src2...);

　　　　作用:将target,src1..中的属性合并,target结构不变

　　　　c).var tar = jQuery.extend(boolean, target, src1, src2);

　　　　Boolean 表示是否进行深度拷贝(是否复制嵌套对象)

　　　　d).jQuery.extend(src);

　　　　作用:将该src合并到调用extend方法的对象中去,这里就是将src合并到jquery的全局对象中去

 

　　3.2 JQuery.fn.extend()函数 用法同上

　　　　a).jQuery.fn是什么

　　　　　　jQuery.fn = jQuery.prototype = {

　　　　　　　　init: function(){//...

　　　　　　　　//...

　　　　　　　　}

　　　　　　}

　　　　b).jQuery.fn.extend(src)就是将src添加到jQuery原型中由其实例对象调用

本文通过互联网总结而来