$.extend()系列详解

这些纯属个人一些工作的过程中,随便瞎写的,如果有不合理不对的地方,请忽喷。以前有关jquey像$.extend(),,$.fn.extend,,(function($){….})(jQuery)完全是一头雾水,都不知道是什么意思,后来项目中用到了一个对列的统计,没办法,得去看easyui中的源码,参考写了一个。 但看了后发现里面很多这样的使用,又不得不去看了,到网上查了一些资料,随便记录下,方便以后翻翻。
1、$.extend()
咋一看上去像java中的继承是吧!其实这么理解也没错。一般我们用到这个都是往jquery全局中添加一个静态的方法:
$.extend({
    test:function(value){
        alert(value);
    }
});
这样写了以后,我们就可以
$.test("admin");
直接调用方法了,其实说白了就是在jquery中添加了一个方法,还是比较容易理解的。
2、$.fn.extend()则是为每一个实例添加一个实例方法。
$.fn.extend({
    test:function(value){
        alert(value);
    }
});
调用:$("#test").test("admin"),也就是页面中的某个控件调用这个方法。
像easyui里面的datagrid,也就是一个表格。里面的一些方法都是这样的,在这种情况下,我们调用方法的时候需要获取jsp或者html中的某个ID,,也就是实例:
$.fn.datagrid.methods = {
    getPanel : function(jq) {
       return $.data(jq[0], "datagrid").panel;
    }
}
这是easyui中源码的一个获取面板对象的方法,我们调用的时候,则可以直接通过表格ID然后调用就行了
$("table").datagrid('getPanel');

3、function($){….})(jQuery)
function($){….},这不就是一个匿名的函数吗?但是它的形参比较奇怪,是$,这里主要是为了不与其它的库冲突。
这样我们就比较容易理解第一个括号内的内容就是定义了一个匿名函数,我们在调用函数的时候,都是函数名后边加上括号以及实参,但是由于操作符的优先级我们定义的匿名函数也需要用()括起来。
现在我想大家已经很清楚这句话是什么意思了吧。第一个括号表示定义了一个匿名函数,然后第二个函数表示为该函数传递的参数,整个结合起来意思就是,定义了一个匿名函数,然后又调用该函数,该函数的实参为jQuery。
相当于:function fun($){…};fun(jQuery);
这种方法多用于存放开发的插件,执行其中的代码时,Dom对象并不一定加载完毕。于此相反的是$(function(){}),这种方法在使用时页面的Dom对象已经加载完毕了。事实上该方法的全写是:$(document).ready(function(){});

你可能感兴趣的:($.extend()系列详解)