jQuery插件扩展extend的简单实现原理


Posted in Javascript onJune 24, 2016

相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能。

前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码。

本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的。(大牛可以出门右拐......)

我们可以模拟创建一个迷你jQuery。

var $ = {};

好的,就这么简单......

下面我们要在这个对象上挂载一个extend方法,用于让开发者为我这个对象添加功能和方法。

var $ = {
   extend:function(ob){
      /**暂时不管里面写什么**/
   } 
 }

现在,我们就在$这个对象上添加了一个extend方法,外部可以通过$.extend(obj)的方法去调用它。

假设现在我们要往$上面添加一个方法,也就是添加一个插件,我们只需要:

$.extend({
   myFunction:function(obj){
     //do something....   
   }
 })

现在只需要$.myFunction(obj);就可以实现方法内所要做的事了。

问题的关键来了,我们明明是把方法挂载在$.extend上,为什么可以直接用$去调用?这里就要看看extend内部是怎么处理传入的obj了。

var $ = {
  extend:function(obj){
    for(var key in obj){
      this.__proto__[key]=obj[key];
    }
  }
}

原来,extend把传入的obj遍历,然后挂到$的__proto__上了,这样,$随时都能够调用原型上的方法。

当然,实际上jQuery的extend实现比这个复杂的多,这里只是介绍了jQuery插件底层实现的基本思想,把公共的方法挂载到对象的原型上。

具体的插件编写可以看看文章开头的链接,我把插件编写的每个细节都做了注释,大家相互学习!

以上就是小编为大家带来的jQuery插件扩展extend的简单实现原理全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
javascript事件模型实例分析
Jan 30 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
vue组件横向树实现代码
Aug 02 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 #Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 #Javascript
jQuery模仿单选按钮选中效果
Jun 24 #Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 #Javascript
jQuery如何获取动态添加的元素
Jun 24 #Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 #Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 #Javascript
You might like
PHP禁止页面缓存的代码
2011/10/23 PHP
php检测文本的编码
2015/07/26 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
Python内置函数property()如何使用
2020/09/01 Python
Python使用Pygame绘制时钟
2020/11/29 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
医院护士的求职信
2014/01/03 职场文书
开学典礼演讲稿
2014/05/23 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
公司老总年会致辞
2015/07/30 职场文书
详解Python内置模块Collections
2022/03/22 Python
Python Numpy库的超详细教程
2022/04/06 Python