在jquery实际应用中可通过$或jQuery生成jquery对象,如$("#hr_three")可生成jquery对象,jquery是如何做到的呢?
jquery加载时,入口为如下匿名方法,
(function( global, factory ) {...} ([color=red]typeof window !== "undefined" ? window : this, function( window, noGlobal) {...}[/color]));
红色部分为调用参数,global为window对象,factory为匿名方法,factory指向的匿名方法包含了整个jquery的主要功能代码。
在jquery加载调用默认方法时,通过factory( global );对factory指向的匿名方法进行调用,可以看到匿名方法调用时第二个参数并未传入,因此noGlobal参数为undefined,以下代码初始化了window全局对象的jQuery及$属性。
if ( !noGlobal ) {
// noGlobal为undefined,因此if判断为真
window.jQuery = window.$ = jQuery;
}
将jQuery对象赋值给了全局的jQuery及$属性,因此,可以在jquery环境中使用jQuery或$来生成jquery对象。
再来看下jQuery对象的初始过程,
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
init = jQuery.fn.init = function( selector, context, root ) {
...
// this实际上指向的是jQuery对象,根据selector的类别,对jQuery对象做了很多属性增强封装并最终返回
return this;
}
为什么this会指向jQuery对象呢? 看以下代码
init.prototype = jQuery.fn;
jQuery.fn为jQuery的别名(参照下面代码),而init的prototype对象又指向jQuery.fn,因此init也是jQuery对象的别名,this就指向jQuery对象了。
jQuery.fn = jQuery.prototype = {
jquery: version,
constructor: jQuery,
...
}
以上代码jQuery.fn赋值为jQuery.prototype对象,并将其自身的构造方法指向 jQuery,因此jQuery.fn实际上就是jQuery对象的别名。为什么要为jQuery设置别名呢?个人感觉是想将jQuery对象方法用别名区分开来。
以上即为jQuery对象的初始框架。
如下代码段模拟了jQuery对象生成的骨架代码:
var test = function() {
return new test.fn.init();
};
test.fn = test.prototype = {
constructor: test,
add: function() {
}
};
var init = test.fn.init = function() {
// 增加长度属性
this.length = 1;
// 增加0属性
this[ 0 ] = "test";
// 返回自身
return this;
}
init.prototype = test.fn;
var test = test();
console.log(test.length + "---" + test[0]);
分享到:
相关推荐
还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){…}) } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } 所以$(fn)=...
异步队列有三种状态:初始化(unresolved),成功(resolved),失败(rejected)。 执行哪些回调函数依赖于状态。 状态变为成功(resolved)或失败(rejected)后,将保持不变。 回调函数的绑定可以是同步,也可以...
在初始化jQuery对象的代码开始之前声明了一大堆变量。主要包括:全局变量的备份;处理字符串用的正则表达式;检测浏览器的正则表达式;对核心函数的引用备份。这里略过大部分,只说两种:全局变量和浏览器检测。
权限分组与数据初始化 第14周 开课介绍 前端技术概要 今日内容概要 Html本质以及在web程序中的作用 html的head内标签 html的body内标签之图标、换行及其他 chrome查看html样式基本操作 html的body内标签之input...
03 ORM多表操作之一对多查询之对象查询 04 ORM多表操作之一对多查询之双下划线查询 05 ORM多表操作之多对多添加记录 06 ORM多表操作之多对多查询 07 ORM多表操作之F查询与Q查询 08 ORM的querySet集合对象的特性 第...
关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥...
关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥...
angular源码其实结构非常清晰,划分的... //angular初始化方法,公司内部的框架是vxinit方法 //bootstrap //createInjector //一系列指令,服务,过滤器等指令 })(window,document,window.$) 其实阅读angular
经过分析,我们使用 SUN公司的JSP开发工具, 强大的MYSQL查询语言实现建立关系数据库,利用其提供的各种面向对象的开发工具,尤其是数据窗口这一能方便而简洁操纵数据库的智能化对象,首先在短时间内建立系统应用原型,...
java版erp管理系统源码 华夏ERP完整开源版J2EE代码 很多人说华夏ERP(英文名:jshERP)是目前唯一完整开源的进销存系统 虽然目前只有进销存+财务的功能,但后面将会推出ERP的全部功能,大家一起努力吧 系统初始账号...
通过 Spring Initializr 来快速初始化一个 Spring Boot 原型,方便学员来极速体验Spring Boot。本课程也将会采用Gradle作为项目管理工具,让学员掌握最前瞻的构建工具。通过探索项目让学员了解项目的结构,已经相关...
处理新用户注册消息,监听到用户注册消息后,对该用户的属性初始化(统计值)。 f.处理新电影添加消息,更新基于内容相似度而生成的相似度矩阵 注: 由于线上资源匮乏,也不想使系统增加复杂度,所以没有直接使用MQ...
18 3.3 初始步骤 ................................................................................................................................... 18 3.3.1 视图和布局 ..................................