Jak zaprojektować formant niestandardowy w JavaScript (prawdopodobnie przy użyciu jQuery)?

Question

Chciałbym utworzyć niestandardowy formant w javascript. Celem jest stworzenie bloku konstrukcyjnego, który zawiera metody, właściwości i zdarzenia oraz renderowanie w element div.

Przykładem takiej kontroli może być kalendarz. Byłaby renderowana do elementu div, zawierałaby właściwości definiujące sposób wyświetlania i wybraną lub wyróżnioną datę, metody zmieniania bieżącego miesiąca lub wyboru daty, a także powodowania zdarzeń po kliknięciu dnia lub bieżący miesiąc jest zmieniany przez dane wprowadzone przez użytkownika.

Mogę wymyślić wiele sposobów na wdrożenie tego i nie jestem pewien, jaki jest najlepszy sposób. Wydaje się, że pamiętam, że nie należy ulepszać elementów DOM za pomocą właściwości i metody, więc wykluczyłem to. Wtyczka jQuery wydaje się dobrym pomysłem, jednak nie jestem pewien, czy to jest właściwe tworzenie plugin dla każdego sposób moja kontrola miałaby więc może następnie użyć go lubię:

$('#control').method1(); 
$('#control').method2(); 

A jeśli robię użyj jQuery, gdzie mam przechowywać prywatne dane kontrolki?

Inną ideą, którą otrzymałem, było stworzenie nowego rodzaju obiektu, który miałby odniesienie do elementu div, w którym mógłby renderować jego elementy.

Jaki jest preferowany sposób na zrobienie tego. Jeśli mogę, chciałbym to zrobić jako wtyczkę jQuery, ale potrzebowałbym podpowiedzi, jak tworzyć metody i gdzie przechowywać prywatne dane. Znalazłem lokację pod adresem Plugins/Authoring na stronie jQuery i nie pomogło to w tym zakresie.

Answer 1

1. you can start by reading this, prosty poradnik JQuery plugin
2. you can also get lots of idea on this site, tutorial widżety jQuery UI.

Jako punkt wyjścia, pierwsza strona oferuje ten fragment jako szkielet dla rozwoju wtyczki:

//You need an anonymous function to wrap around your function to avoid conflict 
(function($){ 

    //Attach this new method to jQuery 
    $.fn.extend({ 

    //This is where you write your plugin's name 
    pluginname: function() { 

     //Iterate over the current set of matched elements 
     return this.each(function() { 
      //code to be inserted here 
     }); 
    } 
    }); 

//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign:))  
})(jQuery); 

Answer 2

Podczas pisania wtyczek jQuery, zwykle narazić metod za pośrednictwem opcjonalnych argumentów do funkcji wtyczki

Na przykład:

$("#id").myplugin('method1'); 

Przechowywanie danych jest dość prosta. Po prostu zdecyduj, czy chcesz zachować te dane w DOM, czy w pamięci. Jeśli to drugie, musisz utworzyć obiekt, do którego Twoja wtyczka może uzyskać dostęp.

(function($) { 

    var data; 
    $.fn.extend({ 

     myplugin: function(args) { 
      if (args === 'init') { 
       data = {}; 
       data.prop1 = val; 
      } 
      if (args === 'method1') 
       alert(data.prop1);   
     } 

    }); 

})(JQuery); 

Jeśli chcesz utrzymywać dane w DOM, należy dodać atrybut (y) do kontenera div z danymi, które chcesz utrzymywać.

(function($) { 

    $.fn.extend({ 

     myplugin: function(args) { 
      if (args === 'init') { 
       $(this).attr('data') = val; 
      } 
      if (args === 'method1') 
       alert($(this).attr('data')); 
     } 

    }); 

})(JQuery);