OOP与jQuery（一）：变量和函数

最新推荐文章于 2024-06-28 16:20:01 发布

teddy860103

最新推荐文章于 2024-06-28 16:20:01 发布

阅读量125

点赞数

分类专栏： jQuery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/teddy860103/article/details/84151855

版权

5 篇文章 0 订阅

订阅专栏

本系列文章由石川创作，李松峰翻译，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使用匿名自调用函数来完成它的一次性初始化。

关注