jquery 源码解读
jquery 源码大概10000多行,每行都会解析可能不是很现实,可能也只会更新一版,这都看心情。
(function(global,factory){...})()
在这部分主要就是匿名函数
注释:匿名函数的好处:自执行里面所有东西都是局部的,防止和代码冲突。
那如何获取匿名函数里面的方法和属性呢?
可以在里面挂在一个对象上,比如挂在windows上面
(function (){
function abc (){}
window.abc = abc
})()
abc()
"use strict"
js的严禁模式;
在js严格模式,对js做了一些限制,主要有以下作用:
1.消除js语法不合理,不严谨的,减少怪异行为
2.消除代码运行的一些不安全之处
3.提高编译效率,加强运行速度。
4.对未来新版本做好铺垫。
语法的改变:
1.全局命名必须是 v=1 其他变量var
2.禁止使用with 创设 eval作用域。
3.禁止this 指向全局window
4.禁止内部函数遍历调用栈
function f1(){
f1.caller 报错
f1.arguments 报错
}
5.禁止删除变量,只有在configurable 设置为true
6.使用get方法赋值会报错。
var o = {
get v(){return 1;}
}
o.v() =2 //报错
7.删除一个不可删除的属性, delete Object.prototype.
8.重命名错误
9.参数名重复错误。
10.禁止八进制
11.对arguments 参数做了限制。比如不能复制,不能追踪参数变化,不能用callee。
12.函数声明在顶层,不许在非函数代码内声明函数
13.保留字
( typeof window !== "undefined" ? window : this, function( window, noGlobal )
这句话很清楚 判断window 返回类型。
typeof 可以判断 object undefined null boolean number string Symbol functuon在ECMA-262条款中实现了
var arr = [];
var document = window.document;
var getProto = Object.getPrototypeOf;
var slice = arr.slice;
var concat = arr.concat;
var push = arr.push;
var indexOf = arr.indexOf;
var class2type = {};
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty;
var fnToString = hasOwn.toString;
var ObjectFunctionString = fnToString.call( Object );
var support = {};
上面声明了一些方法和一些变量。
slice 这个方法,数组中返回选定得元素。 用法arr.slice(start,end) start -1 最后一个元素。 这个方法会返回一个新数组。
var isFunction = function isFunction( obj ) {
// Support: Chrome <=57, Firefox <=52
// In some browsers, typeof returns "function" for HTML <object> elements
// (i.e., `typeof document.createElement( "object" ) === "function"`).
// We don't want to classify *any* DOM node as a function.
return typeof obj === "function" && typeof obj.nodeType !== "number";
};
var isWindow = function isWindow( obj ) {
return obj != null && obj === obj.window;
};
var preservedScriptAttributes = {
type: true,
src: true,
noModule: true
};
function DOMEval( code, doc, node ) {
doc = doc || document;
var i,
script = doc.createElement( "script" );
script.text = code;
if ( node ) {
for ( i in preservedScriptAttributes ) {
if ( node[ i ] ) {
script[ i ] = node[ i ];
}
}
}
doc.head.appendChild( script ).parentNode.removeChild( script );
}
function toType( obj ) {
if ( obj == null ) {
return obj + "";
}
// Support: Android <=2.3 only (functionish RegExp)
return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call( obj ) ] || "object" :
typeof obj;
}
/* global Symbol */
// Defining this global in .eslintrc.json would create a danger of using the global
// unguarded in another place, it seems safer to define global only for this module
一些代码,工具类吧 …
version = "3.3.1", 版本号
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
},
翻译是构造函数的增强。可能是用来报错的吧。
jQuery.fn = jQuery.prototype = {
jquery: version,
constructor: jQuery,
length: 0, //在这里看了下这个对象的长度.
toArray: function() {
return slice.call( this );
}, 居然是操作DOM的方法.尴尬...
get: function( num ) {
if ( num == null ) {
return slice.call( this );
}
return num < 0 ? this[ num + this.length ] : this[ num ];
},
pushStack: function( elems ) {
// Build a new jQuery matched element set
var ret = jQuery.merge( this.constructor(), elems );
// Add the old object onto the stack (as a reference)
ret.prevObject = this;
// Return the newly-formed element set
return ret;
},
// Execute a callback for every element in the matched set.
each: function( callback ) {
return jQuery.each( this, callback );
},
map: function( callback ) {
return this.pushStack( jQuery.map( this, function( elem, i ) {
return callback.call( elem, i, elem );
} ) );
},
slice: function() {
return this.pushStack( slice.apply( this, arguments ) );
},
first: function() {
return this.eq( 0 );
},
last: function() {
return this.eq( -1 );
},
eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 );
return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
},
end: function() {
return this.prevObject || this.constructor();
},
// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: arr.sort,
splice: arr.splice
};
上面的方法都是DOM操作的。很幽默哦~ 当然当年jquery最主要的核心就是选择器,那么当年最辉煌的就是dom操作吧。
jQuery.extend = jQuery.fn.extend = function() {
代码补充,如果之前写了 那么将会被覆盖~
上一篇: jQuery源码剖析--jQuery入口函数-init实现
下一篇: jquery源码解读二