一、jQuery的封裝擴展 1、jQuery中extend方法使用 （掛在到jQuery和jQuery.fn兩對象身上的使用） 1.1、官方文檔定義： jQuery.extend Merge the contents of two or more objects together into the ...
一、jQuery的封裝擴展
1、jQuery中extend方法使用
（掛在到jQuery和jQuery.fn兩對象身上的使用）
1.1、官方文檔定義：
jQuery.extend Merge the contents of two or more objects together into the first object.把兩個或者多個對象合併到第一個對象當中；
jQuery.fn.extend Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.把對象掛載到 jQuery 的 prototype 上以擴展一個新的 jQuery 實例方法 。
1.2、extend方法功能說明
- 合併對象
jQuery.extend(target [, object1] [, objectN])
它的含義是將object1,objectN合併到target中,返回值為合併後的target,由此可以看出該方法合併後，是修改了target的結構
var newSrc=$.extend({},object1,object2,objectN.)//也就是將"{}"作為target參數。不會破壞時實際參數target的結構
var result=$.extend({},{name:"Tom",age:21},name:"Jerry",sex:"Boy"});
//result={name:"Jerry",age:21,sex:"Boy"}
- 深淺拷貝
jQuery.extend([deep], target, object1 [, objectN])
extend方法多了一個類型為 boolean 的 [deep] 傳參，當其為 true 時，將 object1 , objectN 深度複製 後合併到 target 中。
var obj1 = {
name: "John",
location: {
city: "Boston",
county: "USA"
}
}
var obj2 = {
last: "Resig",
location: {
state: "MA",
county: "China"
}
}
$.extend(false, {}, obj1, obj2);
// { name: "John", last: "Resig", location: { state: "MA", county: "China" }}
$.extend(true, {}, obj1, obj2);
// { name: "John", last: "Resig", location: { city: "Boston", state: "MA", county: "China" }}
由此可見：
深度複製 會遞歸遍歷每個對象中含有複雜對象（如：數組、函數、json對象等）的屬性值進行複製
淺度複製 不會對複雜對象內部處理直接用後邊的對象覆蓋第一個非boolean值得對象。
- jQuery類方法的擴展： jQuery類省略extend 方法中的 target 參數，該方法就只傳入 object 參數，該方法功能是將該 object 合併到調用 extend 方法的對象中。
-
jQuery對象級別的實例方法的擴展： jQuery.fn省略extend方法中的target 參數，
2、類級別的JQ封裝
類級別的插件開發最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態方法。
類方法：直接可以使用類引用，不需要實例化就可以使用的方法。一般在項目中 類方法 都是被設置為工具類使用
2.1 添加新的全局函數
jQuery.foo = function() { alert('This is a test.'); };
2.2 增加多個全局函數
jQuery.foo = function() {
alert('This is a test');
};
jQuery.bar = function(param) {
alert('This is a "' + param + '".');
};
jQuery.foo();
jQuery.bar();
$.foo();
$.bar('bar');
2.3 通過jQuery.extend(object)方法添加類方法
jQuery.extend({ foo: function() { alert('This is a test.'); }, bar: function(param) { alert('this is a "' + param +'".'); } });
2.4 使用命名空間
jQuery命名空間中，禁止使用了大量的javaScript函數名和變數名。但是仍然不可避免某些函數或變數名將於其他jQuery插件衝突，因此我們習慣將一些方法封裝到另一個自定義的命名空間。
jQuery.myPlugin = {
foo:function() {
alert('This is a test. ');
},
bar:function(param) {
alert('This is a "' + param + '".');
}
};
//採用命名空間的函數仍然是全局函數，調用時採用的方法：
$.myPlugin.foo();
$.myPlugin.bar('baz');
使用獨立的插件名可避免命名空間內函數的衝突。
3.對象級別的JQ封裝
- 實例方法 必須先創建實例，然後才能通過實例調用該 實例方法 。
1、對象級別擴展方法
形式1：
;(function($){ $.fn.extend({ pluginName:function(opt,callback){ //bodying } }) })(jQuery);
形式2：
;(function($) { $.fn.pluginName = function() { // bodying }; })(jQuery);
1）在jQuery環境下封裝自己的插件，首先為避免與其他庫的衝突，需要在插件的後面傳一個jQuery參數進去，對應的函數裡面的參數寫入$;(防止污染$函數)
2）未避免出現問題，需在插件的前後加入分號（分號的增加並不會影響程式的運行）
建議封裝框架：（當然也可以使用其他的形式，比如說把註冊成jq方法單獨拎出來，內容封裝成函數）
;(function($){
$.fn.tab = function(options){
var defaults = {
//各種參數的預設設置
}
var options = $.extend({},defaults,options);
this.each(function(){
//封裝的函數
});
return this;//為了更好的支持鏈式寫法
}
})(jQuery);
var options = $.extend({},defaults,options)：利用extend方法把 defaults對象的方法屬性全部整合到 options里,至於名字只是標識，符合規範即可。
this.each(function(){})：對所有滿足的選擇器註冊擴展方法。
return this:目標為實現jq的強大鏈式寫法，返回$對象。
廢話一句：別人的用的終究沒有自己的好，要麼不會，要麼會用，樣式、行為不喜好！！！（個人看法勿pengpengpeng）
二、jQuery插件
1.highcharts插件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hignCharts</title>
<style type="text/css">
.container{
width: 1000px;
height: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container" class="container">
</div>
</body>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript">
// 圖表初始化函數
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
inverted:'false',
},
series:[
{
name:"銷售額",
data:[20000,30000,20500,20500],
lineWidth:2
},
{
name:"銷售額",
data:[30000,11190,35100,46000].reverse()
}
],
title:{
align:"center",
text:"各季度銷售統計",
style:{ "color": "#ff0000", "fontSize": "20px" }
},
yAxis:{
title:{
text:"銷售額"
}
},
exporting:{
allowHTML:"true",
},
xAxis:{
title:{
text:"季度"
},
categories: ['一季度', '二季度', '三季度', '四季度'],
tooltip:{
padding:20,
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
}
},
legend:{
title:{
text:"類別"
}
},
credits: {
href: 'http://www.cnblogs.com/witkeydu/',
text: '大仲馬的博客',
style: {fontSize: 16, color: '#888888', fontWeight: 'bold'}
}
});
</script>
</html>
2.jqueryui插件
3.Autocomplete插件
4.Draggable插件
5.DatePicker插件
6.dialog插件
