jQuery总体架构的理解分析

jQuery脚本总体结构来说,有如下形式:


代码如下:

(function( window, undefined ) {
// Define a local copy of jQueryvar jQuery = function( selector, context
) { // The jQuery object is
actually just the init constructor
'enhanced' return new
jQuery.fn.init( selector, context ); },
// Expose jQuery to the global objectwindow.jQuery =
window.$ = jQuery;
})(window);

对这样的结构不很理解,也没做深究,只知道和和所谓的

Technorati 标签: JQuery,Javascript,Web前端
js闭包的概念相关,今天查了一些资料,有了些基本的理解。
实际是定义了一个全局函数,前一个括号为一个匿名函数,后面为函数的调用。可以这样理解:


代码如下:

var fun=function(window, undefined){
... ...
}
fun(window);

整个脚本是一个匿名函数(暂时叫它mainFn吧),函数被加载的时候便开始执行,mainFn可以接收两个参数,执行时只传递一个参数window.

1. 具体解释下这个写法的意思:
2. window 函数执行时会传入window,这个传入的window是全局对象(通常为Window)的
3. 一个属性且window=this,而传入mainFn函数中作为其参数时,它会被存储在
4. mainFn的调用对象中.在原型链中查找变量的策略是(非嵌套函数):先查找调用
5. 对象,再查找全局对象,所以这使得整个mainFn中使用的window时查找效率更高
6. undefined 由于执行时并未传递第二个参数,故变量undefined的值为undefined.早期版
7. 本的浏览器中全局对象可能没有undefined属性,所以不能直接使用它.通常避免
8. 这个问题的写法是 window.undefined = window.undefined

然后在最后让jQuery库中最重要的对象jQuery成为了window对象的一个属性,并可以简写为“$”。

其它的补充资料:
JQuery是个出色的javascript库,最近结合它写javascript,看了下源码。
先从整体、全局的看,jQuery的源码几乎都在下面的代码中:


代码如下:

(function() {

//……

})();

第一个括号里面是个匿名函数,第二个括号表示马上执行第一个括号里面的代码。
首先明白,javascript里面是没有命名空间的,要保证你的javascript函数、对象与其他的不冲突,这里用了javascript的一个技巧:你的所有javascript函数、对象都在一个匿名函数里面定义,确保了所定义的函数、对象的有效范围,起到了命名空间的作用。既然作用范围在这个匿名函数中,怎么被别人使用呢?下面看它的下面代码:

var jQuery = window.jQuery = function(selector, context) {
//……
};

这里让jQuery库中最重要的对象jQuery成为了window对象的一个属性,这样就可以在其他地方像使用 document(document也是window的一个属性)一样使用jQuery了。也许使用过jQuery的朋友惊讶-我没有使用jQuery对象,一直使用$的。没错,那是jQuery的同名对象:

window.$ = jQuery;

现在明白了吧。

这个库的结构是这样的:


代码如下:

1. (function(window, undefined){
2. var document = window.document;
3. var jQuery = ...
4. ...
5. ...
6. })(window);

(function(window, undefined){ var document = window.document; var jQuery = ... ... ... })(window);

整个脚本是一个匿名函数(暂时叫它mainFn吧),函数被加载的时候便开始执行,mainFn可以接收两个参数,执行时只传递一个参数window.
1. 具体解释下这个写法的意思:
2. window 函数执行时会传入window,这个传入的window是全局对象(通常为Window)的
3. 一个属性且window=this,而传入mainFn函数中作为其参数时,它会被存储在
4. mainFn的调用对象中.在原型链中查找变量的策略是(非嵌套函数):先查找调用
5. 对象,再查找全局对象,所以这使得整个mainFn中使用的window时查找效率更高
6. undefined 由于执行时并未传递第二个参数,故变量undefined的值为undefined.早期版
7. 本的浏览器中全局对象可能没有undefined属性,所以不能直接使用它.通常避免
8. 这个问题的写法是 window.undefined = window.undefined

(0)

