JavaScript插件設計模式像jQuery

有人可以寫一個非常簡單的基本示例在JavaScript中概念化（並希望讓我明白）如何完成jQuery插件設計模式以及它是如何工作的？JavaScript插件設計模式像jQuery

我對如何爲jQuery創建插件不感興趣（所以沒有jQuery代碼在這裏的所有）。我對一個簡單的解釋感興趣（可能用一些Javascript代碼）來解釋它是如何完成插件概念的。

Plz不回覆我去閱讀jQuery代碼，我試過了，但是它太複雜了，否則我不會在這裏發表一個問題。

謝謝！

2010-05-20 Marco Demaio

它的工作原理與許多其他js框架一樣，使用javascript原型方向。

例如，您可以聲明一個簡單的函數

var alertHelloWorld = function() { 
    alert('hello world'); 
}

然後把它綁現有對象（包括DOM節點）

document.doMyAlert = alertHelloWorld;

如果你這樣做

document.doMyAlert();

alertHelloWorld函數將被執行

你可以閱讀更多關於JavaScript對象原型here

來源

2010-05-20 11:46:30 Benoit

不幸你的例子根本不使用原型。這是有效的，因爲在JavaScript中，函數是第一類對象，可以像任何其他變量一樣傳遞和分配。 – adamnfish 2010-05-20 11:50:20

是的，原型對象存在於聲明爲這樣的對象上，它以相似的方式工作。我可以從底部鏈接複製/粘貼 Object.prototype.inObj = 1; 功能A（） { this.inA = 2; } A.prototype.inAProto = 3; B.prototype = new A; //將A連接到B的原型鏈 B.prototype.constructor = B; 函數B（） { this.inB = 4; } B.prototype.inBProto = 5; x = new B; （x.inObj +'，'+ x.inA +'，'+ x.inAProto +'，'+ x.inB +'，'+ x.inBProto）; – Benoit 2010-05-20 11:54:07

jQuery有存儲在一個名爲fn內部對象函數庫。這些是你可以在每個jQuery對象上調用的。

當你做$("div.someClass")你得到一個jQuery對象，該對象包含該類的所有<div>元素。現在你可以做$("div.someClass").each(someFunction)來將someFunction應用到它們中的每一個。這意味着，each()是存儲在fn（在這種情況下是內置的）中的一個功能。

如果擴展（添加到）內部fn對象，則會自動使您的自定義函數的語法相同。假設您有一個將所有元素記錄到控制檯的功能，稱爲log()。您可以將此功能附加到$.fn，然後將其用作$("div.someClass").log()。

追加到fn對象的每個功能將在這樣一種方式，內函數體中，this關鍵字將指向你使用jQuery對象調用。

通常的做法是在自定義函數結束時返回this，以便方法鏈不會中斷：$("div.someClass").log().each(someFunction)。

有幾種方法可以將函數追加到$.fn對象，有些方法比其他方法更安全。一個相當安全的做法是：

jQuery.fn.extend({ 
    foo: function() { 
    this.each(function() { console.log(this.tagName); }); 
    return this; 
    } 
})

來源

2010-05-20 11:51:50 Tomalak

Tomalak已經發布了幾乎所有你需要知道的東西。

還有一件事可以幫助jQuery做到這一點這個關鍵字。

它amethod方法被稱爲應用（）

var somefunction=function(){ 
alert(this.text); 
} 
var anObject={text:"hello"}; 

somefunction.apply(anObject); 
//alert "hello" will happen

它確實有助於創造抽象性，因此框架/插件用戶只想用這個直覺告訴他們，不管有你的代碼裏

來源

2010-05-20 11:58:45 naugtur

JavaScript插件設計模式像jQuery

回答

相關問題