解码jQuery系列1 – 变量和函数


石川著, 李松峰编译

光开放源代码是不够的。为了让开源进一步开放,在“解码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核心,介绍原型和对象的概念。

系列其他文章

7 thoughts on “解码jQuery系列1 – 变量和函数

  1. Pingback: 解码jQuery系列2 – 原型和对象 | w3ctech

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">