jquery插件之jquery.extend和jquery.fn.extend的区别

jquery.extend

jquery.extend()，是拓展jquery这个类，即可以看作是jquery这个类本身的静态方法，例如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>简单插件学习一</title>
    <script src="../../Script/jquery.js"></script>
</head>
<body>
    <input type="text" id="txtName" />
    <script type="text/javascript">
       ;(function ($) {
            $.extend({
                test: function () {
                    alert("这是我测试的方775法3哈");
                }
            });
        })(jQuery);
       
       
       $.test();
      // $("#txtName").test();//不可以调用 
    </script>
</body>
</html>

即通过$.extend,扩充了Jquery本身，例如jquery上增加了test方法，只能其本身可以调用，跟具体的实例化对象没有一点关系，所以不可以用对象（具体的Dom节点）去调用。

jquery.fn.extend

从字面理解这个方法，就是拓展了jquery.fn的方法，而jquery.fn是啥玩意了，源码如下：

jQuery.fn = jQuery.prototype = {
    // The current version of jQuery being used
    jquery: version,

    constructor: jQuery,

    // Start with an empty selector
    selector: "",

    // The default length of a jQuery object is 0
    length: 0,

    toArray: function() {
        return slice.call( this );
    },
     //.......
}

jquery.fn=jquery.prototype，就是原型，jquery.fn.extend扩展的就是jquery对象（原型的）方法，对象是啥？就是类的实例化，例如：$("#txtName")，就是jquery的对象

也就是说，jquery.fn.extend拓展方法，要用在jquery对象上才行，一般插件的制作是用此方法进行扩展的。例如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>简单插件学习一</title>
    <script src="../../Script/jquery.js"></script>
</head>
<body>
    <input type="text" id="txtName" />
    <script type="text/javascript">
       ;(function ($) {
            $.extend({
                test: function () {
                    alert("这是我测试的方775法3哈");
                }
            });

            $.fn.test2 = function () {
                alert("这是我的方法3的");
                $.fn.test2.sn.add();
            }

            $.fn.test2.sn = {
                defaults: {
                    dir: "H",
                    speed: 500
                },

                add: function () {
                    alert("滚动方式:" + this.defaults.dir);
                }
            }

        })(jQuery);
       
       
       $.test();
      $("#txtName").test2();
    </script>
</body>
</html>

jquery.extend()方法主要用于扩展全局函数，例如$.ajax这种，例如上面代码中的test方法，只可以通过jquery本身去调用即：$.test(), 而不可以通过 jquery 对象去调用。

jquery.fn.extend(),大部分插件都是用此方法的，例如：$("#txtName").test2();

除此之外，我们写jquery插件，还经常遇到一些参数传递的问题，这些一般都是通过jquery.extend方法传递的，下面我们就一起去了解一下，例如：

$.extend(dest,src1,src2,src3....)

它的含义是将src1,src2,src3等合并到dest中，并返回到dest，但是合并之后改变dest的结果,所以一般推荐以下方式：

var setting=$.extend({},src1,src2,src3);//也就是用{}作为dest的参数

例如：

 var setting = $.extend({}, { name: "alice", age: 28 }, { name: "stone", sex: "boy" });
 console.log(setting);

后面的参数如果和前面的参数存在相同的名称，则会覆盖前面的参数值，合并后的结果为：

jquery插件之jquery.extend和jquery.fn.extend的区别

例如插件中一般用到的此方法：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>简单插件学习一</title>
    <script src="../../Script/jquery.js"></script>
</head>
<body>
    <input type="text" id="txtName" />
    <script type="text/javascript">
       ;(function ($) {
            $.fn.test2 = function (settings) {
                settings = $.extend({}, $.fn.test2.sn.defaults, settings);
                console.log(settings);
                $.fn.test2.sn.add();
            }

            $.fn.test2.sn = {
                defaults: {
                    dir: "H",
                    speed: 500
                },

                add: function () {
                    alert("滚动方式:" + this.defaults.dir);
                }
            }

        })(jQuery);
       
       $("#txtName").test2({name:"alicetest",dir:"V"});
    </script>
</body>
</html>

View Code