資訊專欄INFORMATION COLUMN
摘要：，翻譯自官方網(wǎng)站。如何建立一個基礎(chǔ)的插件有時，你想要在你的代碼里面實(shí)現(xiàn)一個可復(fù)用的功能。譯者注建立一個基礎(chǔ)的插件假設(shè)我們現(xiàn)在要建立一個讓元素里的文字變綠的插件。鏈?zhǔn)讲僮髯畲蟮奶攸c(diǎn)之一就是支持鏈?zhǔn)讲僮鳌＠缱g者注的作用是返還的控制權(quán)。
_How to Create a Basic Plugin_， 翻譯自 jQuery 官方網(wǎng)站。
如何建立一個基礎(chǔ)的插件有時，你想要在你的代碼里面實(shí)現(xiàn)一個可復(fù)用的功能。
舉個例子，如果你想要在一個 jQuery 對象上調(diào)用一個簡單的方法，來對這個對象進(jìn)行一系列的操作，那么你應(yīng)該寫一個 jQuery 插件。
在開始寫插件之前，我們必須對 jQuery 的工作方式有些許的認(rèn)識。來看下面的代碼：
$( "a" ).css( "color", "red" );
這是一句非常基礎(chǔ)的 jQuery 代碼，但是你知道它背后發(fā)生了什么嗎？當(dāng)你使用 $ 去選擇元素的時候，它就會返回一個 jQuery 對象。這個對象包含可用的所有方法（.css(), .click()等）和所有符合你傳入選擇器的元素。
這個對象從 $.fn 對象繼承所有的方法。 $.fn 對象包括所有 jQuery 對象的方法，也就是說，如果你想添加自己的方法的話，你需要將方法添加到 $.fn 對象上。
建立一個基礎(chǔ)的插件※ 譯者注 ※
$.fn == $.prototype // true
假設(shè)我們現(xiàn)在要建立一個讓元素里的文字變綠的插件。
我們需要做的只是在 $.fn 里添加一個方法 greenify。
$.fn.greenify = function() {
this.css( "color", "green" );
};
$( "a" ).greenify(); // Makes all the links green.
注意到我們在這段代碼里面用的是 this 而不是 $(this)。這是因?yàn)樵?greenify 函數(shù)中，this 指代的是 jQuery 對象，所以可以使用 jQuery 的所有方法。
鏈?zhǔn)讲僮?/b>jQuery 最大的特點(diǎn)之一就是支持鏈?zhǔn)讲僮?。鏈?zhǔn)讲僮鞯膶?shí)現(xiàn)是靠 jQuery 所有的方法返回 jQuery 對象來實(shí)現(xiàn)的（也有一些例外，比如無參數(shù)的 .width() 返回的就是寬度）。
只需要增加一行代碼，我們就可以讓我們的插件變得可以鏈?zhǔn)讲僮鳎?/p>
$.fn.greenify = function() {
this.css( "color", "green" );
return this;
};
$( "a" ).greenify(); // Makes all the links green.
命名空間
$ 這個變量在很多 JavaScript 庫里都很受歡迎。如果你一起使用 jQuery 和其他的庫，你可能就得用 jQuery.noConflict() 來讓 jQuery 返還對 $ 變量的控制權(quán)了。
然而由于 $ 變量已經(jīng)不是 jQuery 了，我們的插件就沒辦法工作了。要讓我們的插件繼續(xù)工作，并且也可以和其他的庫一起使用，我們需要將我們的代碼放入一個即時執(zhí)行函數(shù)表達(dá)式中，然后將jQuery當(dāng)做參數(shù)傳入，命名為 $：
(function ( $ ) {
$.fn.greenify = function() {
this.css( "color", "green" );
return this;
};
}( jQuery ));
除了上面提到的兩個功能，即時執(zhí)行函數(shù)增加了一層作用域，讓我們可以定義自己的私有變量。例如：
(function ( $ ) {
var shade = "#556b2f";
$.fn.greenify = function() {
this.css( "color", shade );
return this;
};
}( jQuery ));
減少綁定方法的數(shù)量※ 譯者注 ※
jQuery.noConflict() 的作用是返還 $ 的控制權(quán)。為什么說是返還呢？因?yàn)?jQuery 在初始化的時候，會記錄$ 這個變量，然后再將 $ 綁定為自身。
所以調(diào)用 jQuery.noConflict()，實(shí)際上是將 $ 賦值為之前記錄的舊值。
當(dāng)編寫插件時，我們最好只在 $.fn 上綁定一個方法。這不僅減少了其他的插件覆蓋你的插件的幾率，也減少了你的插件覆蓋其他插件的幾率。
使用 each() 方法一般來說，使用選擇器選擇的 jQuery 對象都是一個集合。如果你想對這里的某些元素進(jìn)行操作（比如獲取屬性，計(jì)算位置等），你就需要用到 .each() 方法來進(jìn)行遍歷。
$.fn.myNewPlugin = function() {
return this.each(function() {
// Do something to each element here.
});
};
※ 譯者注 ※
有讀者可能會問，在之前的代碼中 .css() 并沒有進(jìn)行遍歷，如何使所有元素里的問題都變成綠色？
這是因?yàn)?.css() 方法里已經(jīng)做了這個遍歷的工作了。
注意到我們返回的是 .each() 的結(jié)果，而不是 this。這是因?yàn)?.each() 也是可鏈?zhǔn)讲僮鞯模?它返回的也是 this。不過這樣寫更加契合鏈?zhǔn)讲僮鞯乃枷搿?/p> 接受用戶配置
當(dāng)你的插件變得越來越復(fù)雜的時候，你最好通過接受用戶的配置來讓用戶定制某些功能。
最簡單的方法就是使用一個對象來儲存配置。
(function ( $ ) {
$.fn.greenify = function( options ) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
color: "#556b2f",
backgroundColor: "white"
}, options );
// Greenify the collection based on the settings variable.
return this.css({
color: settings.color,
backgroundColor: settings.backgroundColor
});
};
}( jQuery ));
/* Example usage */
$( "div" ).greenify({
color: "orange"
});
默認(rèn)的顏色值 #556b2f 被用戶定義的值 orange 覆蓋。
完整的例子※ 譯者注 ※
x.extend([deep], target [,obj1][,objN]).extend() 方法主要是將所有 obj 的屬性和方法全部添加到 target 上。同名的會覆蓋，而 null 和 undefined 會被忽略。
當(dāng)只有一個參數(shù)的時候，x 就變成了 target，也就是將這個唯一的參數(shù)的所有方法和屬性全部添加到 x 中。x 可以是：
$
$.fn
$.extend() 和 $.fn.extend() 的不同也就非常明顯了。
(function( $ ) {
$.fn.showLinkLocation = function() {
this.filter( "a" ).append(function() {
return " (" + this.href + ")";
});
return this;
};
}( jQuery ));
HTML 結(jié)構(gòu)：
Foo Foo (page.html)
※ 譯者注 ※
上面的例子里， this.filter() 和 this.href 的 this 是不同的。前者是 jQuery 對象，后者是 HTMLElement 對象。var $links = $("a"); $links[0] instanceof HTMLElement; // true $links.slice(0, 1) instanceof jQuery; // true $links.each(function(){ this instanceof HTMLElement; // true });
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/85936.html
摘要：我們也可以在設(shè)置中間允許一個回調(diào)函數(shù)，來覆蓋默認(rèn)的函數(shù)，這也是一個支持定制的非常棒的方法。對外暴露了一個對象。所以我們的設(shè)置應(yīng)該像這樣對于也可以使用同樣的方法來實(shí)現(xiàn)提供回調(diào)函數(shù)如果你的插件是事件驅(qū)動的話，最好為每個事件提供回調(diào)函數(shù)。 _Advanced Plugin Concepts_，翻譯自 jQuery 官方網(wǎng)站。 默認(rèn)設(shè)置的共有接口 對于上一篇文章最后的代碼，我們可以改進(jìn)，也應(yīng)該...
以前我們敲靜態(tài)頁面都是寫好html，css, js，然后再去刷新瀏覽器，艾尼馬又不行，有重新寫過再刷新，一個頁面下來按chrl+r的次數(shù)可讓你的鍵盤多活好幾天，要不會刷新快捷按鈕那不得手殘了都。 后來，grunt,gulp等工具應(yīng)運(yùn)而生，當(dāng)然它們不止這個功能，但卻很好地減輕了我們的負(fù)擔(dān)。這篇文章介紹一些如何使用這些工具使構(gòu)建頁面變得簡單高效。這只是個人的目前在用的不成熟的方案，更專業(yè)的還請參考...
摘要：并不是所有人寫的代碼或者插件都適合小白使用，比如這是一個的滾動插件，大多數(shù)人使用了之后發(fā)現(xiàn)滾動不了，去作者提，其實(shí)是他們并不懂滾動的原理。 最近在這里看了一篇關(guān)于面試的文章《回顧自己三次失敗的面試經(jīng)歷》，作者三次倒在了輪播圖上。囧，所以我也寫個輪播圖看看。這次是用jQuery寫的，因?yàn)樽罱恢痹谘芯縥Query插件的寫法，所以用jQuery寫的，而且我發(fā)現(xiàn)，我vue用太多，完全不熟悉d...
摘要：更多資源請文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機(jī)化排序算法實(shí)現(xiàn)學(xué)習(xí)筆記數(shù)組隨機(jī)排序個變態(tài)題解析上個變態(tài)題解析下中的數(shù)字前端開發(fā)筆記本過目不忘正則表達(dá)式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛?cè)腴T的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfr...
摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗(yàn)證庫 SMValidator.js 前端表單驗(yàn)證工具分享 淺談前端線上部署與運(yùn)維 說到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對接、一起完...
閱讀 2867·2021-10-08 10:12
閱讀 3966·2021-09-22 15:45
閱讀 2555·2019-08-30 15:52
閱讀 2625·2019-08-29 18:44
閱讀 2644·2019-08-29 12:37
閱讀 1154·2019-08-26 13:36
閱讀 2561·2019-08-26 13:34
閱讀 1473·2019-08-26 12:20
