Własny plugin / moduł - poprawność architektury Opcje

[d4ng]

Witajcie, pisze własny plugin i potrzebuje pomocy. Chce aby po dodaniu ścieżki do mojego js można go było zainicjować tak jak np. datapicker i przekazać mu parametry

[JAVASCRIPT] pobierz, plaintext 
$("#datapicker").datapicker({parametr: "wartosc"});
[JAVASCRIPT] pobierz, plaintext 

czyli zapinam się np na diva i potem w jego środku zostanie wyrenderowany html z js (prosiłbym od razu o informacje jak zrobić to najlepiej, czy stworzyć jakiś wirtualny dom bo html bedzie modyfikowany tylko jak to zrobić - jakiś przykład?). Aktualnie zrobiłem funkcje buildHtml() którą wrzuciłem do inita pytanie czy nie zrobić jakiś obiekt render? Zdaje sie na Was i obecne standardy. Pozdrawiam i dziękuje (IMG:style_emoticons/default/smile.gif)

Kod:
https://jsfiddle.net/fjgongun/

Ten post edytował d4ng 17.06.2016, 14:38:04

[Comandeer]

Funkcje pisane dużą to konstruktory, więc nazwa powinna być małą.

Dodatkowo zauważ, że praktycznie żaden plugin nie zwraca obiektu, a instancjonuje go (jego wywołanie jest de facto wrapperem na konstruktor).

Kod

if(arguments[0] && typeof arguments[0] === "object"){

Brzydkie. Nie lepiej po prostu nazwać ten parametr?

Po co Ci _extendsDefault skoro jQuery ma to wbudowane ($.extend)?

[d4ng]

yyyy "Brzydkie. Nie lepiej po prostu nazwać ten parametr?" przykład? w takim razie jak mam się zapiąć na dany element i na nim wykonać dane funkcjonalności?

[Comandeer]

Kod

var SingUpEvent = function( parametr ){
    var options = {};

    if ( typeof parametr === 'object' ) {
        options = parametr;
    }
}

[d4ng]

hmm to nie jest dla mnie dobre rozwiązanie bo parametrów moze być 1-2 abo np 12. a wtedy wolałbym żeby to wyglądało tak:

[JAVASCRIPT] pobierz, plaintext 
$('#example').myplugin({
	animation: {
		speed: "300",
		effect: "random"
	},
	name: "Jan Kowalski",
	phone: "000 000 000",
	date: {
		dayone: 'Poniedziałek',
		daytwo: 'Wtorek'
	}
});
[JAVASCRIPT] pobierz, plaintext 

jak to osiągnąć? (IMG:style_emoticons/default/smile.gif)

[trueblue]

Najlepiej u źródła: https://learn.jquery.com/plugins/basic-plugin-creation/ (sekcja Accepting Options).

[Comandeer]

@d4ng ale przecież pokazałeś funkcję z jednym parametrem – obiektem zawierającym wiele własności. I tym bardziej nie widzę, dlaczego ten parametr nie może być nazwany?

Ogólnie w dobie dzisiejszego ES6, gdy mamy parametry opcjonalne, destructuring i rest parameters, używanie arguments po prostu trąci myszką – zwłaszcza, że można zrobić np. to: https://simonsmith.io/destructuring-objects...-to-be-optional

[d4ng]

Dziękuję wszystkim za odpowiedz @comandeer rozumiem że chodzi i o

[JAVASCRIPT] pobierz, plaintext 
// ES5 
function myFunc(opts) {
 var name = opts.name === undefined ? 'Default user' : opts.name; 
 var age = opts.age === undefined ? 'N/A' : opts.age; 
}
[JAVASCRIPT] pobierz, plaintext 

ale przyznam że rozwiązanie zaproponowane przez trueblue jest dla mnie estetyczniejsze. Będąc przy temacie własnego plugin chciałbym jeszcze tylko zapytać o wystawienie na zewnątrz eventów na które mogę się zapinać w innych pluginacha np myplugin.clearform (module pattern).

[Comandeer]

Nie, chodzi mi o: https://learn.jquery.com/plugins/basic-plug...cepting-options – co zresztą próbowałeś robić w swoim pluginie, ale w bardzo dziwny sposób.

[d4ng]

Ok poprawiłem swój kod ale coś nie bangla... poza tym chciałbym sie nauczyc jak najwiecej i pisac w jakiejś architekturze pytanie czy ide w dobrym kierunku?

[JAVASCRIPT] pobierz, plaintext 
(function ( $ ) {
    'use strict'
 
    $.fn.MyPlugin = function( options ) {
 
        var el = this;
 
        var settings = $.extend({
            phone: "no phone!"
        }, options );
 
        function showNumber(){
            console.log(settings.phone);
        }
 
        return {
            init : function(){
                showNumber();
            }
        }
    }
 
}( jQuery ));
 
$( "div" ).MyPlugin({ phone: "000 000 000" });
[JAVASCRIPT] pobierz, plaintext 

widziałem też zappis gdzie najpierw tworzony był moduł a w nim zmienna self z przypisanym this i kada funkcja zaczynala sie self.showNumber = function(){} o co tu chodzi? Ps. Może AMD? będę wdzięczny za porady typu best practice (IMG:style_emoticons/default/smile.gif)

Będę wdzięczny jak ktos rzuci okiem na kod (IMG:style_emoticons/default/smile.gif)