Jaka jest właściwa praktyka wtyczki jQuery?

Question

Nie obawiaj się używać żargonu technicznego lub wyjaśnień na niskim poziomie, proszę. Jestem dostatecznie zaawansowany, jeśli chodzi o architekturę komputerową i języki programowania niskiego poziomu w celu zrozumienia technik optymalizacji i zarządzania pamięcią, a także złożonych struktur (klasy, zmienne składowe itd.).

Moim głównym celem jest kod oparty na Internecie Aplikacje. Dużo pracuję z PHP i szybko uczę się CSS. JavaScript jest obecnie moim wąskim gardłem. Znam wystarczająco JavaScript, aby zrobić prawie wszystko, co ma framework (manipulowanie DOM, zapytania AJAX itp.). Wiem też, że mogę sprawić, że mój kod będzie działał szybciej, zoptymalizować go pod kątem konkretnych przypadków i mogę zmniejszyć cały mój kod (bez zewnętrznego skryptu), ręcznie kodując wszystko. Jednak dla łatwości czytania przez innych programistów i dla szybkości kodowania próbuję nauczyć się przynajmniej jednej architektury Javascript.

Po przeczytaniu dokumentacji dotyczącej wielu frameworków i przejrzeniu niektórych samouczków preferowałem jQuery. Pozwoliło to na bardzo potężny iteracyjny kod w pojedynczej linii i miało bardzo małą szansę na kolizję przestrzeni nazw zmiennych globalnych. Z tego, co mogłem powiedzieć, jedyną deklarowaną zmienną globalną jest zmienna $ i wszystko inne dzieje się w tym obszarze nazw, a istnieją nawet sposoby dostępu do przestrzeni nazw bez tej zmiennej, jeśli chciałbyś mieć dwa frameworki obok siebie. Miał również bardzo mały plik, który zawierał (24 kilobajty gzipped), co oznacza mniejsze obciążenie serwera.

Moje pytanie brzmi: jakie są dobre praktyki w tworzeniu wtyczki jQuery? Gdybym miał zacząć kodować strony internetowe w jQuery, jak mam to zrobić, aby uzyskać najlepszą interoperacyjność i design? Chcę się upewnić, że mój kod może działać razem z innymi jQuery bez interferencji, możliwe jest budowanie wtyczek poza moim kodem, i minimalizuję wykorzystanie przestrzeni nazw jQuery, aby nie kraść zmiennych, które mogą być używane przez inne. scenariusz.

Answer 1

Przeczytaj jQuery plugin authoring suggestions, również spojrzeć na the unminified jQuery. Zwróć uwagę na ostatnią linię: window.jQuery = window.$ = jQuery; Istnieją zatem dwie zmienne globalne window.jQuery i window.$. Zagłębić się w tej kwestii nieco głębiej, przeczytaj więcej na temat dokumentacji dotyczącej using jQuery with other libraries i jQuery.noConflict():

// Trigger no conflict mode. 
$.noConflict(); 
    // Code that uses other library's $ can follow here. 

Do pisania wtyczek, należy zwrócić szczególną uwagę na odcinku zwanym Maintaining Chainability (od jQuery tak ładnie korzysta z przenośności). Musisz wyraźnie zwrócić kod this w swoich wtyczkach, aby zachować łatwość obsługi. Ponadto, mówiąc o zderzeniu z innymi zmiennymi, upewnij się zatrzymać wtyczki z zderzeniu z innym kodem za pomocą zamknięcia:

// Use a closure so you can use the dollar sign in your plugin, 
    // but you don't clash with other uses of the dollar sign in the script 
    // around where you define your plugin (other libraries, etc.) 
(function($){ 

    // Adding your plugin to jQuery 
    $.fn.yourPlugin = function() { 

     // Maintain chainability 
    return this.each(function() { 

     // ... 

    }); 

    }; 
}(jQuery)); 

Jest wiele innych wspaniałych informacji na tej stronie wtyczki do authoringu. Powyższe to tylko nagie kości. Zawiera informacje o wartościach domyślnych i opcjach, ustawianiu przestrzeni nazw i wielu innych rzeczach.

Ponadto, jeśli obawiasz się konfliktu zmiennych, możesz także użyć zamknięć dla własnego "zwykłego" kodu ... nie tylko wtyczek jQuery.Aby to zrobić, należy umieścić skrypt w self invoking anonymous function:

(function() { 
    var ... // these vars will not clash with 
      // anything outside this anonymous function 

    // You can do your jQuery in here if you need to access 
    // the local vars: 
    $(function() { ... }); 

}()); 

Na przykład:

// global 'clash' 
var clash = "test"; 

(function() { 
    // local 'clash' 
    var clash = "something else"; 
    // this 'clash' shadows but doesn't change the global 'clash' 
}()); 

alert(clash); 
// The global 'clash' has stayed unaffected by the local `clash` 
// Output: test 

jsFiddle example

Answer 2

Możesz dodać metody wtyczek bez stosując metodę rozszerzenia:

jQuery.fn.myPlugin = function(opts) { ... } 

można użyć przedłużenia: jeśli szukasz po prostu przedłużyć obiekt jQuery z wielu funkcje byś zrobił:

jQuery.extend({ 
    funcName: function(){ 
     //function code 
    }, 
    funcName2: function(){ 
     //function code 
    } 
}); 

„jQuery.extend dodaje zestaw właściwości do obiektu jQuery. jQuery.fn.extend dodaje zestaw właściwości dla obiektu jQuery.fn (który jest następnie przystępnie poprzez $(). Foo).”

jQuery.fn jest skrótem dla jQuery.prototype.

oficjalna dokumentacja wtyczek: http://docs.jquery.com/Plugins/Authoring

Mike Alsup ma tę dobrą dyskusję poradnik/wzór: http://www.learningjquery.com/2007/10/a-plugin-development-pattern

EDIT: jedna uwaga, należy uważać z nazwami z wykorzystaniem Packers/minimizers - test na jednej z Twój wybór w tym względzie: