關於jq中的$.extend()跟$.fn.extend()區別


一、$.extend()的用法

  1.為擴展jQuery類本身,為自身添加新的方法。

  $.extend({

  min:((a,b) => a > b ? b : a ),

  max:((a,b) => a > b ? a : b )

  })

  $.min(3,5) //它是跟$.each一樣,屬於工具方法

    2.對象的擴展

  a.這個用法跟ES6的Object.assign()方法類似,擴展或復制一個對象,看例子

  var obj1 = {a:1,b:2}

  var obj2 = {c:5,a:4}

  $.extend({},obj1,obj2) //{a: 4, b: 2, c: 5}

  

  b. extend()第一個參數boolean代表是否進行深度拷貝,一般默認false,可以省略不寫。為true代表深度拷貝

  

  var result1=$.extend( true, {},
    { name: "John", location: {city: "Boston",county:"USA"} },
    { last: "Resig", location: {state: "MA",county:"China"} }
  );
  console.log(111,result1)//
  var result2=$.extend( {},
    { name: "John", location: {city: "Boston",county:"USA"} },
    { last: "Resig", location: {state: "MA",county:"China"} }
  );
  console.log(222,result2)
  

 

  可以看到第一個參數為false的時候,對象直接被覆蓋,為true的時候,對象是被合並了。

二、$.fn.extend()把對象掛載到了jq的原型(jQuery.prototype)上,為jq實例添加方法

  (function($){
    $.fn.extend({
      speak:function(){
        alert("how are you!");
      }
    });
  })(jQuery);
  <div id="div">測試</div>
  $('#div').speak()
 
  大部分插件都是用jQuery.fn.extend()

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM