2016-05-30

jQuery.extend()

常常在別人的 jQuery library 裡看到很多 jQuery function,應該要來瞭解一下。

第一個找簡單的 jQuery.extend()。

jQuery.extend() 功能簡單的講就是「物件屬性的聯集」,屬性包括 property 與 function。

例如:
var a = { name: 'Neil', say: function(){ alert('a'); } };
var b = { sex: 'M', say: function(){ alert('b'); } };
$.extend(a, b); // a  變成 { name: 'Neil', sex: 'M', say: function(){ alert('b'); } }
以 a 為底,將 b 的所有屬性包括 function 都複製到 a 裡,沒有同名就新增,有同名就覆蓋。

還可以同時聯集多個物件。
var a = { name: 'Neil', say: function(){ alert('a'); } };
var b = { sex: 'M', say: function(){ alert('b'); } };
var c = { name: 'Neil Chan', skill: 'js', say: function(){ alert('c'); } };
$.extend(a, b, c); // a  變成 { name: 'Neil Chan', sex: 'M', skill: 'js', say: function(){ alert('c'); } }
以 a 為底,先將 b 的所有屬性包括 function 都複製到 a 裡,再將 c 的所有屬性包括 function 都複製到 a 裡,沒有同名就新增,有同名就覆蓋,可以無限制的聯集 N 個物件。

以上用法有一個副作用,就是 a 會被玷污,改善的方法很簡單。
var a = { name: 'Neil', say: function(){ alert('a'); } };
var b = { sex: 'M', say: function(){ alert('b'); } };
var ab = $.extend({}, a, b);
改以空物件為底,並取得 $.extend() 的回傳物件即可。


$.extend 最常用來作為「預設值物件」,假設有一個 API 需要 5 個設定值,但這 5 個設定值都有預設值,也可以接受自訂。
var aDefault = {
    title: 'test',
    width: 100,
    height: 100,
    color: '#F00',
    speed: 'middle'
};
function aAPI(opts) {
  var settings = $.extend({}, aDefault, opts);
  // do the API
  // ...
}
aAPI(); // {title: "test", width: 100, height: 100, color: "#F00", speed: "middle"}
aAPI({ width: 200 }); // {title: "test", width: 200, height: 100, color: "#F00", speed: "middle"}
---
---
---

沒有留言:

張貼留言