深入了解jQuery之整体架构
本文是在阅读了Aaron艾伦的jQuery源码解析(地址:http://www.imooc.com/learn/172)后的个人体会以及笔记。在这里感谢艾伦老师深入浅出的讲解!!
先来看看如何生成一个jQuery对象,源码:
var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context );
};
当我们使用jQuery('something')或者$('something')时,我们得到的是一个 jQuery.fn.init()对象。那么jQuery.fn是什么鬼?
jQuery.fn = jQuery.prototype = {
// jQuery版本
jquery: version,
constructor: jQuery, // 构造函数
// Start with an empty selector
selector: "",
// The default length of a jQuery object is 0
length: 0,
// 省略.....
}
jQuery.fn 实际上是jQuery构造函数的原型对象的引用!! 所以我们以后看到 jQuery.fn时,把他当成jQuery构造函数的原型对象就可以了。
知道了jQuery.fn , 接下来看看jQuery.fn.init()函数
jQuery.fn.init = function( selector, context ) {
// 省略....
return this;
};
jQuery.fn.init.prototype = jQuery.prototype; // 注意这里! 这句代码让init对象可以使用jQuery的原型方法。
这样,我们在创建jQuery对象时就不用使用new关键字了。
整体看一下源码架构:
var $ = jQuery = function(selector,context){
return new jQuery.fn.init(selector,context) // 返回一个jQuery.fn.init()对象
} jQuery.fn = jQuery.prototype = {
constructor:jQuery,
init:function(){
// 省略.....
return this;
}
}
jQuery.fn.init.prototype = jQuery.fn
直观的感受一下相互之间的关系:
调用jQuery函数,我们得到的是一个jQuery.fn.init实例,这个实例的原型对象被重新指向到了jQuery函数的原型对象,所以这个实例可以使用jQuery原型对象的属性和方法,而如果我们给jQuery函数附加方法,那么这个方法就变成了静态方法。
然后来看一下jQuery.fn.init函数的源码:
var rootjQuery, // A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
// <any+>--任意个非右尖括号字符 或者 以#开头的 init = jQuery.fn.init = function( selector, context ) {
var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
} // Handle HTML strings
if ( typeof selector === "string" ) {
// 如果selector的格式是字符串类型,且字符串长度大于等于3,并且内容格式为: <something>
if ( selector[0] === "<" &&
selector[ selector.length - 1 ] === ">" &&
selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check
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
) ); // HANDLE: $(html, props)
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] ); // ...and otherwise set as attributes
} else {
this.attr( match, context[ match ] );
}
}
} return this; // HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] ); // Support: Blackberry 4.6
// gEBID returns nodes no longer in the document (#6963)
if ( elem && elem.parentNode ) {
// Inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
} this.context = document;
this.selector = selector;
return this;
} // HANDLE: $(expr, $(...))
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector ); // HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
} // HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this; // HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return typeof rootjQuery.ready !== "undefined" ?
rootjQuery.ready( selector ) :
// Execute immediately if ready is not present
selector( jQuery );
} if ( selector.selector !== undefined ) {
this.selector = selector.selector;
this.context = selector.context;
} return jQuery.makeArray( selector, this );
};
配张思路图:
深入了解jQuery之整体架构的更多相关文章
- jQuery 源码解析一:jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
- 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- jQuery整体架构源码解析(转载)
jQuery整体架构源码解析 最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性, ...
- jQuery整体架构源码解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 【深入浅出jQuery】源码浅析--整体架构(转)
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- jQuery源码学习(1):整体架构
整体架构 $().find().css().hide() 从jQuery的表达式可以看出两点: jQuery的构建方式 jQuery的调用方式 下面从这两方面来窥探jQuery的整体架构: 分析一:无 ...
- jQuery 2.0.3 源码分析core - 整体架构
拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery ...
- jQuery源码分析系列 : 整体架构
query这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! ...
- Jquery的基本架构
引入 以前学习原生JS然后切换到用JQ的时候总觉得很不习惯,甚至有点排斥用JQ.后来自己写项目一直到公司实习用JQ的这段时间,才深深感受到JQ的强大~JQ不仅做到兼容很多浏览器,还能很方便地使用JS ...
随机推荐
- 关于FPGA学习路线
1.参考FPGA厂商的参考资料,将某系列FPGA所有芯片资料下载下来,有针对性的做参考. 2.参考FPGA厂商开发板以及相应的参考设计,在开发板里有众多的外围接口电路,基本涵盖了常用的应用场合.同时也 ...
- centos 7 安装zabbix3.0
1.安装MySQL 从最新版本的linux系统开始,默认的是 Mariadb而不是mysql! 使用系统自带的repos安装很简单: # yum install -y mariadb mariadb- ...
- 获取广告标识符ifad
#import <AdSupport/ASIdentifierManager.h> NSString *adId =[[[ASIdentifierManager sharedManager ...
- html5之history对象 控制浏览器前进或后退事件
一.摘要: 总结用history对象操作浏览器的历史记录的方法,在项目中使用的是mui框架,总结中包括我在实际项目中遇到的问题. 二.总结: 实现效果: 实现代码: 上面的编辑页面加载的时候就要先调用 ...
- TensorFlow中权重的随机初始化
一开始没看懂stddev是什么参数,找了一下,在tensorflow/python/ops里有random_ops,其中是这么写的: def random_normal(shape, mean=0.0 ...
- thinkphp关闭调试模式(APP_DEBUG => false),导致程序出错
thinkphp关闭调试模式(APP_DEBUG => false),导致程序出错,开启调试模式,不报错,怎么解决? 查看Logs日志记录: [ --29T09::+: ] 113.108.11 ...
- Spring Boot快速开发Web项目
我们以前使用Spring框架的时候,需要首先在pom文件中增加对相关的的依赖,然后新建Spring相关的xml文件,而且往往那些xml文件还不会少.然后继续使用tomcat或者jetty作为容器来运行 ...
- Combobox
1.方式一 <select id="cc" class="easyui-combobox" name="dept" style=&qu ...
- Jstl简单应用
jsp引入信息------ <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" % ...
- 微信公众平台实现pc端网站登录
亲测通过 1,pc端生成带有当前会话的sessionid的url(通过微信来扫描) 2,扫描后,微信浏览器将访问url,将微信浏览器中的sessionid改成通过url传过来的session(pc端) ...