第13章 jQuery 源码分析-【千锋教育】Jquery从入门到实战

第13章 jQuery 源码分析 面向对象 打造miniQuery库 面向对象 打造miniQuery库 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 13.2 13.1 学习目标 了解 了解 掌握 了解jQuery如何实现面向对象编程 1 2 了解常见jQuery方法的实现原理 3 掌握对象的创建及面向对象编程的方法 销售额 掌握知识 理解知识 熟悉知识 3.333333 3.333333 3.333333 通过前面章节的学习，已经对jQuery库的使用有了深入的理解，那么，这么多好用的方法是如何实现的，是否感到好奇呢？理解内部实现方式，对精通jQuery库有很大帮助的。 13.1 面向对象 13.1.1 属性与方法 返回目录 13.1.2 原型与原型链 13.1 面向对象 jQuery库是基于面向对象思想设计出来的，所以要想了解jQuery库的内部实现原理，首先需要对面向对象有所了解。 面向对象编程（Object Oriented Programming，OOP）是一种计算机编程架构。它将真实世界各种复杂的关系抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。 抽象是从众多的事物中抽取出共同的、本质性的特征，而舍弃其非本质的特征。面向对象编程有利于保证代码的可重用性、灵活性、可扩展性。 面向对象编程中，主要工作是为对象添加属性和方法。属性是用来描述一种状态的，而方法是用来描述一种行为的。举个简单的例子，手机的属性包括品牌、颜色等，是一种静态的状态，而手机的方法包括玩游戏、听音乐等，是一种动态的行为。 在JavaScript中，通过给对象添加变量的方式来实现属性的设置，通过给对象添加函数的方式来实现方法的设置。 13.1.1 属性与方法 13.1 面向对象 可以通过创建出的obj对象来调用其属性和方法。一般情况下，对象的属性在调用时不加小括号，因为是变量；而对象的方法在调用时加小括号，因为是函数。 上面示例中只是一种简单的形式，项目中真正的对象需要通过类或者构造函数进行创建。ECMAScript6之前的语法中是没有类的概念的，但可以利用构造函数来代替类进行对象的创建。 构造函数与普通函数的区别是需要通过new关键字来调用。构造函数中的this会指向创建出来的对象，且具备隐式返回操作。 13.1.1 属性与方法 13.1 面向对象 代码如下所示。 13.1.1 属性与方法 13.1 面向对象 需要注意，在定义构造函数时，首字母一般需要大写，因为真正使用类时是需要大写的，所以构造函数也默认按照这种方式定义。以这种方式添加出来的属性和方法，在创建多个对象的时候，会在内存中生成多份，所以可能会造成一些性能损耗。 如何改进面向对象的属性和方法操作方式呢？可以利用原型来实现。 在面向对象编程中通过构造函数的prototype属性来得到原型对象，在prototype对象中添加的方法在内存中只存在一份，对象通过原型链就可以查找到这个方法，代码如下所示。 13.1.2 原型与原型链 13.1 面向对象 连接对象与原型对象之间的纽带就是原型链。查找过程也遵循就近原则，如果在其范围内找不到相关方法，就会通过原型链层层向外查找，原型链的最外层为Object.prototype。 Object属于JavaScript中提供的一个内置的构造函数，所有对象的原型链最外层都是Object.prototype。 在JavaScript中，可以利用__proto__私有属性来找到对应的原型对象，代码如下所示。 13.1.2 原型与原型链 13.1 面向对象 13.2 打造miniQuery库 13.2.1 框架搭建 返回目录 13.2.2 常用方法 13.2 打造miniQuery库 通过模拟一个小型的miniQuery库，来理解jQuery内部实现的原理，提高对面向对象的实际应用水平。 13.2 打造miniQuery库 13.2.1 框架搭建 在jQuery中，常见方法都是通过$().方法()来调用的，如css()、html()等方法，代码如下所示。 这种方式跟调用对象的方法很像，如果$()执行完返回对象，就可以调用对象下的css()方法或是html()方法了。 13.2 打造miniQuery库 13.2.1 框架搭建 所以return的返回值只要是对象即可。在前面了解到，创建对象是通过构造函数实现的，那么可以添加一个MiniQuery的构造函数，用于创建对象，代码如下所示。 $()除了需要返回对象外，还需要获取被选择的DOM元素，并把元素收集到一个数组容器内，即this.elements = []，方便对象方法去使用。同时还要考虑到DOM元素的类型，如对象、ID、CLASS、