JavaScript 原型的实际应用之实现一个 jQuery
我们平时使用jQuery大概是这样:
let $p = $('p');
$p.css('fontSize', '40px');
我们生成jQuery实例对象后,就可以使用原型上的css(), html()等方法,这就体现了原型继承:由构造函数生成的实例对象,可以继承构造函数的原型对象上的属性和方法。
我们可以试着手写一个迷你的jQuery,思路大概是这样:
1-通过匿名自执行函数来存放我们的代码,将window对象作为参数传入,防止全局作用域的污染。
2-利用工厂函数,在调用jQuery或者$的时候,返回构造函数的实例对象
3-构造函数定义为jQuery.fn.init,初始化时处理dom元素,将dom元素绑定在实例对象上
4-将构造函数的prototype属性指向jQuery.fn,此时构造函数的实例便可以继承jQuery.fn里的属性和方法
5-jQuery.fn是一个对象,里面存放了所有的jQuery方法,让外部来调用
代码实现:
完整代码请查看 my-jquery
// my-jquery.js
(function(window) {
var jQuery = function (selector) {
// 通过new关键字,找到构造函数
return new jQuery.fn.init(selector);
};
// 初始化 jQuery.fn
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
css: function(key, value) {
let that = this;
for (var i = 0; i < that.length; i++) {
that[i].style[key] = value;
}
},
html: function (value) {
return this[0].innerHTML;
},
};
// 定义构造函数
var init = jQuery.fn.init = function(selector) {
var slice = Array.prototype.slice;
var dom = slice.call(document.querySelectorAll(selector));
var i,
len = dom ? dom.length : 0;
for (i = 0; i < len; i++) {
this[i] = dom[i];
}
this.length = len;
this.selector = selector || '';
};
// 定义原型
init.prototype = jQuery.fn;
window.$ = jQuery;
})(window);
这里有个问题:这里为什么不直接把init.prototype赋值为一个对象,而是要通过jQuery.fn做中转呢?
jQuery.fn = {...};
init.prototype = jQuery.fn;
这就体现了原型的扩展性,jQuery.fn
| $.fn
是用来扩展插件用的,将插件扩展统一到$.fn.xxx
这一个接口,也是符合对修改封闭,对扩展开放的原则。
下面我们来写一个简单的jQuery插件。
$.fn.getNodeName = function () {
return this[0].nodeName;
}
// 测试
alert($box.getNodeName()); // DIV
小结:
本篇文章总结了以下几个问题
- jQuery是如何使用原型的?
- 如何实现一个小型的jQuery?
- jQuery的插件扩展机制
JavaScript 原型的实际应用之实现一个 jQuery的更多相关文章
- JavaScript原型与原型链,原型的实际应用
原型链是js面向对象的基础,非常重要. 一,创建对象的几种方法: 1,字面量 var o1 = { name:'o1' }; 2,构造函数 var M = function(name){ this.n ...
- 简单粗暴地理解 JavaScript 原型链 (一个充满歪门邪理的理解方法,有助于新手哦!)
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
- 浅谈系列之 javascript原型与对象
在我学习与使用javascript三个月中,我一直对javascript的继承关系以及prototype理解不清,导致很多时候为什么这么用说不出个所以然来.截止到本周为止,通过之前的学习以及自己的再学 ...
- JavaScript原型OOP——你上车了吗?
.title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...
- JavaScript - 原型
一切皆为对象 殊不知,JavaScript的世界中的对象,追根溯源来自于一个 null 「一切皆为对象」,这句着实是一手好营销,易记,易上口,印象深刻. 万物初生时,一个null对象,凭空而生,接着O ...
- 深入理解javascript原型和闭包(1)——一切都是对象
“一切都是对象”这句话的重点在于如何去理解“对象”这个概念. ——当然,也不是所有的都是对象,值类型就不是对象. 首先咱们还是先看看javascript中一个常用的函数——typeof().typeo ...
- 深入理解javascript原型和闭包(2)——函数和对象的关系
上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...
- 深入理解javascript原型和闭包(3)——prototype原型
既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(深入理解 ...
- 深入理解javascript原型和闭包(4)——隐式原型
注意:本文不是javascript基础教程,如果你没有接触过原型的基本知识,应该先去了解一下,推荐看<javascript高级程序设计(第三版)>第6章:面向对象的程序设计. 上节已经提到 ...
随机推荐
- python数据分析之:数据清理,转换,合并,重塑(一)
DataFrame合并: merge运算是将一个或多个键将行链接起来.来看下面的这个例子: In [5]: df1=DataFrame({'key':['b','b','a','c','a','a', ...
- css集合--表示有未读消息小红点的解决
只需要一个<i>标签,放在需要的文本后面即可 ex:<span>待解决问题<i></i><span> i{ display:block; b ...
- API的理解和使用——字符串的命令
字符串的命令复习表 命令 作用 set setex setnx get mset mget incr decs incrby decrby incrbyfloa ...
- IO多路复用之Reactor模式
首先,我们来看看同步和异步. 在处理 IO 的时候,阻塞和非阻塞都是同步 IO.只有使用了特殊的 API 才是异步 IO. 接下来,我们来看看Linux下的三大同步IO多路复用函数 fcntl(fd, ...
- Algorithm: bit manipulation
1. 一个数的从右起第p1位和第p2位swap n位 unsigned int swapBits(unsigned int x, unsigned int p1, unsigned int p2, u ...
- 排序List集合
这两天写代码过程中遇到一个需求,需要按照某个字段排序List集合,自己实现了一半,发现网上有个更好的版本,就采用了这个,记录下来. 使用这个工具类要注意一个就是 如果你按照age 字段排序,那么age ...
- ManualResetEvent使用
1.定义 MSDN定义: 通知一个或多个正在等待的线程已发生事件.此类不能被继承. 详细说明: ManualResetEvent 允许线程通过发信号互相通信.通常,此通信涉及一个线程在其他线程进行之前 ...
- 使用C++模拟C#的委托机制
1. [代码][C/C++]代码 //Event.h #ifndef _EVENT_H_#define _EVENT_H_class EmptyObject {};template<typen ...
- AtCoder Beginner Contest 102
A - Multiple of 2 and N Time Limit: 2 sec / Memory Limit: 1024 MB Score : 100100 points Problem Stat ...
- SoundHound Inc. Programming Contest 2018
A - F Time Limit: 2 sec / Memory Limit: 1024 MB Score : 100100 points Problem Statement You are give ...