Witajcie,

Robię różne wtyczki JS między innymi za pomocą takich artykułów:
http://www.altcontroldelete.pl/artykuly/ja...yczki-w-jquery/
ale te moje wtyczki często potrzebują działać niestandardowo a ja nie moge nic zrobić bo nie rozumiem jak to działa...
Szukam po necie jakichś wytłumaczeń ale nic konkretnego nie działa...

Nie widzę w tym żadnej logiki i nawet jak działa to nie wiem dlaczego.

Dziwność zaczyna się w momencie
...return this.each(function() {...

Co do wieloinstancyjności i kłopotach z tym związanych spędziłem dziesiątki godzin...

Znacie może jakiś dobry artykuł na ten tenat w języku polskim? A może ktoś potrafi sam wyjaśnić jak to jest z tymi wtyczkami jQuery....

Cześć,

generalnie według mnie najpierw powinno się nauczyć pisać w jQuery a potem brać za tworzenie pluginów wydaje mi się że Ty zacząłeś od tego drugiego i dlatego masz problemy ze zrozumieniem kodu zamieszczonego pod linkiem który podałeś.
Mogę Ci to w skrócie wytłumaczyć ale to Ty sam musisz przysiąść i poćwiczyć korzystanie z jQuery, zachęcam do tego bo warto!

Co do tego kodu, przede wszystkim składnia jQuery opiera się na podstawowym obiekcie o takiej samej nazwie, zapisywany skrótowo jako "$". Natomiast każdy plugin to tak na prawdę definicja nowej funkcji która albo rozszerza już istniejące mechanizmy w jQuery ($.extend) albo wprowadza zupełnie nowe. Dlatego definicja tego pluginu zaczyna się od "(function($)", a kończy się zwróceniem obiektu jQuery czyli "(jQuery);".

Kawałek kodu który wymieniłeś

[HTML] pobierz, plaintext 
return this.each(function() {...}
[HTML] pobierz, plaintext 

zwraca wykonanie funkcji jQuery.each(), w tym przypadku jest to samo co:

[HTML] pobierz, plaintext 
this.each(function() {
                var oElement = $(this);
                oElement.data('myplugin', {
                    pluginoptions: oOptions
                });
                // init operations....
                initExampleHelperFunction();
                if(null != oElement.data('myplugin')
                    .pluginoptions.ExtraInitFunction){
                    oElement.data('myplugin').pluginoptions.ExtraInitFunction();
                }
});
return;
[HTML] pobierz, plaintext 

Zobacz tutaj po polski opis: http://www.i-mateusz.com/news/jak-napisac-...gin-jquery.html polecam też dokumentację jQuery: http://api.jquery.com/

to nie wiem czy dobrze rozumiem, chciałbyś wdrożyć wzorzec Singleton w JS? Może coś takiego:

http://www.dofactory.com/javascript-singleton-pattern.aspx

Jeśli twoja wtyczka nazywa się superWtyczka i wywołasz ją tak:

[HTML] pobierz, plaintext 
$(selektor).superWtyczka
[HTML] pobierz, plaintext 

to wewnątrz powyższej funkcji, w zmiennej this otrzymasz kolejne elementy, które wybrał selektor.

Dzięki za odpowiedź Panowie.

Napisałem już dość sporo działających wtyczek i innych rzeczy pomocy jQuery także zdaje mi się, że podstawy już znam.

Żeby lepiej pokazać o co mi chodzi napisze co robiłem ostatnio:
Napisałem wtyczkę do jQuery (kod mam w pracy, jutro wrzucę) która nazywa się Validate.

Potrzebowałem aby konkretne pola konkretnych formularzy były walidowane tylko w konkretnych przypadkach dynamicznie.

Ostatecznie działa to tak, że powiedzmy mamy formularz (#loginForm) na stronie z dwoma polami - email, hasło:

[HTML] pobierz, plaintext 
oValidate = new Validate('loginForm')
oValidate.add('inputEmail', 'email') // pierwszy parametr to nazwa pola, drugi to typ walidacji, jeśli nie podamy typu walidacji to załaduje się domyślny noEmpty
[HTML] pobierz, plaintext 

W tym momencie jeśli spróbujemy dać submit albo blur na inpucie klasa Validate odpala domyślny komunikat przy polu o błędnych danych, dla każdego pola możemy też przypisać konkretny komunikat.

[HTML] pobierz, plaintext 
oValidate.remove('inputEmail') // a ta linia powoduje, że pole nie jest już walidowane, sensu niby nie ma ale to tylko przykład. W procesie zamówienia który tworze takie rozwiązanie jest niezbędne.
[HTML] pobierz, plaintext 

Problemy zaczęły pojawiać się, gdy na stronie pojawiały się 2 formularze. Mają działać pod klasą Validate bez kolidacji, to właśnie miałem na myśli mówiąc o wielo-instancyjności, czyli raczej odwrotności singletona. Problem wyglądał tak że nie dawało się kliknąć w submit jeśli w którymkolwiek formularzu coś się nie walidowało.

Z tym też sobie poradziłem, ale raczej metodą prób i błędów tworząc kod którego nie rozumiem dlatego postanowiłem założyć ten temat. Wciąż nie rozumiem return this.each... each to jak mniemam pętla po wszystkich "obiektach obiektu" (tak mi się przynajmniej wydaje) także jaki jest sens takiego zapisu? Wierzę , że jak to zrozumiem to zrozumiem i resztę.

Jak mówiłem, wrzucam kod:

[HTML] pobierz, plaintext 
(function($) {
    var m_oDefaults = {
        nTestSetting: 0,
        sTestSetting: 'test',
        ExtraInitFunction: null,
        formName: null
    };
 
    var initExampleHelperFunction = function(oElement){
        self = m_aoFunctions;
 
        oElement.find('input').on('blur', function(){
            return self.blur($(this).attr('name'), oElement);
        });
        oElement.find('input[type="submit"]').on('click', function(){
            return self.checkAll(oElement);
        });
 
    };
 
    var m_aoFunctions = {
 
        init: function(oOptions){
            oOptions = $.extend({}, m_oDefaults, oOptions);
            return this.each(function() {
                var oElement = $(this);
                oElement.data('validate', {
                    pluginoptions: oOptions,
                    fields: []
                });
                // init operations....
                initExampleHelperFunction(oElement);
 
                if(null != oElement.data('validate').pluginoptions.ExtraInitFunction){
                    oElement.data('validate').pluginoptions.ExtraInitFunction();
                }
            });
        },
        myInit: function(formName) {
 
        },
        option: function(oOptions){
            $.extend($(this).data('validate').pluginoptions, oOptions);
        },
        getTestSettingText: function(){
            return $(this).data('validate').pluginoptions.sTestSetting;
        },
        add: function(fieldName, validationType) {
            if (!$('input[name="'+fieldName+'"]').length) return false;
            if (typeof validationType == "undefined") validationType = 'noEmpty';
 
            this.remove(fieldName); // jakby przypadkiem to pole było już walidowane
 
            $(this).data('validate').fields.push({fieldName: fieldName, validationType: validationType, formName: this.formName});
            return this;
        },
        remove: function(name) {
            var flds = $(this).data('validate').fields;
            for (i in flds) {
                if (flds[i].fieldName == name) {
                    $(this).data('validate').fields.splice(i,1);
                    console.log('Spliced element: '+i+ ' => '+name)
                }
            }
        },
        getFields: function(oElement) {
            if (typeof oElement != "undefined")
            return oElement.data('validate').fields;
        },
        blur: function(field,oElement) {
 
            this.oElement = oElement;
            var f = 0, fields = this.getFields(oElement);
 
            for (i in fields) {
                if (fields[i].fieldName == field) {
                    if (!this.check(oElement.data('validate').fields[i].fieldName, oElement.data('validate').fields[i].validationType)) {
                        f++;
                    }
                }
            }
            return !f;
        },
        check: function(fieldName, validationType) {
            field = this.oElement.find('input[name="'+fieldName+'"]');
            return eval('this.'+validationType+'(field)');
        },
        checkAll: function(oElement) {
            var f = 0, fields = this.getFields(oElement);
            this.oElement = oElement;
            for (i in fields) {
 
                if (!this.check(oElement.data('validate').fields[i].fieldName, oElement.data('validate').fields[i].validationType)) {
                    f++;
                }
            }
            return !f;
        },
        isObserved: function(name) {
            for (i in oElement.data('validate').fields) {
                if (oElement.data('validate').fields[i].fieldName == name) {
                    return true;
                }
            }
            return false;
        },
        email: function(field) {
 
            self = this;
 
            var errorSpan = this.oElement.find('.'+field.attr('name')+'.error-info');
 
            var regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
 
 
            if ( !regex.test(field.val()) ) {
                errorSpan.show();
                return false;
            } else {
                errorSpan.hide();
                return true;
            }
 
        },
        password: function(field) {
            self = this;
 
            var errorSpan = $('.'+field.attr('name')+'.error-info');
 
            if ( !field.val().length ) {
                errorSpan.show();
                return false;
            } else {
                errorSpan.hide();
                return true;
            }
        },
        radio: function(field) {
            var errorSpan = $('.deliveryAddress.error-info');
 
            if (!field.is(':checked')) {
                errorSpan.show();
                return false;
            } else {
                errorSpan.hide();
                return true;
            }
        },
        noEmpty: function(field) {
            self = this;
 
            var errorSpan = $('.'+field.attr('name')+'.error-info');
 
            if ( !field.val().length ) {
                errorSpan.show();
                return false;
            } else {
                errorSpan.hide();
                return true;
            }
        }
    };
 
    $.fn.validate = function(oFunction) {
 
        if (m_aoFunctions[oFunction]) {
            return m_aoFunctions[oFunction].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if ((typeof oFunction === 'object') || !oFunction) {
            return m_aoFunctions.init.apply(this, arguments);
        } else {
            $.error('Funkcja ' + oFunction + ' nie istnieje w przestrzenii jQuery.myplugin');
        }   
    }; 
})(jQuery);
[HTML] pobierz, plaintext 

Przykłady użycia:

[HTML] pobierz, plaintext 
$validatorAddresses = $('form[name="addresses"]').validate();
$validatorAddresses.validate('add', 'deliveryAddress', 'radio'); // czyli konieczność wyboru któregoś adresu z radio
$validatorAddresses.validate('remove', 'deliveryAddress'); // usuniecie z walidacji
[HTML] pobierz, plaintext 

Trochę się to różni od tego co napisałem wczoraj. Coś mi sie widać popieprzyło.

Moje szczere oczekiwania odnośnie tego tematu są takie, że ktoś napisze: "Co żeś napisał, powinieneś to zrobić inaczej"...

Pozdrawiam.

this.each iteruje po wszystkich elementach, które podlegają selektorowi, który to podałeś jako parametr przy inicjalizacji pluginu.
Jeśli Twój plugin wywołasz tak:

[HTML] pobierz, plaintext 
new Validate('form')
[HTML] pobierz, plaintext 

to pętla obejmie wszystkie formularze w dokumencie,
jeśli tak:

[HTML] pobierz, plaintext 
new Validate('form.blabla')
[HTML] pobierz, plaintext 

to wszystkie formularze z klasą "blabla".
Wszystko co dotyczy danego elementu musisz deklarować jako zmienną wewnątrz pętli each, a nie jako zmienne globalne. Również opcje musisz sobie kopiować do zmiennej w środku each.

Z Twojej wypowiedzi wnioskuje, że this.each zaprzecza nieco wieloinstancyjności.
Inaczej mówiąc powiedzmy, że wczytuje objekt:

[HTML] pobierz, plaintext 
new Validate($('form'))
[HTML] pobierz, plaintext 

Zakłądając, że mam dwa formularze na stronie, mogę się spodziewać, że będą ze sobą kolidować.
Idąc tym tokiem myślenia, wychodzi, że problem wieloinstancyjności nie powinien występować w przypadku takiego uruchomienia:

[HTML] pobierz, plaintext 
oForm1 = new Validate($('form[name="deliveryAddress"]'));
oForm2 = new Validate($('form[name="invoiceAddress"]'));
[HTML] pobierz, plaintext 

? Dobrze to rozumiem?

Jak to zaprzecza?
Jeśli w this.each będziesz odnosił się do zmiennej "a" zdefiniowanej poza tą pętlą, to przy ustawianiu będziesz ją nadpisywał lub dopisywał do niej (jeśli to tablica), a przy pobieraniu będzie to wspólna zmienna dla każdej iteracji w this.each. Nie ma tu nic magicznego. Każda iteracja this.each wywołuje funkcję. To tak jakbyś deklarował zmienne lokalne w dwóch osobnych funkcjach, albo jedną zmienną globalną i odwoływał się do niej z tych dwóch funkcji.

Co do drugiej kwestii, w takim przypadku, to powinno zapewnić bezkolizyjność.