转载请注明出处，如果喜欢请给个赞，谢谢O(∩_∩)O
- 闭包
1.1 作用
1.2 参数 - 基本结构
- 入口函数传参的判断与处理
3.1 基本参数类型
3.2 特殊参数类型
0. 前言
jQuery发展至今已经更新到v3.1.1了，那么首先我们要简单知道jQuery的版本之间的几个小区别。
- 最早的1版本是兼容IE6/7/8的；
- 到2版本的时候舍弃了兼容；
- 3版本增加了一些模块化的内容；
1. 闭包
1.1 作用
通过看代码发现，不论是jQuery的哪个版本，代码都是写在一个闭包里(function(){})()/(function(){}())。这是为了防止和其他的框架发生冲突。
1.2 参数
jQuery的闭包给自己传进一个window参数，原因有二，1）为了方便压缩代码，2）为了提升查找效率。
闭包的形参当中还有一个undefined，也是为了方便压缩代码，另外，因为在IE9以下浏览器中的undefined值是可以修改的，所以也为了保证jQuery中使用的undefined不被修改。
2. 基本结构
(function (window, undefined) {
// 提供给外界的工厂函数
var jQuery = function (selector) {
return new jQuery.fn.init(selector);
};
// 重新设置jQuery的原型对象并添加init方法
jQuery.prototype = {
constructor: jQuery,
init: function (selector) {
}
};
// 动态为jQuery添加了一个属性fn并赋值为jQuery的原型对象
jQuery.fn = jQuery.prototype;
// 将init原型设置为myjQuery原型
jQuery.fn.init.prototype = jQuery.fn;
// 将内部的变量暴露给外界使用
window.jQuery = window.$ = jQuery
}(window));
3. 入口函数传参的判断与处理
3.1 基本参数类型
入口函数传入的参数类型不同，得到的实例也不同（废话- -!），通过分析，有以下这些情况：
1.传入 '' null undefined NaN 0 false -->> 返回一个空的实例
2.传入选择器 -->> 字符串类型，查找到的元素作为属性值存储在返回的实例中
3.传入html片段 -->> 字符串类型，创建的代码片段对应的一级元素作为属性值存储在...
4.传入数组 -->> 把数组中的每一个元素作为属性值存储在...
5.传入伪数组 -->> 把数组中的每一个元素作为属性值存储在...
6.传入对象 -->> 把传入的内容当做属性值存储在...
7.传入DOM -->> 把传入的内容当做属性值存储在...
8.传入基本数据类型 -->> 把传入的内容当做属性值存储在...
通过上边的8种情况返回的结果来看，又可整合成4种情况：1) 传入 ''、null、undefined、NaN 、0、false；2) 传入字符串；3) 传入数组；4) 其它
现在让我们来逐一分析吧！先搭建好init方法：
var init = function (selector) {
// 这里的this指向实例
};
jQuery.prototype.init = init;
3.1.1 ''、null、undefined、NaN 、0、false
这几个特殊值很好找共同点，就是他们的非都是true，所以只需返回即可。
if (!selector) {
return this;
}
3.1.2 字符串
思路：首先判断传进参数是不是字符串，之后分两种情况，判断是不是HTML代码，如果不是则按照选择器处理。
else if (isString(selector)) {
// 去掉首尾空格
selector = trim(selector);
// 判断是否为html片段
if (isHTML(selector)) {
var div = document.createElement('div');
div.innerHTML = selector;
[].push.apply(this, div.children); /*** 注释1 ***/
}
// 选择器
else {
var nodes = document.querySelectorAll(selector);
[].push.apply(this, nodes);
}
return this;
}
// 判断是否为字符串
function isString(str) {
return typeof str === 'string';
}
// 字符串去首尾空格
function trim(str) {
if (str.trim) { //判断当前浏览器是否支持trim方法
return str.trim();
} else {
return str.replace(/^\s+|\s+$/g, '');
}
}
注释1的代码[].push.apply(this, div.children)相当于以下代码：
for (var i = 0; i < div.children.length; i++) {
this[i] = div.children[i];
}
this.length = div.children.length;
3.1.2 数组
思路：不管是真数组还是伪数组，它们都是对象，但是要判断传进来如果是对象但又不能是function也不能是window。确定好是一个符合条件的对象后，再来了解真伪数组的判断方法。考虑到兼容问题， 判断数组 的最好方式是 借用Object上的toString方法，如果是‘[object Array]’则为数组。而判断伪数组则需要两个条件，一个是伪数组有个length属性，另一个是有length值-1属性。
else if(isLikeArray(selector)){
var array = [].slice.call(selector);
[].push.apply(this, array);
return this;
}
// 判断是否为真数组或伪数组
function isLikeArray(array){
if (!isObject(array) || isFunction(array) || isWindow(array)){
return false;
}
if({}.toString.call(array) === '[object Array]'){
return true;
}
else if('length' in array && array.length-1 in array){
return true;
}
}
// 判断是否为对象
function isObject(obj){
return obj !== null && typeof obj === 'object';
};
// 判断是否为window
function isWindow(w){
return w !== window.window;
}
3.1.3 其它
另外的几种情况：普通对象、DOM、基本类型（字符串、false除外），都是把传进来的值当做一个属性值返回给实例。
this[0] = selector;
this.length = 1;
return this;
3.2 特殊参数类型
细心的同学会发现，上边分析的这些情况没有function，因为这个相对来讲比较特别所以单独来讲。
我们在使用jQuery时会将代码写在$(function(){})()里，而这显然是传进里一个函数，所以当给入口传进一个函数时的作用是监听文档是否加载完毕。
最早我们了解到的监听页面是否加载完毕是使用onload，onload会在页面包含所有文件资源都加载完成后触发。因此，实际上这个处理效率不是很高。
其实在JS中还有一种监听方式，DOMContentLoaded，仅在DOM加载完后就能触发，减少了加载图像等外部资源的时间。
else if(jQuery.isFunction(selector)){
jQuery.ready(selector);
}
function isFunction(fn){
return typeof fn == 'function';
},
function ready(fn){
if(document.readyState == 'complete'){
fn();
}
if(document.addEventListener){
document.addEventListener('DOMContentLoaded', fn);
}else{
document.attachEvent('onreadystatechange', function(){
if(document.readyState == 'complete'){
fn();
}
})
}
}
网友评论