Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Własny plugin / moduł - poprawność architektury
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
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
  1. $("#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 smile.gif

Kod:
https://jsfiddle.net/fjgongun/
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
  1. $('#example').myplugin({
  2. animation: {
  3. speed: "300",
  4. effect: "random"
  5. },
  6. name: "Jan Kowalski",
  7. phone: "000 000 000",
  8. date: {
  9. dayone: 'Poniedziałek',
  10. daytwo: 'Wtorek'
  11. }
  12. });
[JAVASCRIPT] pobierz, plaintext


jak to osiągnąć? 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
  1. // ES5
  2. function myFunc(opts) {
  3. var name = opts.name === undefined ? 'Default user' : opts.name;
  4. var age = opts.age === undefined ? 'N/A' : opts.age;
  5. }
[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
  1. (function ( $ ) {
  2. 'use strict'
  3.  
  4. $.fn.MyPlugin = function( options ) {
  5.  
  6. var el = this;
  7.  
  8. var settings = $.extend({
  9. phone: "no phone!"
  10. }, options );
  11.  
  12. function showNumber(){
  13. console.log(settings.phone);
  14. }
  15.  
  16. return {
  17. init : function(){
  18. showNumber();
  19. }
  20. }
  21. }
  22.  
  23. }( jQuery ));
  24.  
  25. $( "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 smile.gif

Będę wdzięczny jak ktos rzuci okiem na kod smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.