相关推荐

  • 谈一谈jQuery核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javascript中的高级特性来构建如此伟大的javascript库. 1 初识jQuery 从核心功能来看,jQuery仅仅做了一件简单而又平凡的事:查询.它的语法如此简洁明了,以致于很多人在不知道javascript是什么的时候就已经会用jQuery了,用一个词形容就是:大道至简. 从设计层面来看,我们

  • 基于jQuery架构javascript基础体系

    jQuery的使用开始成为javascript开发者的主选产品,但如果没有一个整体的规划,简单的拿来主义势必带来后期维护成本的增加,大量的jQuery插件如同一把双刃剑,一方面大大节省了开发时间与周期,但同时也造成WEB页面加载的负担,带来的难护与二级扩展成本将非常庞大,因此,在使用之前就需要一个最基础的javascript架构体系,能明显基础功能组件,插件组件有效实施与扩展. 我们想,jQuery毕竟还只是一个基础的最底层的工具集,封装元素选择器,事件等等,基本上能满足一般的需求,但要从整体的

  • jQuery源码分析-01总体架构分析

    1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 复制代码 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名函数.什么东东呢?在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2. 为什么要创建这样一个"自调用匿名函数"呢? 通过定义一个匿名函数,创建了一个"

  • jQuery学习笔记之总体架构

    先来看代码: 复制代码 代码如下: (function (window, undefined) {            //构建jQuery对象            var document = window.document,                navigator = window.navigator,                location = window.location;            var jQuery = (function () {       

  • jquery的总体架构分析及实现示例详解

    jQuery整体框架甚是复杂,也不易读懂,这几日一直在研究这个笨重而强大的框架.jQuery的总体架构可以分为:入口模块.底层模块和功能模块.这里,我们以jquery-1.7.1为例进行分析. jquery的总体架构 复制代码 代码如下: 16 (function( window, undefined ) {          // 构造 jQuery 对象   22     var jQuery = (function() {   25         var jQuery = functio

  • jQuery 2.0.3 源码分析之core(一)整体架构

    拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 例如: 复制代码 代码如下: $().find().

  • jQuery总体架构的理解分析

    jQuery脚本总体结构来说,有如下形式: 复制代码 代码如下: (function( window, undefined ) { // Define a local copy of jQueryvar jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector,

  • 本真的REST架构风格理解

    目录 引子 Web技术发展与REST的由来 REST架构风格的推导过程 REST详解 什么是资源? 什么是资源的表述? 什么是状态转移? 什么是统一接口? 什么是超文本驱动? REST与DO的差别 REST与RPC的差别 参考资料: 引子 在移动互联网.云计算迅猛发展的今天,作为一名Web 开发者,如果您还没听说过“REST”这个buzzword,显然已经落伍了.夸张点说,甚至“出了门都不好意思跟别人打招呼”.尽管如此,对于REST 这个泊来品的理解,大多数人(包括一些资深的架构师)仍然停留在“

  • 从架构思维角度分析高并发下幂等性解决方案

    目录 1 背景 2 幂等性概念 3 幂等性问题的常见解决方案 3.1 查询操作和删除操作 3.2 使用唯一索引 或者唯一组合索引 3.3 token机制 3.4 悲观锁 3.5 乐观锁 3.6 分布式锁 3.7  select + insert 3.8 状态机幂等 3.9 保证Api接口的幂等性 4 会议室的解决方案 5 总结 1 背景 我们的云办公系统有一个会议预定模块,每个月最后一个工作日的下午三点,会启动对下个月会议室的可用预定. 公司的 会议室大约200个,但是需求量远不止于此,所以会形

  • 从架构思维角度分析分布式锁方案

    目录 1 介绍 2 关于分布式锁 3 分布式锁的实现方案 3.1  基于数据库实现 3.1.1 乐观锁的实现方式 3.1.2 悲观锁的实现方式 3.1.3 数据库锁的优缺点 3.2基于Redis实现 3.2.1 基于缓存实现分布式锁 3.2.2缓存实现分布式锁的优缺点 3.3 基于Zookeeper实现 3.3.1 实现过程 3.3.2 zk实现分布式锁的优缺点 3.4 三种方案的对比总结 1 介绍 前面的文章我们介绍了分布式系统和它的CAP原理:一致性(Consistency).可用性(Ava

  • Flink部署集群整体架构源码分析

    目录 概览 部署模式 Application mode 客户端提交请求 服务端启动&提交Application session mode Cluster架构 Cluster的启动流程 DispatcherResourceManagerComponent Runner代码 HA代码框架 总结 概览 本篇我们来了解Flink的部署模式和Flink集群的整体架构 部署模式 Flink支持如下三种运行模式 运行模式 描述 Application Mode Flink Cluster只执行提交的整个job

  • openstack云计算keystone架构源码分析

    目录 keystone架构 Keystone API Router Services (1) Identity Service (2) Resource Service (3) Assignment Service (4) Token Service (5) Catalog Service (6) Policy ServicePolicy Service Backend Driver keystone管理这些概念的方法 keystone-10.0.0代码结构展示 keystone服务启动 key

  • 联邦学习FedAvg中模型聚合过程的理解分析

    目录 问题 聚合 1. 聚合所有客户端 2. 仅聚合被选中的客户端 3. 选择 问题 联邦学习原始论文中给出的FedAvg的算法框架为: 参数介绍: K 表示客户端的个数, B表示每一次本地更新时的数据量, E 表示本地更新的次数, η表示学习率. 首先是服务器执行以下步骤: 对每一个本地客户端来说,要做的就是更新本地参数,具体来讲: 把自己的数据集按照参数B分成若干个块,每一块大小都为B. 对每一块数据,需要进行E轮更新:算出该块数据损失的梯度,然后进行梯度下降更新,得到新的本地 w . 更新

  • 前端面试之对安全防御的理解分析

    目录 1.引言 2.常见前端攻击策略 3.攻击策略解释 3.1 SQL注入 3.2 XSS攻击 3.3 CSRF攻击 4.攻击防御的正确姿势 4.1 SQL注入防御 4.2 XSS防御 4.3 CSRF防御 1.引言 每逢前端面试,80%的候选人都会被问到这个问题.这问题确确实实是一道八股文.为了应付面试,我自己也是反反复复背了好几次,但是记了又忘,忘了又记,如此优雅的恶性循环让我痛下决心去搞定其中的枝枝叶叶.废话不多说,上车吧. 2.常见前端攻击策略 SQL注入 XSS攻击 CSRF攻击 3.

随机推荐