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(3,2); 
var j = $.minus(3,2);

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(3,2); 
var m = $.xy.minus(3,2); 
$.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);

来源：oschina

链接：https://my.oschina.net/u/4347225/blog/3719128

标签

jquery

javascript