这次学习 jQuery 源码,基于当前最新的版本,3.2.1。

IIFE

(function() {
'use strict';
//
})();

定义一个匿名函数并立即执行,得益于 javascript 奇葩的特性,只能据此模拟命名空间。

利用 IIFE 来建立命名空间需要 3 步( 《Web开发权威指南》 ):

  1. 如果命名空间已经存在,获取它的引用。

  2. 创建模块代码。

  3. 将模块代码绑定到命名空间上。

按照这个思路扩展下代码:

(function(window) {
'use strict'; var jQuery = window.jQuery || {}; // jQuery.xxx = xxx; window.jQuery = jQuery;
})(window);

自己的组件如此操作是可行的, jQuery 这样的库跟别的库、框架共用一个命名空间就很不合适了:

(function(window) {
'use strict'; var jQuery = function() {}; // 保存原有的命名,防止覆盖、冲突
var _jQuery = window.jQuery, _$ = window.$; // 把命名还回去
jQuery.noConflict = function(deep) {
if(window.$ === jQuery) {
window.$ = _$;
} if(deep && window.jQuery === jQuery) {
window.jQuery = _jQuery;
} return jQuery;
} window.jQuery = window.$ = jQuery; return jQuery;
})(window);

CommonJS 支持

要判断是否处于 CommonJS 规范相关的环境,只要判断 moduleexports 这些变量是否存在即可:

(function(global, factory) {
"use strict"; if (typeof module === "object" && typeof module.exports === "object") {
module.exports = factory(global);
} else {
factory(global);
} })(typeof window !== "undefined" ? window : this, function(window) {
'use strict'; var jQuery = function() {}; window.jQuery = window.$ = jQuery; return jQuery;
});

Node 采用的 CommonJS 模块规范,用 Node 写例子:

var jQuery = require('./jQuery');

console.log(jQuery);

运行可见,能如愿正确导出。

AMD 支持

(function(global, factory) {
"use strict"; if (typeof module === "object" && typeof module.exports === "object") {
module.exports = factory(global);
} else {
factory(global);
} })(typeof window !== "undefined" ? window : this, function(window) {
'use strict'; var jQuery = function() {}; if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
} );
} window.jQuery = window.$ = jQuery; return jQuery;
});

document

jQuery 归根结底是一个快捷操作 DOM 的库,换句话说,脱离了浏览器,就没啥用了。

浏览器环境,jQuery 是通过 document 属性来判断的。

这里面又分两种情况:

  1. 调用者本身就有 document 属性,则直接执行 factory,返回 jQuery
  2. 调用者本身没有 document 属性,返回一个带一个参数的函数,根据这个参数是否有 document 再处理。

另外,通过 CommonJS 模块化导出,并不需要把 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) {
'use strict'; var jQuery = function() {}; if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
} );
} var _jQuery = window.jQuery, _$ = window.$; jQuery.noConflict = function(deep) {
if(window.$ === jQuery) {
window.$ = _$;
} if(deep && window.jQuery === jQuery) {
window.jQuery = _jQuery;
} return jQuery;
} if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
} return jQuery;
});

后续

模块化的东西并不是 jQuery 的核心部分,也就追求个有就成,所以这系列的后续代码都是基于简化后的骨架来的:

(function(window) {
var jQuery = function() {}; window.jQuery = window.$ = jQuery;
})(window);

代码地址:

https://github.com/oldmanscode/jq_step_by_step/blob/master/step1.js

jQuery 最外面的那层皮的更多相关文章

  1. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

  2. jQuery实现网页右下角悬浮层提示

    最近有同事提到类似网页右下角的消息悬浮提示框的制作.我之前也做过一个类似的例子,很简单.是仿QQ消息.现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子.是D ...

  3. jquery鼠标经过弹出层写法

    jquery鼠标经过弹出层写法<pre><div class="navitem"><a href="/index.php?c=news&am ...

  4. jQuery弹出深色系层菜单

    低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器.Demo展示: http://hovertree.com/texiao/layer/3/ 本特效可以作为网站的引导页,使用jQ ...

  5. jQuery弹出关闭遮罩层

    效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  6. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  7. jQuery 插件开发——PopupLayer(弹出层)

    导读:上次写了一篇关于GridView的插件开发方法,上几天由于工作需要,花了一天左右的事件封装了popupLayer(弹出层)插件.今天有时间就记录一下自己的开发思想与大家分享下,同时也算是对这段时 ...

  8. jQuery点击弹出层,弹出模态框,点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  9. Ajax -异步请求 -jquery中ajax分类 -第一层 $.ajax -第二层($.get /$.post) -第三层($.getJson/$.getScript) -相应演示

    Ajax 1.标准请求响应时浏览器的动作(同步操作) 1.1浏览器请求什么资源,跟随显示什么资源2.ajax:异步请求. 2.1局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内 ...

随机推荐

  1. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  2. 创建简单的Python列表

    比如给出电影列表: The Holy Grail The Life of Brian The Meaning of Life 转换为Python可读的列表,需要遵循以下4个步骤: 1.在数据两边加引号 ...

  3. 2746:约瑟夫问题poj

    2746:约瑟夫问题 总时间限制:  1000ms 内存限制:  65536kB 描述 约瑟夫问题:有n只猴子,按顺时针方向围成一圈选大王(编号从1到n),从第1号开始报数,一直数到m,数到m的猴子退 ...

  4. iOS APP上架被拒重新提交审核教程

    iOS APP审核比较严格,难免会出现被拒绝的情况,需要根据苹果反馈的问题修改后重新打包上传审核! 1.登录itunesconnect.https://itunesconnect.apple.com进 ...

  5. 深入讲解HashMap原理

    1.    HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变 ...

  6. 天梯赛 L3-013 非常弹的球 找规律

    L3-013. 非常弹的球 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 俞勇(上海交通大学) 刚上高一的森森为了学好物理,买了一个 ...

  7. 用tortoiseGit管理GitHub项目代码(完整教程)

    一.为什么要写这篇博客呢,因为在一开始用tortoiseGit来管理项目的时候,在百度上找了很多教程,但是感觉说的都不是很全,有些东西以及操作没写清楚,所以想写一片比较完整用tortoiseGit管理 ...

  8. javascript设计模式——中介者模式

    前面的话 程序由大大小小的单一对象组成,所有这些对象都按照某种关系和规则来通信.当程序的规模增大,对象会越来越多,它们之间的关系也越来越复杂,难免会形成网状的交叉引用.当改变或删除其中一个对象的时候, ...

  9. 二叉树的递归遍历 Tree UVa548

    题意:给一棵点带权的二叉树的中序和后序遍历,找一个叶子使得他到根的路径上的权值的和最小,如果多解,那该叶子本身的权值应该最小 解题思路:1.用getline()输入整行字符,然后用stringstre ...

  10. EF(EntityFramework)与mysql使用,乱码问题

    1.中文乱码问题 利用ef更新数据到mysql数据库中,中文就会变成乱码"???",就算把mysql的数据库的编码设置为"utf8"也会变成乱码,从网上查询了下 ...