W3ctech

石川著, 李松峰编译

光开放源代码是不够的。为了让开源进一步开放，在“解码jQuery”系列中，我们会剖析jQuery的每一个方法，领略jQuery框架之美，同时向这个框架背后的天才们致敬。

“OOP与jQuery”是“解码jQuery”系列中的一个子系列，主要讨论jQuery的内部构成及相关的OOP（Object Oriented Programming，面向对象编程）概念。

学习OOP概念的最佳方式，就是剖析一个真实的框架。学习某个框架的最佳方式，就是领会其中的OOP概念。

jQuery在整合压缩前是分为很多不同文件的。它的源代码可以在github的这页看到。 jQuery core （在core.js里）是jQuery的核心。面向对象有5个重要的概念：变量（数据），函数，对象，原型和继承。这些是JS语言面向对象的基础，也是jQuery的基础。

jQuery核心（core.js）是jQuery的“大脑”，其中涉及五个重要概念：变量（数据）、函数、对象、原型和继承。这五个方面是jQuery核心的五个“脑叶”，又是探求OOP概念的五个“意识”。

整个jQuery库都浓缩在一个jQuery变量中。实际上，core.js中有两个jQuery变量（var jQuery），一个是全局的，另一个是局部的。今天我们就通过jQuery来了解JavaScript中的变量和函数这两个概念。下面就是刚提到的两个jQuery变量：

// 全局 global jQuery

var jQuery = (function() {

  // 局部 local jQuery

  var jQuery = function( selector, context ) {

    // ...

  }

})();

1. 变量保存数据，函数也是数据
我们先来看一看局部的jQuery：

// 局部 local jQuery

var jQuery = function( selector, context ) {

  //...

}

JavaScript中的函数实际上是数据。也就是说，通过以下两种方式定义jQuery函数，结果是相同的：

// 局部 local jQuery

function jQuery( selector, context ){

  //...

}

// 局部 local jQuery

var jQuery = function( selector, context ){

  //...

}

2. 函数可以匿名
再来看一看全局的jQuery：

// 全局 global jQuery

var jQuery = (function() {

  //...

})();

从中把函数部分提取出来，就会发现它是匿名的：

function() {

  //...

}

在JavaScript中，可以不把数据赋值给变量，而数据照样可以存在。比如，下面这个字符串可以存在于JavaScript代码中，而且不会返回任何错误：

"我是数据，我不会导致错误。"

前面第1点提到了“函数是数据”，因此函数也可以独立存在，而不需要被赋值给某个变量。假如你运行上面的匿名函数，它100%可以运行，而且不会导致任何错误。那匿名函数有什么用呢？下一点就来回答这个问题。

3. 匿名函数可以自调用
匿名函数的一个优点是可以作为自调用的函数来使用。举个例子，下面的函数在页面加载时会自动执行，你可以在控制台看到输出：

var jQuery = (function() {

  console.log("我是自调用。");

})();

那为什么要像这样来使用匿名函数呢？因为这样可以在不创建全局变量的情况下执行一些内部操作。jQuery使用匿名自调用函数来完成它的一次性初始化。

下一期…
下一篇，我们将继续探索jQuery核心，介绍原型和对象的概念。

系列其他文章

• 解码jQuery系列4 – 函数作用域、jQuery连缀模式和jQuery.fn
• 解码jQuery系列3 – 原型
• 解码jQuery系列2 – 对象