jQuery plugin boilerplate

Tänkte dela med mig av en enkel boilerplate som jag tagit till livs för mina jQuery plugin projekt.

Hoppas det kan hjälpa andra jQuery fantaster.

$(document).ready(function(){

  /* Start anonymous selfexecuting function */
  (function($, window, document, undefined)
  {

    /* begin plugin envelop */
    $.fn.pluginNameChange = function(usrConfig)
    {
      /*
        Plugin Name v1.0
        Author: BlueEyes.
        www.changetomywebsite.se

        Code is free to use for good not evil.
        And please keep the author info, but not required.

        # CHANGELOG #
        2012-02-20 : first version online.
      */

      /* The defaults config object */
      $.fn.pluginNameChange.config = {
        key_one: 'value_one',
        key_two: 'value_two',
        key_three: 'value_three'
      };

      /* extend or overide the config object as needed by user config object */
      var config = $.extend({}, $.fn.pluginNameChange.config, usrConfig);

      /* begin chainability */
      return this.each(function(){
        
        /*
          BEGIN PLUGIN FUNCTIONALITY
        */

      });/* end chainability */

    } /* end plugin envelop */

  })(jQuery, window, document);
  /*
    end anonymous selfexecuting function and closure.
    this way we isolate our vars from the global object.
  */

});

Jag satte ihop denna boilerplate för att slippa komma ihåg varje gång jag ville göra en ny plugin hur saker och ting ska struktureras.

Så spara denna boilerplate i en fil och döp till något lämpligt typ 'jquery_TEMPLATE.js' eller något sådant och sedan öppna och kopiera koden till den nya plugin filen för att ha en ny fräsch start att börja med.

Denna boilerplate passar inte alla smaker det är jag medveten om, men det kan säkert hjälpa någon att komma igång.

Skapelsen av boilerplaten kom efter att jag läst denna intressanta blogg post:
http://coding.smashingmagazine.com/2011/10/11/essential-jquer...

Av Addys Osmani. En riktigt duktig kille.

Han har även en uppsjö av andra jQuery boilerplats på sin Github:
https://github.com/addyosmani/jquery-plugin-patterns/

Hoppas denna kan boilerplate kan hjälpa någon.

Moderator kan gärna klistra denna för alla intresserades bekvämlighet.

Lycka till med era jQuery plugins.
p.s: För att ha mest nytta av boilerplaten är en förståelse för grundläggande jQuery plugin patterns en bra sak så läs första artikeln jag länkar till ovan.

Var så god

Vi jQuery fantaster måste hålla ihop

För övrigt så finns en hel del matnyttigt på:
http://www.jquery.com

Och i mitt utvecklande har jag alltid:

http://api.jquery.com Och http://code.jquery.com

Nära till hands

Sedan finns förstås:
http://developer.mozilla.org
samt en del nyttigt om grunder och mer avancerat i javascript på:
https://developer.mozilla.org/en/JavaScript

För grunderna i javascript har du nytta av när du jobbar med jQuery.

Du kan även ta en titt på en del kod expriment jag lagt upp dels för min egen användning men även för andra att få idéer ifrån:
www.magnusbonnevier.se/jquery

lycka till.

$(function() {
    $.fn.pluginNameChange = function(usrConfig) {
        ...
    };
})();

Titta igen noga så ser du att $ inom vår anonyma själv själv körande funktion är jQuery objektet.

Och förutom jQuery skickar vi in window, och document.

Dock inne i anonyma funktionen så definerar vi undefined så vi inte behöver oroa oss för situationer där någon utvecklare
har gjort så här typ i det globala scoopet:

undefined = 'Hello World';

så därför sätter vi undefined till = null inuti funktionen.

Så vi skickar bara in jQuery, window, och document för att ha dessa tillgängliga.

Och vi omger plugin koden med denna inneslutning för att våra vars vi skapar inom den inte påverkar eller stör annan kod i det globala.

Antar att det är någon form av trygghet.

Och $().ready() är mest för att vänta på att DOM är redo.
Det är inte nödvändigt med $().ready()

Det skulle kanske flyttas innanför den anonyma funktionens closure.

Poängen var väl att ifall andra frameworks använde $ dollar tecken som referens så skulle jag säkerställa inom min anonyma att dollar tecken var jQuery objektet.