本系列文章由石川创作,李松峰翻译,W3ctech.com首发,图灵社区转载。
?
解码jQuery系列
光开发源代码是不够的。为了让开源进一步开放,在“解码jQuery”系列中,我们会剖析jQuery的每一个方法。领略jQuery框架之美,同时向这个框架背后的天才们致敬。
?
“OOP与jQuery”是“解码jQuery”系列中的一个子系列,主要讨论jQuery的内部构成及相关的OOP(Object Oriented Programming,面向对象编程)概念。
?
学习OOP概念的最佳方式,就是剖析一个真实的框架。学习某个框架的最佳方式,就是领会其中的OOP概念。
?
jQuery核心(vcore.js)是jQuery的“大脑”,其中涉及五个重要概念:变量(数据)、函数、对象、原型和继承。这五个方面是jQuery核心的五个“”脑叶,又是探求OOP概念的五个“意识”。
整个jQuery库都浓缩在一个jQuery变量中。实际上,core.js中有两个jQuery变量(var jQuery),一个是全局的,另一个是局部的。今天我们就通过jQuery来了解JavaScript中的变量和函数这两个概念。下面就是刚提到的两个jQuery变量。
// 全局 jQuery var jQuery = (function(){ // 局部 jQuery var jQuery = function(selector, context) { //..... } })();
?
1.变量保存数据,函数也是数据
?
? ?我们先来看一看局部的jQuery:
?
// 局部 jQuery var jQuery = function(selector, context) { // .... }
?
? ? JavaScript中的函数实际上是数据。也就是说,通过以下两种方式定义jQuery函数,结果是相同的:
// 局部 jQuery function jQuery (selector, context) { // ..... } // 局部 jQuery var jQuery = function(selector, context) { // ...... }
?
2.函数可以匿名
?
? ? 再来看一看全局的jQuery:
?
// 全局 jQuery var jQuery = (function() { // ..... })();
?
? ? 从中把函数部分提取出来,就会发现它是匿名的:
?
function() { // ..... }
?
? ?在JavaScript中,可以不把数据赋值给变量,而数据照样可以存在。比如,下面这个字符串可以存在于JavaScript代码 ? ? ?中,而且不会返回任何错误:
?
“I am data and I don't cause error.”
?
? ? 前面第1点提到了“函数是数据”,因此函数也可以独立存在,而不需要被赋值给某个变量。假如你运行上面的匿名函数, ? ? 它100%可以运行,而且不会导致任何错误。那匿名函数有什么用呢?下一点就来回答这个问题。
?
3.匿名函数可以自调用
?
? ? 匿名函数的一个优点是可以作为自调用的函数来使用。举个例子,下面的函数在页面加载时会自动执行,你可以在控制 ? ? ? 台看到输出:
?
var jQuery = (function() { console.log("I am self-invoking."); })();
?
? ? 那为什么要像这样来使用匿名函数呢?因为这样可以在不创建全局变量的情况下执行一些内部操作。jQuery使用匿名自 ? ? 调用函数来完成它的一次性初始化。