整个jQuery是一个自调用的匿名函数:

 (function(global, factory) {
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) {
/* jQuery主体代码 */
}));

自调用函数大家都不陌生,前面的function(){}是函数定义,然后紧接着的()表示立即执行,这样构建了一个命名空间,其中的变量都是局部变量,不管起什么名字,都不会覆盖全局变量。这样就不会污染全局的命名空间。如果有不熟悉的同学,可以去看看作用域链和闭包的基础知识就明白啦。

这个子调用函数的函数体我们暂时可以不用管,貌似是处理jQuery与CommonJS、Node.js等的冲突和协调关系,这个我觉得不是重点,重点是这个自调用函数的参数。

整个参数列表有两个参数,第一个参数是传入Global对象,所有的全局变量都是Global对象的成员。传入这个变量,我们就将Global对象变成了这个自调用匿名函数的局部变量了,这样当我们访问它时,在自调用匿名函数的作用域中就能找到它,而不用将作用域链会退到Global,这样就更快啦。

第二个参数就是我们的jQuery啦,其中定义了jQuery的所有的内容,咱们的重点就在这里,那么现在开始,我们往下看。

 jQuery = function(selector, context) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init(selector, context);
}

在自调用的匿名函数里面,定义了一个jQuery变量,它是一个方法,执行后返回一个新jQuery对象,不过这个对象实际上是由jQuery.fn.init函数构建。在整个jQuery主体代码的最后会让window.jQuery和window.$两个全局变量引用这个jQuery方法:

 if (typeof noGlobal === strundefined) {
window.jQuery = window.$ = jQuery;
}

这样当我们使用$(...)或者jQuery(...)的时候就能创建jQuery对象啦!

下期预告:

我们都知道,在javascript中构建对象的方法有很多种,什么工厂模式、构造函数模式、原型模式等等,jQuery使用的是构造函数和原型相结合的方式。下期我们来看看jQuery的原型是怎么样的。

菜鸟的jQuery源码学习笔记(一)的更多相关文章

  1. 菜鸟的jQuery源码学习笔记(前言)

    前言 相信任何一名前端开发人员或者是前端爱好者都对jQuery不陌生.jQuery简单易用,功能强大,特别是拥有良好的浏览器兼容性,大大降低了前端开发的难度,使得前端开发变得“平易近人起来”.自从本人 ...

  2. 菜鸟的jQuery源码学习笔记(二)

    jQuery对象是使用构造函数和原型模式相结合的方式创建的.现在来看看jQuery的原型对象jQuery.prototype: jQuery.fn = jQuery.prototype = { //成 ...

  3. 菜鸟的jQuery源码学习笔记(三)

    each: function(callback, args) { return jQuery.each(this, callback, args); }, each:这个调用了jQuery.each方 ...

  4. jquery源码学习笔记三:jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  5. jQuery源码学习笔记一

    学习jQuery源码,我主要是通过妙味视频上学习的.这里将所有的源码分析,还有一些自己弄懂过程中的方法及示例整理出来,供大家参考. 我用的jquery v2.0.3版本. var rootjQuery ...

  6. jquery源码学习笔记二:jQuery工厂

    笔记一里记录,jQuery的总体结构如下: (function( global, factory ) { //调用factory(工厂)生成jQuery实例 factory( global ); }( ...

  7. jquery源码学习笔记(一)jQuery的无new构建

    本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不 ...

  8. jquery源码学习笔记一:总体结构

    练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的 ...

  9. jQuery源码学习笔记二

    //添加实例属性和方法 jQuery.fn = jQuery.prototype = { // 版本,使用方式:$().jquery弹出当前引入的jquery的版本 jquery: core_vers ...

随机推荐

  1. 十二、享元(Flyweight)模式--结构模式(Structural Pattern)

    Flyweight在拳击比赛中指最轻量级,即"蝇量级",有些作者翻译为"羽量级".这里使用"享元 模式"更能反映模式的用意. 享元模式以共享 ...

  2. 并行编译加快VS C++项目的编译速度

    最近编译的项目都比较大,话说自己的电脑配置还行,但编译所花的时间还是很长,遇到需要重新编译整个项目的时候真的有回宿舍睡一觉的冲动.昨天一不小心被我发现了一款软件Xoreax IncrediBuild ...

  3. Asp.net MVC Web.config配置技巧

    一.视图引入命名空间的设置 之前经常写这样的代码,而且每个页面都要写: @model IEnumerable<MvcStart.Models.People_Model> 其实有一种很方便的 ...

  4. 【剑指offer】面试题23:从上往下打印二叉树

    题目: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: bfs,队列. 注意,队列最后不要忘了pop(). 代码: /* struct TreeNode { int val; stru ...

  5. HDOJ-1018 Big Number

    http://acm.hdu.edu.cn/showproblem.php?pid=1018 题意:给出一个数n,输出n的阶乘的位数 汗Σ( ° △ °|||)︴刚开始还准备上大数乘法 然而10000 ...

  6. The Java™ Tutorials下载地址

    1.The Java™ Tutorials下载地址: http://www.oracle.com/technetwork/java/javase/java-tutorial-downloads-200 ...

  7. sort,uniq命令

    文本排序:sort  默认以ASCII表排序    -n:数值排序    -r: 降序    -t: 字段分隔符    -k: 以哪个字段为关键字进行排序    -u: 排序后相同的行只显示一次   ...

  8. PHP MySQL 创建数据库和表 之 Create

    创建数据库 CREATE DATABASE 语句用于在 MySQL 中创建数据库. 语法 CREATE DATABASE database_name 为了让 PHP 执行上面的语句,我们必须使用 my ...

  9. AC大牛经典语录

    超经典:     1. 为了世界的和平,为了女生的安全,我拼命做题,做题,做题! 2. A ac a day, keeps the doctor away! 3. from good to great ...

  10. Unity 读取Excel

    游戏有大多数配置文件,比如玩家等级,游戏商店信息等等.通常情况下把这些放入excel中来读取 第一种解决方案: xlsx –> csv –> 改变成UTF-8 或者Unicode编码 –& ...