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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
js实现简单进度条效果
Mar 25 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 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入门
2006/10/09 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
为什么要使用Vuex的介绍
2019/01/19 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
Python实现字符串逆序输出功能示例
2017/06/24 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
基于Python的PIL库学习详解
2019/05/10 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
销售人员工作自我评价
2014/09/21 职场文书
2014年质量工作总结
2014/11/22 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python