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

相信每位前端的小伙伴对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的简单实现原理全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • Jquery中扩展方法extend使用技巧

    在使用Jquery开发的过程中,extend是常用的参数处理函数,特别是对默认值的使用. Jquery的扩展方法原型是: var v=$.extend(dest,src1,src2,[,src3...]); 作用是把src1,src2,src3合并到到dest中并返回合并后的dest. 但是在使用过程中,默认值往往是不能被改变的, 如下: var defaut={'selector':'select','default':'默认值','backcolor':'#85e137','forecolo

  • jQuery中extend函数详解

    在jQuery的API手册中,我们看到,extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法,尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的,但是它们的功能却不太一样.来看一下 官方API对extend 的解释: 代码如下: 复制代码 代码如下: jQuery.extend(): Merge the contents of two or more objects together into the first

  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 复制代码 代码如下: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以用

  • Jquery实现$.fn.extend和$.extend函数

    前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的节点对象扩展方法,是基于$的原型扩展的方法 $.extend是扩展常规方法,是$的静态方法. 我们之前写的代码看一下: (function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(sel

  • 模仿JQuery.extend函数扩展自己对象的js代码

    但在写的过程中发现,如果要在之前写好的对象中添加新的静态方法或实例方法,要修改原有的对象结构,于是查看了jquery了extend方法,果然extend方法支持了jq的半边天,拿来主义,给自己的对象做扩张用. 下面进入正题: 假如有以下一个对象 复制代码 代码如下: var MyMath = { //加法 Add: function(a, b){ return a + b; }, //减法 Sub: function(a, b){ return a - b; } } 对象名MyMath,有两个静

  • 浅谈jQuery中的$.extend方法来扩展JSON对象

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果 set

  • jQuery中extend函数简单用法示例

    jQuery中extend函数简单用法示例

    本文实例讲述了jQuery中extend函数简单用法.分享给大家供大家参考,具体如下: var result=$.extend({},item,item1); extend给对象添加新的属性:js插件经常使用来配置参数 {}:item和item1合并后的结果 item:默认属性 item1:新增属性,如果item1和item属性重合则会覆盖item1中的属性 <span id="Test"></span> var item={"name":&

  • jQuery中extend函数的实现原理详解

    jQuery中extend函数的实现原理详解

    extend()是jQuery中一个重要的函数,作用是实现对对象的扩展, 它经常用于jQuery插件的开发,jQuery内部也使用它来扩展属性方法,如上篇文章中讲到的noConflict方法,就是用extend方法来扩展的. 在jQuery的API手册中,我们看到,extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法,尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的,但是它们的功能却不太一样.来看一下官方API对

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

    相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码. 本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的.(大牛可以出门右拐......) 我们可以模拟创建一个迷你jQuery. var $ = {

  • jQuery插件扩展测试实例

    本文实例讲述了jQuery插件扩展测试方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

  • Mybatis插件扩展及与Spring整合原理分析

    前言 前面几篇文章分析了Mybatis的核心原理,但模块较多,没有一一分析,更多的需要读者自己下来研究.不过Mybatis的插件扩展机制还是非常重要的,像PageHelper就是一个扩展插件,熟悉其扩展原理,才能更好的针对我们的业务作出更合适的扩展.另外,现在Mybatis都是和Spring/SpringBoot一起使用,那么Mybatis又是如何与它们进行整合的呢?一切答案尽在本文之中. 正文 插件扩展 1. Interceptor核心实现原理 熟悉Mybatis配置的都知道,在xml配置中我

  • jQuery插件扩展实例【添加回调函数】

    本文实例讲述了jQuery插件扩展的方法.分享给大家供大家参考,具体如下: <script language="javascript" type="text/javascript"> function doSomething(callback) { // - // Call the callback callback('stuff', 'goes', 'here'); // 给callback赋值,callback是个函数变量 } function fo

  • 利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码

    尤其是在当今各种浏览器满天飞(据说仅以IE为内核的浏览器就有200种之多). 小弟今天写了个基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本.可识别各种浏览器的内核,并已经支持多种国内主流浏览器. 费话不多说,上我的JavaScript代码:(文件名:jquery.browsertype-1.0.js) 复制代码 代码如下: /** * jQuery插件开发方法二:第一步:插件定义 */ jQuery.myPlugin = { //获得浏览器的内核与外壳的类型和版本 Clie

  • jQuery插件原来如此简单 jQuery插件的机制及实战

    jQuery插件的种类 1.封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式"插"在内核上的,例如parent()方法,appendTo()方法等. 2.封装全局函数 可以将独立的函数加到jQuery命名空间下.如常用的jQuery.ajax()方法.去首尾空格的jQuery.trim()方法,都是jQ

  • Jquery插件写法笔记整理

    jQuery插件类型: 1. jQuery方法: 大部分jQuery插件都是这种类型的插件,由于这种插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器优势. 2. 全局函数: 也可以把自定义的功能函数独立附加到jQuery命名空间下,从而作为jQuery作用域下的一个公共函数使用.但全局函数没有被绑定到jQuery对象上,故不能在选择器获取的jQuery对象上调用.需要通过jQuery.fn()或$.fn()方式进行引用. 3. 选

  • 10分钟学会写Jquery插件实例教程

    有很多朋友都用过jquery插件,但是很少有人自己动手写过jQuery插件,本文就以实例形式简单叙述了jQuery插件的实现方法.分享给大家供大家参考之用.具体方法如下:   具体而言,其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍.   现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的.信不信由你们,反正

  • 基于Jquery插件Uploadify实现实时显示进度条上传图片

    基于Jquery插件Uploadify实现实时显示进度条上传图片

    先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 1).支持单文件或多文件上传,可控制并发上传的文件数 2).在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java-- 3).通过参数可配置上传文件类型及大小限制 4).通过参数可配置是否选择文件后自动

  • 24款热门实用的jQuery插件推荐

    24款热门实用的jQuery插件推荐

    Vanity Toolset vanity toolset是一套方便的UI工具集,可以帮助你快速的搭建幻灯,聚光灯,占位,收放相关的UI,它完成了大部分的UI功能,你只需要花费很少时间就可以构建一个完整功能的UI percentageloader 这个漂亮的进度条插件可以帮助你快速构建一个功能丰富的加载条,让你的界面不在千篇一律. Blur.JS 一个帮助你创建元素透明效果的jQuery插件. GIPS 一个超干净整洁的工具提示jQuery插件,基于Gips的免费素材 NESTABLE 一个帮助

随机推荐