Web语言 JQuery

【Web语言】jq中，extend实现插件拓展的原理是什么？这个插件是加到了哪里？

2021-01-29 16:38发布

站内问答 / Web前端
1871 4 5
发送
4条回答
Sauvignon
2楼 · 2021-01-29 17:49

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

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

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

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

1
2
3
4
5
$.extend({
   myFunction:function(obj){
     //do something....  
   }
 })

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

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

1
2
3
4
5
6
7
var $ = {
  extend:function(obj){
    for(var key in obj){
      this.__proto__[key]=obj[key];
    }
  }
}

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

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


希希
3楼 · 2021-02-01 09:04

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

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

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

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

1
2
3
4
5
$.extend({
   myFunction:function(obj){
     //do something....  
   }
 })

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

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

1
2
3
4
5
6
7
var $ = {
  extend:function(obj){
    for(var key in obj){
      this.__proto__[key]=obj[key];
    }
  }
}

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

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


收获很多
4楼 · 2021-02-01 09:15

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

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

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

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

1
2
3
4
5
$.extend({
   myFunction:function(obj){
     //do something....  
   }
 })

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

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

1
2
3
4
5
6
7
var $ = {
  extend:function(obj){
    for(var key in obj){
      this.__proto__[key]=obj[key];
    }
  }
}

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

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


IT学习
5楼 · 2021-02-01 09:41

JQuery的extend扩展方法：
      Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。
      一、Jquery的扩展方法原型是:　　　

 extend(dest,src1,src2,src3...);


      它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：

  var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。


      这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

 

      那么合并后的结果

  result={name:"Jerry",age:21,sex:"Boy"}


      也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。


相关问题推荐

  • web学习之后现在的就业形势Web语言 2021-12-07 14:38
    回答 24

    1、Web前端人才需求量大据国内第三方数据统计，未来五年我国信息化人才总需求高达1500万-2000万人。其中网络工程UI设计Web前端等人才的缺口最为突出，所以2020年Web前端的市场需求很大。更有甚者目前不仅大型互联网公司相继成立了专属的Web前端部门，中小型公...

  • elementUI table中怎么让表格生成时，Web语言 2021-11-24 14:32
    回答 6

    可以在后台返回数据之后调用table的toggleRowSelection方法来实现默认勾选

  • 为什么vs code中特殊字符不能高亮Web语言 编程语言 2021-11-18 19:11
    回答 13

    一个HTML文件，如果超过了500行，则HTML代码会自动保护，自动保护就不会全部显示HTML代码的颜色HTML代码不高亮，点击右下角切换语言为XML，即HTML代码部分高亮，带颜色再切换为HTML，则CSS和javascript部分高亮，带颜色显示代码...

  • 前端开发的前景怎么样？Web语言 2021-03-18 11:19
    回答 16
    已采纳

    1、行业发展好从我们身边的方方面面考虑，互联网行业无疑是现在发展前景最好的行业之一。WEB前端作为互联网+时代，用户体验为王的掌控者，同时单页面应用、数据可视化等这些都是通过前端开发者提高用户体验的方式。所以待遇是水涨船高的。2、人才需求大互联网...

  • load和DOMContentLoaded的区别Web语言 JavaScript 2021-02-01 10:22
    回答 2

    这两个事件都是在js原生开发时经常会用到的，比如需要对页面dom进行动态处理，这时就需要用到DOMContentLoaded和[removed]事件，大家都知道，就是在dom构建完毕后，才可以对dom元素进行操作，否则会获取不到相应的dom元素，但是DOMContentLoaded和[removed]还...

  • cookie，localStorage，sessiWeb语言 JavaScript 2021-02-01 09:28
    回答 11

    基本概念CookieCookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到记住密码，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStor...

  • 在vscode调试ajax的过程中，如何将httpWeb语言 JavaScript 2021-01-29 16:37
    回答 2

    在vscode 头疼的问题是 用浏览器查看网页！会是以文件夹的方式打开的！  我遇到这个问题 我还重新配置了Apache    ！ 但是现在可以解决：使用vscode  ==================== 打开cmd   : 在cmd 控制台中输入  ：   1.运行cnpm install live-server...

  • jQuery 是库（library）还是框架(frJQuery 2021-12-23 14:02
    回答 9

    jQuery是库，不是框架。库只管引进来使用，除了库接口，没有其他约束，随便怎么用，free style。而框架则有着各种各样的严格约束。

  • jQuery 怎么实现点击页面其他地方隐藏菜单？JQuery 2021-12-23 14:01
    回答 4

    *{undefinedmargin:0px;padding:0px;}.main{undefinedcursor:pointer;}.list{undefinedborder:1px solid black;display:none;}.list li{undefinedcursor:pointer;border:1px solid red;list-style:none;}#noPopEvent...

  • jQuery的css选择器哪几个用的比较多？JQuery 2021-12-21 09:56
    回答 6

    id、name、class这三种会了就行了，后面在实践中慢慢学习吧。。不过现在纯前端好像都不咋用jquery了

  • 前端工程师如何从jquery平滑到react?JQuery 2021-12-21 09:55
    回答 5

    文档过一遍，感觉理解了写一个todolist，然后把react-router文档过一遍，写一个todolist，最后把redux文档看一遍，写一个todolist。这样下来，react全家桶基本理解了

  • 前端技术的发展趋势如何，jquery会被逐渐淘汰吗JQuery 2021-12-20 14:34
    回答 6

    前端技术每年都会不断更新，一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，前端技术工程师缺口非常大。技术的发展规律其实，技术的发展趋势就是追求更高的复用性，更简便的业务代码写法，所以最终都会要求跨平台、都会彻底分离非业务逻辑。j...

  • 用 jQuery 调用外部 HTML 文件，对 SJQuery 2021-12-20 14:34
    回答 3

    有一定影响,而且不仅对蜘蛛,如果用户浏览器把js禁用的话也显示不了

  • 有什么大站用 jQuery 作为前端脚本开发的呢？JQuery 2021-12-17 10:42
    回答 5

    国外还有 Amazon, 全球最大的电子商务网站。还有微软，很多很多。

  • JavaScript 除了 jQuery 还有什么JQuery 2021-12-17 10:42
    回答 4

    前端框架的vue.js,angular.js,可视化工具d3.js,移动端：zepto等

没有解决我的问题，去提问