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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
vue实现登录功能
Dec 31 Vue.js
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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP Google的translate API代码
2008/12/10 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
Expandable "Detail" Table Rows
2007/08/29 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
在react中使用vuex的示例代码
2018/07/30 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
python3中bytes和string之间的互相转换
2017/02/09 Python
python中的计时器timeit的使用方法
2017/10/20 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
python中time、datetime模块的使用
2020/12/14 Python
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
物业招聘计划书
2014/01/10 职场文书
党员干部公开承诺书
2014/03/26 职场文书
环保倡议书范文
2014/05/12 职场文书
校庆活动策划方案
2014/06/05 职场文书
2014年班组工作总结
2014/11/20 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
李强优秀员工观后感
2015/06/16 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