Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)
前面我們擴(kuò)展了bind方法和ready函數(shù)，這次我要講一下$.fn.extend 和$.extend函數(shù)。
其他的不多說(shuō)，直接切入主題吧！
先來(lái)看看這兩個(gè)函數(shù)的區(qū)別：
$.fn.extend是為查詢的節(jié)點(diǎn)對(duì)象擴(kuò)展方法，是基于$的原型擴(kuò)展的方法
$.extend是擴(kuò)展常規(guī)方法，是$的靜態(tài)方法。
我們之前寫(xiě)的代碼看一下：
(function (win) {
var _$ = function (selector, context) {
return new _$.prototype.Init(selector, context);
}
_$.prototype = {
Init: function (selector, context) {
},
each: function (callback) {
}
}
_$.prototype.Init.prototype = _$.prototype;
window.$ = window.JQuery = _$;
})(window);
這個(gè)是主體的代碼。
我來(lái)先來(lái)擴(kuò)展$.fn.extend方法：
這個(gè)方法的初衷是我們擴(kuò)展之后可以用$("").newMetod()這樣訪問(wèn)，實(shí)際上就是給$原型加一個(gè)extend方法。這中間的fn其實(shí)類似于命名空間的作用，沒(méi)什么實(shí)際的意義。為的是和 $.extend作區(qū)分。
熟悉原型的其實(shí)一看就知道:讓$.fn指向$的原型不就行了？
于是我們就有了下面一段代碼： _$.fn = _$.prototype;
接下來(lái)我們就來(lái)加上extend方法了：
var isObj = function (o) {
return Object.prototype.toString.call(o) === "[object Object]";
}
_$.fn.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj[i];
}
}
}
這段代碼中isObj的作用是判斷傳入的參數(shù)是不是object對(duì)象， _$.fn.extend 這個(gè)方法其實(shí)和_$.prototype.extend 一樣的，大家看一下，這個(gè)代碼可能和JQUERY源碼不太一樣，我是按照自己的意思寫(xiě)的。
下面我們來(lái)實(shí)現(xiàn)$.extend方法，剛才已經(jīng)說(shuō)過(guò)了，這個(gè)方法其實(shí)是為$加一個(gè)靜態(tài)方法，代碼如下：
$.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj[i];
}
}
}
你會(huì)發(fā)現(xiàn)兩個(gè)方法是一樣的，不過(guò)你仔細(xì)琢磨一下，是不一樣的：
_$.fn.extend里面的this其實(shí)是代表$.prototype, $.extend 里面的this代表的是$。
這兩個(gè)方法我們實(shí)現(xiàn)了，奉上全部代碼：
(function (win) {
var _$ = function (selector, context) {
return new _$.prototype.Init(selector, context);
}
_$.prototype = {
Init: function (selector, context) {
},
each: function (callback) {
}
}
_$.prototype.Init.prototype = _$.prototype;
_$.fn = _$.prototype;
var isObj = function (o) {
return Object.prototype.toString.call(o) === "[object Object]";
}
_$.fn.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj[i];
}
}
}
_$.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj[i];
}
}
}
window.$ = window.JQuery = _$;
})(window);
使用方法其實(shí)就是
$.fn.extend(
{
method:function(){
}
})
$.extend(
{
method:function(){
}
})
代碼和Jquery源碼不一樣，我這是為了簡(jiǎn)化寫(xiě)的方法，大家主要是要琢磨里面的思想，謝謝大家的閱讀。
相關(guān)文章
jquery亂碼與contentType屬性設(shè)置問(wèn)題解決方案
讓人頭痛的Jquery亂碼問(wèn)題。其實(shí)這方面文章已經(jīng)很多了，但全面解決各種問(wèn)題的很少，今天總結(jié)一下，方便自己也方便大家,感興趣的朋友可以了解下哦2013-01-01
jQuery Animation實(shí)現(xiàn)CSS3動(dòng)畫(huà)示例介紹
jQuery Animation的工作原理是通過(guò)將元素的CSS樣式從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)，下面以一個(gè)實(shí)例為大家詳細(xì)介紹下具體的實(shí)現(xiàn)，感興趣的朋友可以參考下2013-08-08
jQuery中parentsUntil()方法用法實(shí)例
這篇文章主要介紹了jQuery中parentsUntil()方法用法,實(shí)例分析了parentsUntil()方法的功能、定義及根據(jù)條件查找匹配元素的所有的祖先元素使用技巧,需要的朋友可以參考下2015-01-01
圖片放大鏡jquery.jqzoom.js使用實(shí)例附放大鏡圖標(biāo)
這篇文章主要介紹了圖片放大鏡jquery.jqzoom.js的使用另附放大鏡圖標(biāo),需要的朋友可以參考下2014-06-06
結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jquery版和原生JS版)
日常項(xiàng)目中常用到的,用jQuery和原生JS分別寫(xiě)了一個(gè). 兩種寫(xiě)法均實(shí)現(xiàn)了結(jié)構(gòu)/表現(xiàn)/行為的完全分離.當(dāng)然,稍作修改,可以在同一個(gè)頁(yè)面中應(yīng)用于多個(gè)選項(xiàng)卡.2010-08-08
$.fn是指jquery的命名空間，加上fn上的方法及屬性，會(huì)對(duì)jquery實(shí)例每一個(gè)有效，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2013-11-11
JQuery處理json與ajax返回JSON實(shí)例代碼
json數(shù)據(jù)是一種經(jīng)型的實(shí)時(shí)數(shù)據(jù)交互的數(shù)據(jù)存儲(chǔ)方法，使用到最多的應(yīng)該是ajax與json配合使用了，下面我來(lái)給大家介紹jquery處理json數(shù)據(jù)方法2014-01-01
jQuery 實(shí)現(xiàn)ajax傳入?yún)?shù)含有特殊字符的方法總結(jié)
在做ajax登錄時(shí)候遇到的一個(gè)問(wèn)題，當(dāng)傳入?yún)?shù)含有特殊字符，比如：“$'#@”等。參數(shù)傳遞會(huì)有問(wèn)題，無(wú)法正確獲取。本文章向碼農(nóng)介紹jQuery ajax特殊字符參數(shù)解決方法，需要的朋友可以參考一下。2016-10-10
jQuery EasyUI 獲取tabs的實(shí)例解析
左邊tree，右邊tabs。點(diǎn)擊tree增加相應(yīng)的tabs。下面通過(guò)一段代碼給大家解析，需要的朋友參考下吧2016-12-12
jquery復(fù)選框checkbox實(shí)現(xiàn)刪除前判斷
頁(yè)面有很多數(shù)據(jù)，可以刪除一條或多條，刪除前判斷是否選中至少一條，否則提示，具體示例如下，需要的朋友可以參考下2014-04-04