456主机测评
这几天看了下jquery源码，有些收获，解答了我以前对jQuery的疑问，现在我把收获分享给大家。
一、jQuery为何弄成自执行函数，以及为何在引用了jquery文件之后，可以通过$或jQuery来调用其方法
(function (window, undefined) {....})(window); $.isFunction();
1） 弄成自执行函数： 防止在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局，只在后面暴露 $ 和 jQuery 这 2 个变量给外界，尽量的避开变量冲突。
2）可以通过$或jQuery来调用：在jQuery源码里有这么一句，将jQuery赋值给window下的jQuery和window下的.$。
window.jQuery = window.$ = jQuery;
二、为什么需要加上undefined当做参数？
(function (window, undefined) {....})(window);
jQuery内部有用到undefined作为判断条件，如果在外部改变了undefined的值，会影响jQuery内部判断，所以参数里加上undefined就是确保undefined就是undefined，为什么这么说？在早期浏览器全局的undefined是可以被赋值的，可以当做变量使用，比如IE9以下，不过在新版浏览器里则没有这个问题，观察jQuery2.0+发现没有出现把undefined作为参数传递，因为2.0+不再支持IE9以下浏览器了。
三、为何不用new就能调用jQuery的原型方法，比如$("#id").val()
1 (function (window, undefined) { 2 var 3 // ... 4 jQuery = function (selector, context) { 5 //实例化方法 jQuery() 实际上是调用了原型方法 jQuery.fn.init 6 return new jQuery.fn.init(selector, context, rootjQuery); 7 }; 8 // jQuery.prototype 即是 jQuery 的原型，挂载在上面的方法，即可让所有生成的 jQuery 对象使用 9 jQuery.fn = jQuery.prototype = { 10 // 实例化化方法，这个方法可以称作 jQuery 对象构造器 11 init: function (selector, context, rootjQuery) { 12 // ... 13 } 14 } 15 //这里将jQuery的原型赋值给init原型,让init实例化之后可以调用jQuery的原型方法 16 //这也就是为什么实例化init可以调用jQuery的原型val()方法 比如：$("#id").val() 17 jQuery.fn.init.prototype = jQuery.fn; 18 })(window);
四、jQuery.fn.extend 与 jQuery.extend有什么区别
1）jQuery.extend(object) 为扩展 jQuery 类本身，为类添加新的静态方法；
2）jQuery.fn.extend(object) 给 jQuery 对象添加实例方法，也就是通过这个 extend 添加的新方法，实例化的 jQuery 对象都能使用，因为它是挂载在 jQuery.fn 上的方法（jQuery.fn =jQuery.prototype ）。
官方解释是：
1）jQuery.extend(): 把两个或者更多的对象合并到第一个当中，
2）jQuery.fn.extend()：把对象挂载到 jQuery 的 prototype 属性，来扩展一个新的 jQuery 实例方法。
使用 jQuery.extend() 扩展的静态方法，我们可以直接使用 $.xxx 进行调用（xxx是扩展的方法名），像c#中的静态方法。
而使用 jQuery.fn.extend() 拓展的实例方法，需要使用 $().xxx 调用，像c#中的实例方法。
1 // 扩展合并函数 2 // 合并两个或更多对象的属性到第一个对象中，jQuery 后续的大部分功能都通过该函数扩展 3 // 虽然实现方式一样，但是要注意区分用法的不一样，那么为什么两个方法指向同一个函数实现，但是却实现不同的功能呢, 4 // 阅读源码就能发现这归功于 this 的强大力量 5 // 如果传入两个或多个对象，所有对象的属性会被添加到第一个对象 target 6 // 如果只传入一个对象，则将对象的属性添加到 jQuery 对象中，也就是添加静态方法 7 // 用这种方式，我们可以为 jQuery 命名空间增加新的方法，可以用于编写 jQuery 插件 8 // 如果不想改变传入的对象，可以传入一个空对象：$.extend({}, object1, object2); 9 // 默认合并操作是不迭代的，即便 target 的某个属性是对象或属性，也会被完全覆盖而不是合并 10 // 如果第一个参数是 true，则是深拷贝 11 // 从 object 原型继承的属性会被拷贝，值为 undefined 的属性不会被拷贝 12 // 因为性能原因，JavaScript 自带类型的属性不会合并 13 jQuery.extend = jQuery.fn.extend = function () { 14 var src, copyIsArray, copy, name, options, clone, 15 target = arguments[0] || {}, 16 i = 1, 17 length = arguments.length, 18 deep = false; 19 20 // Handle a deep copy situation 21 // target 是传入的第一个参数 22 // 如果第一个参数是布尔类型，则表示是否要深递归， 23 if (typeof target === "boolean") { 24 deep = target; 25 target = arguments[1] || {}; 26 // skip the boolean and the target 27 // 如果传了类型为 boolean 的第一个参数，i 则从 2 开始 28 i = 2; 29 } 30 31 // Handle case when target is a string or something (possible in deep copy) 32 // 如果传入的第一个参数是 字符串或者其他 33 if (typeof target !== "object" && !jQuery.isFunction(target)) { 34 target = {}; 35 } 36 37 // extend jQuery itself if only one argument is passed 38 // 如果参数的长度为 1 ，表示是 jQuery 静态方法 39 if (length === i) { 40 //此时的this：如果外部调用的是jQuery.extend方法，则this指jQuery类，扩展到jQuery类上 41 //而如果是jQuery.fn.extend方法则this指jQuery原型,扩展到jQuery的原型上 42 target = this; 43 --i; 44 } 45 46 // 可以传入多个复制源 47 // i 是从 1或2 开始的 48 for (; i < length; i++) { 49 // Only deal with non-null/undefined values 50 // 将每个源的属性全部复制到 target 上 51 if ((options = arguments[i]) != null) { 52 // Extend the base object 53 for (name in options) { 54 // src 是源（即本身）的值 55 // copy 是即将要复制过去的值 56 src = target[name]; 57 copy = options[name]; 58 59 // Prevent never-ending loop 60 // 防止有环，例如 extend(true, target, {'target':target}); 61 if (target === copy) { 62 continue; 63 } 64 65 // Recurse if we're merging plain objects or arrays 66 // 这里是递归调用，最终都会到下面的 else if 分支 67 // jQuery.isPlainObject 用于测试是否为纯粹的对象 68 // 纯粹的对象指的是 通过 "{}" 或者 "new Object" 创建的 69 // 如果是深复制 70 if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) { 71 // 数组 72 if (copyIsArray) { 73 copyIsArray = false; 74 clone = src && jQuery.isArray(src) ? src : []; 75 } else { 76 clone = src && jQuery.isPlainObject(src) ? src : {}; 77 } 78 79 // Never move original objects, clone them 80 // 递归 81 target[name] = jQuery.extend(deep, clone, copy); 82 83 // Don't bring in undefined values 84 // 最终都会到这条分支 85 // 简单的值覆盖 86 } else if (copy !== undefined) { 87 target[name] = copy; 88 } 89 } 90 } 91 } 92 93 // Return the modified object 94 // 返回新的 target 95 // 如果 i < length ，是直接返回没经过处理的 target，也就是 arguments[0] 96 // 也就是如果不传需要覆盖的源，调用 $.extend 其实是增加 jQuery 的静态方法 97 return target; 98 };
View Code
最后做一个模拟JQuery Demo供大家学习
1 (function (window, undefined) { 2 var jQuery = function () { 3 return new jQuery.fn.init(); 4 }; 5 jQuery.fn = jQuery.prototype = { 6 add: function () { console.log("add"); }, 7 remove: function () { console.log("remove"); }, 8 init: function () { console.log("init"); return this; } 9 }; 10 jQuery.fn.init.prototype = jQuery.fn; 11 //添加扩展(静态、实例)方法【demo】 12 //传入{methodName:function(){}} 13 jQuery.extend = jQuery.fn.extend = function (obj) { 14 for (var item in obj) { 15 this[item] = obj[item]; 16 } 17 } 18 window.jQuery = window.$ = jQuery; 19 })(window)
1 $.extend({ staticMethod: function () { console.log("staticMethod"); } }); 2 $.fn.extend({ instanceMethod: function () { console.log("instanceMethod"); } }); 3 $.staticMethod(); 4 $().instanceMethod();
输出：
- 海报
