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对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
jquery选择器使用详解
Apr 08 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 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
第一节--面向对象编程
2006/11/16 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
一些mootools的学习资源
2010/02/07 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python函数的作用域及关键字详解
2019/08/20 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Python collections模块的使用方法
2020/10/09 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
求职信格式范本
2013/11/15 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
个人合作协议书范本
2014/04/18 职场文书
保护环境的标语
2014/06/09 职场文书
实习协议书范本
2014/09/25 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
酒店前台岗位职责
2015/04/16 职场文书
民主生活会主持词
2015/07/01 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server