jQuery插件开发jQuery.extend(object)和jQuery.fn.extend()

jQuery插件开发

知识1：用JQuery写插件时，最核心的方法有如下两个：

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

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

基本的定义与调用：

/* $.extend 定义与调用

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

$.extend({ fun1: function () { alert("执行方法一"); } });

$.fun1();

/*  $.fn.extend 定义与调用

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

$.fn.extend({ fun2: function () { alert("执行方法2"); } });

$(this).fun2();

//等同于

$.fn.fun3 = function () { alert("执行方法三"); }

$(this).fun3();

知识2:jQuery(function () { }); 与 (function ($) { })(jQuery);的区别：

jQuery(function () { });

//相当于

$(document).ready(function () { });

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

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

//相当于

var fn = function ($) { };

fn(jQuery);

jQuery(function () { });是某个DOM元素加载完毕后执行方法里的代码。

(function ($) { })(jQuery); 定义了一个匿名函数，其中jQuery代表这个匿名函数的实参。通常用在JQuery插件开发中，起到了定义插件的私有域的作用。

http://www.cnblogs.com/xcj26/p/3345556.html

1、类级别
类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法。
开发扩展其方法时使用$.extend方法，即jQuery.extend(object);

代码如下：

$.extend({ 

add:function(a,b){return a+b;} , 

minus:function(a,b){return a-b;}

});

页面调用如下

var i = $.add(,);

var j = $.minus(,);

2、对象级别
要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要通过$.fn 向jQuery添加新的方法

对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);

代码如下：

$.fn.extend({

   check:function(){

      return this.each({

      this.checked=true;

   });

  },

  uncheck:function(){

      return this.each({

      this.checked=false;

    });

  }

});

页面调用如下：

$('input[type=checkbox]').check();

$('input[type=checkbox]').uncheck();

3、扩展

代码如下：

$.xy = {

add:function(a,b){return a+b;} ,

minus:function(a,b){return a-b;},

voidMethod:function(){ alert("void"); }

};

var i = $.xy.add(,);

var m = $.xy.minus(,);

$.xy.voidMethod();

具体应用见\Public\src\fb\m\loveBao\js\detial.js

提示：当我们研究大牛的代码的时候，前面经常看到有“；”，那是为了避免代码合并等不必要的错误。

var testFunction=function(){

}

(function(){

})()

由于testFunction()这个函数后面没有加分号，导致代码出错，为了避免这类情况的发生，通常这么写！

;(function(){

})()

例如，有些朋友为了避免jquery和zeptojs冲突，将jquery的前缀“$”,修改为“jQuery”，还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行，那么我们的做法是，把代码包裹在如下里面：

;(function($,window,document,undefined){

    //我们的代码。。

})(jQuery,window,document);

JQ插件标准的封装---闭包

<script type="text/javascript">

    (function ($) {

        //这里放入插件代码

    })(jQuery);

</script>

这是jQuery官方的插件开发规范，这样写是作用是：
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’

这段代码在被解析时会形同如下代码：

var jq = function($) {

    // Code goes here

};

jq(jQuery);

巴特西

jQuery插件开发jQuery.extend(object)和jQuery.fn.extend()

最新文章

热门文章