原型 - 实现自己的jQuery
每个第一次使用jq的开发者都感到惊叹,jq的$太神奇了,究竟是怎么做到的使用$控制dom
赞叹前人之余,探究其本源才是前端开发者应该做的事,社区常常说,不要重复造轮子,
可是啊,连轮子都造不出来,又怎么去了解在什么环境下用什么轮子,怎么样才可以造成更加优秀的轮子,
不同阶段对前端有不同的理解,作为一名程序员,本就是没有尽头,静下心来,和别人比一比,多借鉴前人的发展,取其精
华去其糟粕,不要闭门造车,做一名不断学习的前端开发者
回头看来jq已经逐渐在不断的学习中揭开了他神秘的面纱,让我想看看美丽的$是怎么出生的
- jQuery只有一个全局变量$ 那一定是挂载在window上面的
(function (window){
var jQuery = function (selects) {
}
window.$ = jQuery;
}
)(window)
可爱的$就指向JQuery的实例了当我们$("#id")就相当于 jQuery("#id")
那么现在就要处理获取到的dom元素
(function (window) {
function jQuery(selects) {
return new jQuery.fn.init(selects)
}
jQuery.fn = {} //创建挂载函数
jQuery.fn.init = function (selects) {
var dom = [].slice.call(document.querySelectorAll(selects))
var i = 0;
var len = dom ? dom.length : 0
for (i = 0; i < len; i++) {
this[i] = dom[i]
}
this.length = len
this.selects = selects || ' ';
}
window.$ = jQuery; //注意这里jQuery指向window
})(window)
现在我们就已经将$()里面的dom捕捉到了,请转化成为数组,利于后面的操作
下一步就是在原型链上面创建jquery的方法了
(function (window){
var jQuery = function (selector){
return new jQuery.fn.init(selector) //这里必须构造函数要不放怎么去获取节点信息
}
jQuery.fn = {
val(){
return this[0].innerHTML
}
//.......等等方法
}
var int = jQuery.fn.init = function (selector) {
var dom = [].slice.call(document.querySelectorAll(selector))
var i,len = dom?dom.length:0
for (i = 0; i < len; i++) {
this[i] = dom[i]
}
console.log(len,selector);
this.length = len;
this.selector = selector || ' '
}
int.prototype = jQuery.fn
window.$ = jQuery;
})(window)
我们实现了类似jq的val()方法了
试验一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
</head>
<body>
<p>jquery test 1</p>
<script src="./MYjquery.js"></script>
<script>
//插件拓展
$.fn.getNodeName = function () {
return this[0].tagName;
}
</script>
<script>
var p = $('p');
console.log(`p的标签名为${p.getNodeName()}`); //获取节点名称
console.log(p.val());
</script>
</body>
</html>
最关键的一点使用jQuery.fn的方式利于拓展,上面代码体现了这一点,假如我们现在jq上面创建自己的方法,就把方法挂在jQuery.fn上面相当于在原型上面加方法
这里可以看到jquery一切都是基于原型,所以呀,讲原型,我用jquery来说明,感受到原型的强大
原型 - 实现自己的jQuery的更多相关文章
- jQuery原型技术分解
jQuery原型技术分解 起源----原型继承 用户过javascript的都会明白,在javascript脚本中到处都是 函数,函数可以归置代码段,把相对独立的功能封闭在一个函数包中.函数也可以实现 ...
- jQuery源码解析对象实例化与jQuery原型及整体构建模型分析（一）
//源码剖析都基于jQuery-2.0.3版本,主要考虑到兼容IE 一.关于jQuery对象实例化的逻辑: 整个jQuery程序被包裹在一个匿名自执行行数内: (function(window,und ...
- jQuery CVE-2019-11358原型污染漏洞分析和修复建议
一.安全通告 jQuery官方于日前发布安全预警通告,通报了漏洞编号为 CVE-2019-11358的原型污染漏洞.由攻击者控制的属性可被注入对象,之后或经由触发 JavaScript 异常引发拒绝服 ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- jQuery源码分析系列(39) : 动画队列
data函数在jQuery中只有短短的300行代码,非常不起点 ,剖析源码的时候你会发现jQuery只要在有需要保存数据的地方无时无刻不依赖这个基础设施 动画会调用队列,队列会调用data数据接口还保 ...
- jQuery构造函数分析
在我的上一篇文章里面 阐述了jQuery的大致框架,知道了所有代码都是写在了一个自调用匿名函数里面,并且传入了window对象,源码是这样的: (function( window, undefined ...
- jQuery系列：五个模块总结
Query插件,以备并希望在前端方面有所长进.请批评指正. 一,类型判断全解 JQuery判断类型扩展方法:$.type() /*type: function( obj ) { if ( obj == ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
- jquery 原理
/* * my-jquery-1.0 *//* * 网上也有很多实现的版本,不过这是我在我自己的理解下写的,加上注释,希望可以解释清楚.*//* * 整个jquery包含在一个匿名函数中,专业点叫闭包 ...
随机推荐
- 利用canvas进行一个饼形图的绘制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular自定义指令解决IE89不支持input的placeholder属性
下面代码实测通过,直接copy到本地运行即可. <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- [转] RISC-V架构介绍
1. RISC-V和其他开放架构有何不同 如果仅从"免费"或"开放"这两点来评判,RISC-V架构并不是第一个做到免费或开放的处理器架构. 在开始之前,我们先通 ...
- PHP and laravel知识点小小积累
function () use ($x, &$y){} 自从PHP5.3开始有了closure/匿名函数的概念,在这里的use关键词的作用是允许匿名函数capture到父函数scope 内存在 ...
- 华为HCNP实验 防火墙安全区域及安全策略配置（USG6000）
防火墙安全区域及安全策略配置 一.学习目的 掌握防火墙安全区域的配置方法 掌握安全策略的配置方法 二.拓扑图 三.场景 你是公司的网络管理员.公司总部的网络分成了三个区域,包括 ...
- springMVC+mybatis事务管理总结
1.spring,mybatis事务管理配置与@Transactional注解使用: 概述事务管理对于企业应用来说是至关重要的,即使出现异常情况,它也可以保证数据的一致性.Spring Framewo ...
- markdown中设置、调整图片尺寸
使用百分比描述尺寸 <img src="https://img2018.cnblogs.com/blog/1122471/201902/1122471-2019022218575673 ...
- lua-excel助手
excel是我们工作及生活当中不可或缺的东西,好吧,我是一个游戏程序员,数值哥哥肯定会给我些表格的.回归正题,为什么需要做这个封装? 为什么需要这个项目,因为我们需要使用程序进行自动化操作 VBA我们 ...
- 一、异步编程模型(APM)
一.概念 APM即异步编程模式的简写(Asynchronous Programming Model).大家在写代码的时候或者查看.NET 的类库的时候肯定会经常看到和使用以BeginXXX和EndXX ...
- 2017U-Mail邮件营销平台新邮件模板功能
据U-Mail调查表明,企业用户中普遍最关心群发邮件会不会被列入垃圾箱?的确,哪怕你最用功,一旦邮件进了垃圾箱,意味着全盘尽废.业界知名服务商U-Mail一直想用户之所想,急用户之所急,十几年如一日, ...