打狗棒法之《歹挑狗身》"/>
Jquery中$.extend()的用法，打狗棒法之《歹挑狗身》
1. jquery.extend(), 为jQuery类添加类方法
第一种方式用jQuery扩展，比如：
jQuery.extend({min: function(a, b) {return a < b ? a : b},max: function(a, b) {return a > b ? a : b}});console.log(jQuery.min(1, 4));console.log(jQuery.max(22, 2));
输出结果：
第二种方法，用$扩展，比如：
(function($) {$.extend({a1: function() {$("#log").append("a1_function");},a2: function() {$("#log").append("a2_function");}});})(jQuery);
调用直接用$.类名
//调用直接用$.类名$.a1();$.a2();
页面输出
2. jquery.extend(), 将两个或更多对象的内容合并到第一个对象。
w3c中解释
当我们提供两个或多个对象给 . e x t e n d ( ) ， 对 象 的 所 有 属 性 都 添 加 到 目 标 对 象 （ t a r g e t 参 数 ） 。 如 果 只 有 一 个 参 数 提 供 给 .extend()，对象的所有属性都添加到目标对象（target参数）。 如果只有一个参数提供给 .extend()，对象的所有属性都添加到目标对象（target参数）。如果只有一个参数提供给.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。
例子1 合并两个对象，并修改第一个对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Extend</title><script src=".10.2/jquery.min.js"></script>
</head><body><div id="log"></div><script>var object1 = {apple: 0,banana: {weight: 52,price: 100},cherry: 97};var object2 = {banana: {price: 200},durian: 122};//第一种情况：合并两个对象，并修改第一个对象//在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，//那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。$.extend(object1, object2); //{"apple":0,"banana":{"price":200},"cherry":97,"durian":122}$("#log").append(JSON.stringify(object1));</script>
</body>
</html>
例子2 采用递归方式合并两个对象，并修改第一个对象。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Extend</title><script src=".10.2/jquery.min.js"></script>
</head><body><div id="log"></div><script>var object1 = {apple: 0,banana: {weight: 52,price: 100},cherry: 97};var object2 = {banana: {price: 200},durian: 122};//第二种情况：采用递归方式合并两个对象，并修改第一个对象。//如果为false，则优先第一个元素，后面的不会覆盖前面的//如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。//$.extend(true, object1, object2); //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":122}$.extend(false, object1, object2); //{"apple":0,"banana":{"weight":52,"price":100},"cherry":97}$("#log").append(JSON.stringify(object1));</script></body></html>
例子3 合并 defaults 和 options 对象，并且不修改 defaults 对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Extend</title><script src=".10.2/jquery.min.js"></script>
</head><body><div id="log"></div><script>var defaults = {validate: false,limit: 5,name: "defaults_name"};var option = {validate: true,name: "option_name"// 如果写成 name = "option_name" ，会报错如下//Uncaught SyntaxError: Invalid shorthand property initializer};//不修改原始数据var setting = $.extend({}, defaults, option);//第三种情况：合并 defaults 和 options 对象，并且不修改 defaults 对象$("#log").append("<div><b>defaults ---</b>" + JSON.stringify(defaults) + "</div>"); //defaults ---{"validate":false,"limit":5,"name":"defaults_name"}$("#log").append("<div><b>option ---</b>" + JSON.stringify(option) + "</div>"); //option ---{"validate":true,"name":"option_name"}$("#log").append("<div><b>setting ---</b>" + JSON.stringify(setting) + "</div>"); //setting ---{"validate":true,"limit":5,"name":"option_name"}</script>
</body>
</html>
期间犯了一个错误
// 如果写成 name = “option_name” ，会报错如下
//Uncaught SyntaxError: Invalid shorthand property initializer
也就是说键值对不能用等于号！
3. jQuery.fn.extend() 和jQuery.extend()的区别
把对象挂载到 jQuery 的 prototype 属性，来扩展一个新的 jQuery 实例方法，也就是通过这个 extend 添加的新方法，实例化的 jQuery 对象都能使用，因为它是挂载在 jQuery.fn 上的方法。
查看jQuery源码可发现，jQuery.fn = jQuery.prototype。jQuery.fn挂在原型上，由于对原型的修改会影响所有实例，因此fn上的方法会对每一个jQuery实例有效。
对jQuery.fn的扩展，就是为jQuery类添加成员函数，jQuery类的实例可以使用这个成员函数。
比如：
jQuery.fn.extend({clickFunc: function() {$(this).click(function() {alert($(this).text());});}});
调用
$("#log").clickFunc(); //输出文本框的文本
jQuery.extend()是为jQuery类添加类方法（静态方法），需要通过jQuery类来调用（直接使用 $.xxx 调用）；
jQuery.fn.extend()是为jQuery类添加成员函数（实例方法），所有jQuery实例都可以直接调用（需要使用 $().xxx 调用）。
整合$.extend的常用方法于一起：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Extend</title><script src=".10.2/jquery.min.js"></script>
</head><body><div id="log"></div><script>//扩展jquery的方法//(function($){})(jQuery)(function($) {$.extend({a1: function() {$("#log").append("a1_function");},a2: function() {$("#log").append("a2_function");}});})(jQuery);jQuery.extend({min: function(a, b) {return a < b ? a : b},max: function(a, b) {return a > b ? a : b}});jQuery.fn.extend({clickFunc: function() {$(this).click(function() {alert($(this).text());});}});console.log(jQuery.min(1, 4));console.log(jQuery.max(22, 2));var object1 = {apple: 0,banana: {weight: 52,price: 100},cherry: 97};var object2 = {banana: {price: 200},durian: 122};var defaults = {validate: false,limit: 5,name: "defaults_name"};var option = {validate: true,name: "option_name"// 如果写成 name = "option_name" ，会报错如下//Uncaught SyntaxError: Invalid shorthand property initializer};//不修改原始数据var setting = $.extend({}, defaults, option);//第一种情况：合并两个对象，并修改第一个对象//在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，//那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。//$.extend(object1, object2); //{"apple":0,"banana":{"price":200},"cherry":97,"durian":122}//第二种情况：采用递归方式合并两个对象，并修改第一个对象。//如果为false，则优先第一个元素，后面的不会覆盖前面的//如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。//$.extend(true, object1, object2); //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":122}$.extend(false, object1, object2); //{"apple":0,"banana":{"weight":52,"price":100},"cherry":97}//$("#log").append(JSON.stringify(object1));//第三种情况：合并 defaults 和 options 对象，并且不修改 defaults 对象$("#log").append("<div><b>defaults ---</b>" + JSON.stringify(defaults) + "</div>"); //defaults ---{"validate":false,"limit":5,"name":"defaults_name"}$("#log").append("<div><b>option ---</b>" + JSON.stringify(option) + "</div>"); //option ---{"validate":true,"name":"option_name"}$("#log").append("<div><b>setting ---</b>" + JSON.stringify(setting) + "</div>"); //setting ---{"validate":true,"limit":5,"name":"option_name"}//调用直接用$.类名$.a1();$.a2();$("#log").clickFunc(); //输出文本框的文本</script></body></html>
更多推荐
Jquery中$.extend()的用法,打狗棒法之《歹挑狗身》
发布评论