jQuery拷貝對象、jQuery多庫共存、jQuery插件

jQuery拷貝對象

• 如果想要把某個對象拷貝（合併）給另外一個對象使用，此時就可以使用$.extend()方法。
• 語法：

$.extend([deep],target,object1,[objectN])

1. deep：如果設爲true爲深拷貝，默認爲false淺拷貝。
2. target：要拷貝的目標對象。
3. object1：待拷貝到第一個對象的對象。
4. objectN：待拷貝到第N個對象的對象。
5. 淺拷貝是把被拷貝的對象複雜數據類型中的地址拷貝給目標對象，修改目標對象會影響被拷貝對象。
6. 深拷貝，前面加true，完全克隆（拷貝對象，而不是地址），修改目標對象不會影響被拷貝對象。
7. 複雜數據類型屬性名相同時，淺拷貝和深拷貝的區別：

//淺拷貝：
var targetObj = {
  id: 0,
  mag: {
  sex: '男'
}
};
var obj = {
  id: 1,
  name: 'andy',
  msg: {
    age: 22
  }
};
$.extend(targetObj,obj);
console.log(targetObj);
//輸出結果爲：targetObj = {id: 1,name: 'andy', msg: {age: 22}                                                                                                                                                                                                                                                                 

//深拷貝：
var targetObj = {
  id: 0,
  mag: {
  sex: '男'
}
};
var obj = {
  id: 1,
  name: 'andy',
  msg: {
    age: 22
  }
};
$.extend(true,targetObj,obj);
console.log(targetObj);
//輸出結果爲：targetObj = {id: 1,name: 'andy', msg: {sec: '男',age: 22}}

• 存在多個待拷貝的對象（object1,objectN）的情況：

  var obj={};
  var obj1={
  name: 'andy',
  sex: '男'
  };
  var obj2={
  name: 'Marry',
  age: 30
  }
  //$.extend(obj,obj1)  //把obj1拷貝到obj上面
  $.extend(obj,obj1,obj2)//屬性會覆蓋，obj{name: "Marry", sex: "男", age: 30}

• 如果我們想保留原對象，我們可以通過傳遞一個空對象作爲目標對象（target）：

var obj = $.extend({}, object1, object2);

jQuery多庫共存

• 起因：jQuery使用$作爲標識符，隨着jQuery的流行，其他js庫也會用該符號作爲標識符，這樣一起使用就會引起衝突。

• 多庫共存定義：爲了讓jQuery和其他js庫不存在衝突，可以同時存在。

• 方法：

  1.把裏面的$符號統一改爲jQuery，比如：jQuery(“div”)。

  2.jQuery變量規定新的名稱：$.noConflict()，比如：

  var xxx = $.noConflict();
  xxx("div");		//相當於$("div")	
  

jQuery插件

• jQuery插件也是依賴於jQuery完成的，所以必須先引入jQuery文件。

• jQuery插件常用的網站：

  1.jQuery插件庫：http://www.jq22.com/

  2.jQuery之家：http://www/htmleaf.com/

• jQuery插件使用步驟：

  1.引入相關文件。（jQuery文件和插件文件）

  2.複製相關html、css、js（調用插件）

• jQuery插件舉例：

  1.瀑布流（jQUery之家）

  2.圖片懶加載（圖片使用延遲加載可提高網頁下載速度，也能幫助減輕服務器負載）（jQuery插件庫）

  其實，圖片懶加載就是當頁面滑動到可視區域，再顯示圖片。

  使用jQuery插件庫EasyLazyload時，要注意此時的js引入文件和js調用必須寫到DOM元素（圖片）最後面。

  3.全屏滾動（fullpage.js）

  GitHub：https://github.com/alvarotrigo/fullPage.js

  中文翻譯網站：http://www.dowebok.com/demo/2014/77/

• bootstrap JS插件：

  bootstrap框架也是依賴於jQuery開發的，因此裏面的js插件使用，也必須引入jQuery文件。

  使用方法跟一般的插件的使用方法一致。

---

微信公衆號也會定期更新，覺得文章寫得還可以的，可以加個關注！點個贊！謝謝！