入门前端也一年了，从来没有仔细看过jquery的源码，最近一直在搞angular4,抽点时间写下这个
(function (global,factory){
})(typeof window != 'undefined' ? window : this , function(window,noGlobal){
})
这是jquery的入口，一个自执行函数，相信有基础的都懂。
(function (global,factory){
"use strict";
if ( typeof module === "object" && typeof module.exports === "object" ) {
module.exports = global.document ?
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( "jQuery requires a window with a document" );
}
return factory( w );
};
} else {
factory( global );
}
})(typeof window != 'undefined' ? window : this , function(window,noGlobal){
})
// For environments that do not have a window with a document
// (such as Node.js), expose a factory as module.exports.
解释一下，如果是node环境，没有window对象和document就用commonjs,利用module.exports导出模块
接下来大家比较关注应该是这个factory工厂函数，我们来看一下里面的内容
function(window,noGlobal){
var version = "3.2.1",
// Define a local copy of jQuery
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
},
}
装个逼，我用的是最新的Jq(3.2.1)
看到了关键字Jquery，这个方法一看就是获取dom节点的，有2个参数：
1.selector:选择器 可以是字符串 正则 等一系列的东东
2.context:上下文 这个选择器是在那个节点下面找到的，默认是body
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
},
var init = jQuery.fn.init = function( selector, context, root ) {
};
init.prototype = jQuery.fn;
jQuery.fn = jQuery.prototype = {
}
这段代码如果原型链没有过关的同学看起来比较费劲,简单解释一下吧
init.prototype = jQuery.fn = jQuery.prototype 这个连等都看的懂吧
然后 init = jQuery.fn.init 那么
new jQuery.fn.init() == new init() == new Jquery()
其实这里大费周章 new jQuery.fn.init( selector, context ) 就是返回Jquery一个实例而已
接下来我们比较关心的是 jQuery.fn.init = function( selector, context, root ) {
};里面的代码
var rootjQuery,
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,
init = jQuery.fn.init = function( selector, context, root ) {
var match, elem;
if ( !selector ) {
return this;
}
root = root || rootjQuery;
// Handle HTML strings
if ( typeof selector === "string" ) {
// HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
this[ 0 ] = selector;
this.length = 1;
return this;
// HANDLE: $(function)
} else if ( jQuery.isFunction( selector ) ) {
return root.ready !== undefined ?
root.ready( selector ) :
selector( jQuery );
}
return jQuery.makeArray( selector, this ); //把获得的dom节点转成数组
};
可以看得出来源码里面获得节点分3种：
1.selector 是字符串类型的
2.selector 是dom节点类型
3.selector 是函数类型
这里重点讲解一下字符串是如何处理的
var rsingleTag = ( /^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i ),
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;
if ( typeof selector === "string" ) {
if ( selector[ 0 ] === "<" &&
selector[ selector.length - 1 ] === ">" &&
selector.length >= 3 ) {
// 以html标签的形式
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}
// Match html or make sure no context is specified for #id
if ( match && ( match[ 1 ] || !context ) ) {
// HANDLE: $(html) -> $(array)
if ( match[ 1 ] ) {
context = context instanceof jQuery ? context[ 0 ] : context;
// Option to run scripts is true for back-compat
// Intentionally let the error be thrown if parseHTML is not present
jQuery.merge( this, jQuery.parseHTML(
match[ 1 ],
context && context.nodeType ? context.ownerDocument || context : document,
true
) );
return this;
// HANDLE: $(#id) 处理id选择器
} else {
elem = document.getElementById( match[ 2 ] );
if ( elem ) {
// Inject the element directly into the jQuery object
this[ 0 ] = elem;
this.length = 1;
}
return this;
}
// HANDLE: $(expr, $(...)) 利用内部的find方法寻找节点
} else if ( !context || context.jquery ) {
return ( context || root ).find( selector );
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
}
}
这一段看起来确实费劲，关于js里面强大的exec正则用法，大家自己可以研究
context = context instanceof jQuery ? context[ 0 ] : context; 判断context是否是jquery实例
下面来看jquery的原型里面有哪些代码
var version = "3.2.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 );
},
get: function( num ){
if ( num == null ) {
return slice.call( this );
}
return num < 0 ? this[ num + this.length ] : this[ num ];
},
pushStack: function( elems ) {
var ret = jQuery.merge( this.constructor(), elems );
ret.prevObject = this;
return ret;
},
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();
},
push: push,
sort: arr.sort,
splice: arr.splice
// 这里的push sort splice就是数组的方法
};
看到了吧 这里涵盖了所有jquery对象的方法
1.我们要把一个jq Dom对象转成数组，方便遍历,可以 $('').toArray()
2.获取节点中某一个可以用 $('****').get(index)
3.注意pushStack是一个很重要的函数,slice函数就用到了他
4.可以通过$('').slice(index) 截取部分dom元素
5.each map等函数在这里也能看到。
难道强大的Jquery原型上就这些方法，当然不是，我们接着看
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[ 0 ] || {},
i = 1,
length = arguments.length,
deep = false;
//大家记得这个函数吗 $.extend(true,obj1,obj2,obj3) 第一个参数为true表示深克隆
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[ i ] || {};
i++;
}
if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
target = {};
}
// 当没有传递bool值时 参数只有一个时 也就是$.fn.extend({})
if ( i === length ) {
target = this;
i--;
}
for ( ; i < length; i++ ) {
if ( ( options = arguments[ i ] ) != null ) {
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
if ( target === copy ) {
continue;
}
// 这就是深克隆的情况
if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
( copyIsArray = Array.isArray( copy ) ) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && Array.isArray( src ) ? src : [];
} else {
clone = src && jQuery.isPlainObject( src ) ? src : {};
}
target[ name ] = jQuery.extend( deep, clone, copy );
// 这种情况就实现了jquery原型方法的拓展
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
return target;
};
有了以上代码，我们这样玩一哈
$.fn.extend({
say:function(){
console.log(this.nodeName)
},
hasChild:function(ele){
return $('ele this').length > 0
}
})
上面2个方法适用于任何jq对象，每个jq对象都有say方法，打印自己的nodeType，还有个hasChild方法判断是否有某个子节点。
那我们来看看jquery源码里面对原型上作了哪些扩展
jQuery.fn.extend( {
find: function( selector ) {
var i, ret,
len = this.length,
self = this;
if ( typeof selector !== "string" ) {
return this.pushStack( jQuery( selector ).filter( function() {
for ( i = 0; i < len; i++ ) {
if ( jQuery.contains( self[ i ], this ) ) {
return true;
}
}
} ) );
}
ret = this.pushStack( [] );
for ( i = 0; i < len; i++ ) {
jQuery.find( selector, self[ i ], ret );
}
return len > 1 ? jQuery.uniqueSort( ret ) : ret;
},
filter: function( selector ) {
return this.pushStack( winnow( this, selector || [], false ) );
},
not: function( selector ) {
return this.pushStack( winnow( this, selector || [], true ) );
},
is: function( selector ) {
return !!winnow(
this,
typeof selector === "string" && rneedsContext.test( selector ) ?
jQuery( selector ) :
selector || [],
false
).length;
}，
addBack: function( selector ) {
return this.add( selector == null ?
this.prevObject : this.prevObject.filter( selector )
);
}
} );
是不是看到了很多熟悉的jq方法，然而这些方法是被扩展进去的
注意find()方法是递归查找，会一直找下去，效率并不高。
addBack()方法的源码就在这
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$( "li.third-item" ).nextAll().addBack()
.css( "background-color", "red" );
这里就不再赘述了，大家可以到源码中自行查找。
下面说一个经常见得工具方法 $.extend()
jQuery.extend( {
isFunction: function( obj ) {
return jQuery.type( obj ) === "function";
},
isWindow: function( obj ) {
return obj != null && obj === obj.window;
},
isNumeric: function( obj ) {
// As of jQuery 3.0, isNumeric is limited to
// strings and numbers (primitives or objects)
// that can be coerced to finite numbers (gh-2662)
var type = jQuery.type( obj );
return ( type === "number" || type === "string" ) &&
// parseFloat NaNs numeric-cast false positives ("")
// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
// subtraction forces infinities to NaN
!isNaN( obj - parseFloat( obj ) );
},
isPlainObject: function( obj ) {
var proto, Ctor;
// Detect obvious negatives
// Use toString instead of jQuery.type to catch host objects
if ( !obj || toString.call( obj ) !== "[object Object]" ) {
return false;
}
proto = getProto( obj );
// Objects with no prototype (e.g., `Object.create( null )`) are plain
if ( !proto ) {
return true;
}
// Objects with prototype are plain iff they were constructed by a global Object function
Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
},
each: function( obj, callback ) {
var length, i = 0;
if ( isArrayLike( obj ) ) {
length = obj.length;
for ( ; i < length; i++ ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
} else {
for ( i in obj ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
}
return obj;
}
我们在日常开发中是不是会常用到上述工具函数，判断对象类型等
最常用的还是$.each(obj,function()) 这个方法了吧
也可以自定义一个工具函数来供自己使用
$.extend({
zhishu:function(num){
var count = 0,flag = true;
while(num--){
for(var i =0; i<Math.sqrt(num);i++){
if(num%i == 0) {
flag = !flag
break
}
count++
}
}
}
})
以上就写了方法查找某个数范围内的质数
有一点也许大家还在像jquery和$是怎么联系到一起的。。。
//当有一个也是以$开头的库与jquery冲突时
var _jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
//这是获取之前定义的原始$
jQuery.noConflict = function( deep ) {
//如果现在定义的Jquery与之前不一样，那么之前的就得写成_$ _JQuery
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
};
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
// 在非全局情况下 Jquery $ 都有jq原型
举个栗子
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.noConflict demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="log">
<h3>Before $.noConflict(true)</h3>
</div>
<script src="https://code.jquery.com/jquery-1.6.2.js"></script>
<script>
var $log = $( "#log" );
$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );
// Restore globally scoped jQuery variables to the first version loaded
// (the newer version)
jq162 = jQuery.noConflict( true );
$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
</script>
</body>
</html>
Before $.noConflict(true)
2nd loaded jQuery version ($): 1.6.2
After $.noConflict(true)
1st loaded jQuery version ($): 1.10.2
2nd loaded jQuery version (jq162): 1.6.2
今天的内容就到这里，下回我们讲解
网友评论