前言
專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)濟(jì)南免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
如今做web開發(fā)，jquery 幾乎是必不可少的，就連vs神器在2010版本開始將Jquery 及ui 內(nèi)置web項(xiàng)目里了。至于使用jquery好處這里就不再贅述了，用過的都知道。今天我們來討論下jquery的插件機(jī)制，jquery有著成千上萬的第三方插件，有時(shí)我們寫好了一個(gè)獨(dú)立的功能，也想將其與jquery結(jié)合起來，可以用jquery鏈?zhǔn)秸{(diào)用，這就要擴(kuò)展jquery，寫成插件形式了，如下面就是一個(gè)簡單擴(kuò)展Jquery對象的demo：
//sample:擴(kuò)展jquery對象的方法，bold()用于加粗字體。
(function ($) {
$.fn.extend({ ? ? ? ? ? ? ? ?"bold": function () { ? ? ? ? ? ? ? ? ? ?///summary
/// 加粗字體
////summary
return this.css({ fontWeight: "bold" });
}
});
})(jQuery);
調(diào)用方式：
這是一個(gè)非常簡單的擴(kuò)展。接下來我們一步步來解析上面的代碼。
一、jquery的插件機(jī)制
為了方便用戶創(chuàng)建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1. jQuery.extend() 方法有一個(gè)重載。
jQuery.extend(object) ,一個(gè)參數(shù)的用于擴(kuò)展jQuery類本身，也就是用來在jQuery類/命名空間上增加新函數(shù)，或者叫靜態(tài)方法，例如jQuery內(nèi)置的 ajax方法都是用jQuery.ajax()這樣調(diào)用的，有點(diǎn)像 “類名.方法名” 靜態(tài)方法的調(diào)用方式。下面我們也來寫個(gè)jQuery.extend(object)的例子：
//擴(kuò)展jQuery對象本身 ? ? ? ?jQuery.extend({ ? ? ? ? ? ?"minValue": function (a, b) { ? ? ? ? ? ? ? ?///summary
/// 比較兩個(gè)值，返回最小值
////summary
return a b ? a : b;
}, ? ? ? ? ? ?"maxValue": function (a, b) { ? ? ? ? ? ? ? ?///summary
/// 比較兩個(gè)值，返回最大值
////summary
return a b ? a : b;
}
}); ? ? ? ?//調(diào)用
var i = 100; j = 101; ? ? ? ?var min_v = $.minValue(i, j); // min_v 等于 100
var max_v = $.maxValue(i, j); // max_v 等于 101
重載版本：jQuery.extend([deep], target, object1,?[objectN])
用一個(gè)或多個(gè)其他對象來擴(kuò)展一個(gè)對象，返回被擴(kuò)展的對象。
如果不指定target，則給jQuery命名空間本身進(jìn)行擴(kuò)展。這有助于插件作者為jQuery增加新方法。
如果第一個(gè)參數(shù)設(shè)置為true，則jQuery返回一個(gè)深層次的副本，遞歸地復(fù)制找到的任何對象。否則的話，副本會(huì)與原對象共享結(jié)構(gòu)。
未定義的屬性將不會(huì)被復(fù)制，然而從對象的原型繼承的屬性將會(huì)被復(fù)制。
參數(shù)
deep:?????? 可選。如果設(shè)為true，則遞歸合并。
target:?????待修改對象。
object1:?? 待合并到第一個(gè)對象的對象。
objectN:?? 可選。待合并到第一個(gè)對象的對象。
示例1：
合并 settings 和 options，修改并返回 settings。
var settings = { validate: false, limit: 5, name: "foo" };?
var options = { validate: true, name: "bar" };?
jQuery.extend(settings, options);
結(jié)果：
settings == { validate: true, limit: 5, name: "bar" }
示例2：
合并 defaults 和 options, 不修改 defaults。
var empty = {};?
var defaults = { validate: false, limit: 5, name: "foo" };?
var options = { validate: true, name: "bar" };?
var settings = jQuery.extend(empty, defaults, options);
結(jié)果：
settings == { validate: true, limit: 5, name: "bar" }?
empty == { validate: true, limit: 5, name: "bar" }
這個(gè)重載的方法，我們一般用來在編寫插件時(shí)用自定義插件參數(shù)去覆蓋插件的默認(rèn)參數(shù)。
jQuery.fn.extend(object)擴(kuò)展 jQuery 元素集來提供新的方法（通常用來制作插件）。
首先我們來看fn 是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {.....};
};
原來 jQuery.fn = jQuery.prototype，也就是jQuery對象的原型。那jQuery.fn.extend()方法就是擴(kuò)展jQuery對象的原型方法。我們知道擴(kuò)展原型上的方法，就相當(dāng)于為對象添加”成員方法“，類的”成員方法“要類的對象才能調(diào)用，所以使用jQuery.fn.extend(object)擴(kuò)展的方法，?jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要區(qū)分開來。
二、自執(zhí)行的匿名函數(shù)/閉包
1. 什么是自執(zhí)行的匿名函數(shù)?
它是指形如這樣的函數(shù): (function {// code})();
2. 疑問 為什么(function {// code})();可以被執(zhí)行, 而function {// code}();卻會(huì)報(bào)錯(cuò)?
3. 分析
(1). 首先, 要清楚兩者的區(qū)別: ??? (function {// code})是表達(dá)式, function {// code}是函數(shù)聲明.
(2). 其次, js"預(yù)編譯"的特點(diǎn): ??? js在"預(yù)編譯"階段, 會(huì)解釋函數(shù)聲明, 但卻會(huì)忽略表式.
(3). 當(dāng)js執(zhí)行到function() {//code}();時(shí), 由于function() {//code}在"預(yù)編譯"階段已經(jīng)被解釋過, js會(huì)跳過function(){//code}, 試圖去執(zhí)行();, 故會(huì)報(bào)錯(cuò);
當(dāng)js執(zhí)行到(function {// code})();時(shí), 由于(function {// code})是表達(dá)式, js會(huì)去對它求解得到返回值, 由于返回值是一 個(gè)函數(shù), 故而遇到();時(shí), 便會(huì)被執(zhí)行.
另外， 函數(shù)轉(zhuǎn)換為表達(dá)式的方法并不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……
例如：
bootstrap 框架中的插件寫法：
!function($){
//do something;
}(jQuery);
和
(function($){
//do something;
})(jQuery); 是一回事。
匿名函數(shù)最大的用途是創(chuàng)建閉包（這是JavaScript語言的特性之一），并且還可以構(gòu)建命名空間，以減少全局變量的使用。
例如：
var a=1;
(function()(){
var a=100;
})();
alert(a); //彈出 1
更多 閉包和匿名函數(shù) 可查看?Javascript的匿名函數(shù)與自執(zhí)行?這篇文章。
三、一步一步封裝JQuery插件
接下來我們一起來寫個(gè)高亮的jqury插件
1.定一個(gè)閉包區(qū)域，防止插件"污染"
//閉包限定命名空間(function ($) {
})(window.jQuery);
2.jQuery.fn.extend(object)擴(kuò)展jquery 方法，制作插件
//閉包限定命名空間(function ($) {
$.fn.extend({ ? ? ? ?"highLight":function(options){ ? ? ? ? ? ?//do something ? ? ? ?}
});
})(window.jQuery);
3.給插件默認(rèn)參數(shù)，實(shí)現(xiàn) 插件的功能
//閉包限定命名空間(function ($) {
$.fn.extend({ ? ? ? ?"highLight": function (options) { ? ? ? ? ? ?var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認(rèn)參數(shù)
this.each(function () { ?//這里的this 就是 jQuery對象
//遍歷所有的要高亮的dom,當(dāng)調(diào)用 highLight()插件的是一個(gè)集合的時(shí)候。
var $this = $(this); //獲取當(dāng)前dom 的 jQuery對象，這里的this是當(dāng)前循環(huán)的dom
//根據(jù)參數(shù)來設(shè)置 dom的樣式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
});
}
}); ? ?//默認(rèn)參數(shù)
var defaluts = {
foreground: 'red',
background: 'yellow'
};
})(window.jQuery);
到這一步，高亮插件基本功能已經(jīng)具備了。調(diào)用代碼如下：
$(function () {
$("p").highLight(); //調(diào)用自定義 高亮插件});
這里只能 直接調(diào)用，不能鏈?zhǔn)秸{(diào)用。我們知道jQuey是可以鏈?zhǔn)秸{(diào)用的，就是可以在一個(gè)jQuery對象上調(diào)用多個(gè)方法，如：
$('#id').css({marginTop:'100px'}).addAttr("title","測試“);?
但是我們上面的插件，就不能這樣鏈?zhǔn)秸{(diào)用了。比如：$("p").highLight().css({marginTop:'100px'}); //將會(huì)報(bào)找不到css方法，原因在與我的自定義插件在完成功能后，沒有將 jQuery對象給返回出來。接下來，return jQuery對象，讓我們的插件也支持鏈?zhǔn)秸{(diào)用。（其實(shí)很簡單，就是執(zhí)行完我們插件代碼的時(shí)候?qū)Query對像return 出來，和上面的代碼沒啥區(qū)別）
Query實(shí)質(zhì)上是一個(gè)構(gòu)造函數(shù)，該構(gòu)造函數(shù)接受一個(gè)參數(shù)，jQuery通過這個(gè)參數(shù)利用原生API找到節(jié)點(diǎn)，之后返回一個(gè)方法對象，該方法對象上的方法對節(jié)點(diǎn)進(jìn)行操作(方法使用了閉包)。
1.可以通過封裝函數(shù)的方法。? ??
這時(shí)候可以通過傳入節(jié)點(diǎn)和類名來實(shí)現(xiàn)addClass的操作。但是這樣會(huì)污染變量。比如覆蓋掉其他的addClass方法。
2.通過封裝命名空間的方法。
var?obj = {}
obj.addClass(node,classes){? classes.forEach((value) = {node.classList.add(value)}) }
封裝命名空間就是所有封裝的函數(shù)放入一個(gè)對象之中，通過調(diào)用對象來調(diào)用封裝的函數(shù)，這樣不會(huì)污染全局變量。
3.通過原型鏈調(diào)用封裝函數(shù)
這種方法的優(yōu)點(diǎn)是無侵入。jQuery構(gòu)造函數(shù)生成一個(gè)新的對象，并給對象封裝方法，不會(huì)修改節(jié)點(diǎn)上的原生Node對象。
然后通過window.$ = jQuery,通過$()就可以調(diào)用里面定義的addClass,getSiblings等方法了。
封裝，就是把某個(gè)功能做個(gè)一個(gè)方法(你理解得沒錯(cuò),差不多就是這個(gè)意思,但還是沒理解透徹)
封裝就是把一些公共方法,用的頻繁的方法單獨(dú)提出來,單獨(dú)寫在一個(gè)js文件中.每次調(diào)用js文件就行.就不必每個(gè)地方用的時(shí)候都要重寫.而且改起來也相當(dāng)麻煩.
要達(dá)到你想要的這種方式需要封裝一個(gè)JS插件
/*注：插件前的分號(hào)不是多余的，是為了保證前面的代碼在沒有以分號(hào)結(jié)尾的情況下也能正常運(yùn)行*/
;(function($,?window,?document,?undefined)?{
$.fn.myResize?=?function()?{
var?$this?=?$(this);
var?wndWidth?=?$(window).width();
var?wndHeight?=?$(window).height();
var?myWidth?=?$this.width();
var?myHeight?=?$this.height();
var?top?=?(wndHeight?-?myHeight)?/?2;
var?left?=?(wndWidth?-?myWidth)?/?2;
$this.css({?"top":?top,?"left":?left?});
}
})(jQuery,?window,?document,?undefined);
$(document).ready(function()?{
$("#div").myResize();
$(window).resize(function()?{
$("#div").myResize();
});
});
看你的代碼是想實(shí)現(xiàn)控件居中的功能，其實(shí)使用CSS就可以解決：
#div?{
position:?fixed;/*如果是相對于屏幕居中該屬性用fixed，如果是相對于父控件居中父控件的該屬性設(shè)置為relative，該控件的該屬性設(shè)置為absolute*/
top:?50%;
left:?50%;
-webkit-transform:?translate(-50%,?-50%);
-ms-transform:?translate(-50%,?-50%);
transform:?translate(-50%,?-50%);
}
封裝對象是JS原生提供的功能~跟jquery無關(guān)~
例如：
var car = new Object();
car.color = "Red";
car.run = function(){
//...
}
以上是基本封裝方式
還有一種簡便方式：
var car = {
color: "Red",
run: function(){
//...
}
};
這樣合基本方法一回事
使用jquery可以擴(kuò)展jquery對象，也可以編寫ui~
希望對您有幫助~
By Billskate
重慶分公司
重慶分公司
