Fondamentali di jQuery

var myFeature = {
myProperty : 'ciao',

myMethod : function() {
    console.log(myFeature.myProperty);
},

init : function(settings) {
    myFeature.settings = settings;
},

readSettings : function() {
    console.log(myFeature.settings);
}
};

myFeature.myProperty; // 'ciao'
myFeature.myMethod(); // registra 'ciao'
myFeature.init({ foo : 'bar' });
myFeature.readSettings(); // registra { foo : 'bar' }

// Facendo clic su un item della lista 
// si carica un certo contenuto.
// Utilizzando l'ID dell'item e a sua 
// volta nasconde gli altri item fratelli.
$(document).ready(function() {
$('#myFeature li')
.append('<div/>')
.click(function() {
  var $this = $(this);
  var $div = $this.find('div');
  $div.load('foo.php?item=' +
    $this.attr('id'),
    function() {
      $div.show();
      $this.siblings()
        .find('div').hide();
    }
  );
});
});

var myFeature = {
init : function(settings) {
    myFeature.config = {
        $items : $('#myFeature li'),
        $container : $('<div class="container"></div>'),
        urlBase : '/foo.php?item='
    };

    // permete di sovrascrivere 
    // la configurazione predefinita
    $.extend(myFeature.config, settings);

    myFeature.setup();
},

setup : function() {
    myFeature.config.$items
        .each(myFeature.createContainer)
        .click(myFeature.showItem);
},

createContainer : function() {
    var $i = $(this),
        $c = myFeature.config.$container.clone()
                 .appendTo($i);

    $i.data('container', $c);
},

buildUrl : function() {
    return myFeature.config.urlBase +
           myFeature.$currentItem.attr('id');
},

showItem : function() {
    var myFeature.$currentItem = $(this);
    myFeature.getContent(myFeature.showContent);
},

getContent : function(callback) {
    var url = myFeature.buildUrl();
    myFeature.$currentItem
        .data('container').load(url, callback);
},

showContent : function() {
    myFeature.$currentItem
        .data('container').show();
    myFeature.hideContent();
},

hideContent : function() {
    myFeature.$currentItem.siblings()
        .each(function() {
            $(this).data('container').hide();
        });
}
};

$(document).ready(myFeature.init);

var feature =(function() {

// variabili e funzioni private
var privateThing = 'segreto',
    publicThing = 'non segreto',

    changePrivateThing = function() {
        privateThing = 'super segreto';
    },

    sayPrivateThing = function() {
        console.log(privateThing);
        changePrivateThing();
    };

// API pubblica
return {
    publicThing : publicThing,
    sayPrivateThing : sayPrivateThing
}

})();

feature.publicThing; // registra 'non segreto'

feature.sayPrivateThing();
// registra 'segreto' e cambia il valore
// di privateThing a 'super segreto'

$(document).ready(function() {
var feature = (function() {

    var $items = $('#myFeature li'),
        $container = $('<div class="container"></div>'),
        $currentItem,

        urlBase = '/foo.php?item=',

        createContainer = function() {
            var $i = $(this),
                $c = $container.clone().appendTo($i);

            $i.data('container', $c);
        },

        buildUrl = function() {
            return urlBase + $currentItem.attr('id');
        },

        showItem = function() {
            var $currentItem = $(this);
            getContent(showContent);
        },

        showItemByIndex = function(idx) {
            $.proxy(showItem, $items.get(idx));
        },

        getContent = function(callback) {
            $currentItem.data('container').load(buildUrl(), callback);
        },

        showContent = function() {
            $currentItem.data('container').show();
            hideContent();
        },

        hideContent = function() {
            $currentItem.siblings()
                .each(function() {
                    $(this).data('container').hide();
            });
        };

    $items
        .each(createContainer)
        .click(showItem);

    return { showItemByIndex : showItemByIndex };
})();

feature.showItemByIndex(0);
});

<!DOCTYPE html>
<html>
<head>
    <title>jQuery+RequireJS pagina di esempio</title>
    <script src="scripts/require-jquery.js"></script>
    <script>require(["app"]);</script>
</head>
<body>
    <h1>jQuery+RequireJS pagina di esempio</h1>
</body>
</html>

<script>require(["scripts/app.js"]);</script>

require(["jquery.alpha", "jquery.beta"], function() {
// le estensioni  jquery.alpha.js y jquery.beta.js 
// sono state caricate.
$(function() {
    $('body').alpha().beta();
});
});

require.def("my/simpleshirt",
{
    color: "black",
    size: "unisize"
}
);

require.def("my/shirt",
["my/cart", "my/inventory"],
function(cart, inventory) {
    // restituisce un oggetto che definisce 
    // il modulo "my/shirt".
    return {
        color: "blue",
        size: "large"
        addToCart: function() {
            inventory.decrement(this);
            cart.add(this);
        }
    }
}
);

my/cart.js
my/inventory.js
my/shirt.js

require.def("my/title",
["my/dependency1", "my/dependency2"],
function(dep1, dep2) {
    // restituisce una funzione per definire "my/title". 
    // Questo restituisce o imposta 
    // il titolo della finestra
    return function(title) {
        return title ? (window.title = title) : window.title;
    }
}
);

requirejs/ (utilizzayo per eseguire gli strumenti)
webapp/app.html
webapp/scripts/app.js
webapp/scripts/require-jquery.js
webapp/scripts/jquery.alpha.js
webapp/scripts/jquery.beta.js

{
appDir: "../",
baseUrl: "scripts/",
dir: "../../webapp-build",
// Commentare la riga seguente se volete 
// minimizzare il codice dal compilatore 
// in modalità "semplice"
optimize: "none",

modules: [
    {
        name: "app"
    }
]
}

# per sistemi non-Windows
../../requirejs/build/build.sh app.build.js

# per sistemi Windows
..\..\requirejs\build\build.bat app.build.js

var myPortlet = Portlet({
title : 'Curry',
source : 'data/html/curry.html',
initialState : 'open' // or 'closed'
});

myPortlet.$element.appendTo('body');

myPortlet.open();    // forza per aprire
myPortlet.close();   // forza per chiudere
myPortlet.toggle();  // alterna gli stati 
                     // tra aperto e chiuso
myPortlet.refresh(); // aggiorna il contenuto
myPortlet.destroy(); // rimuove il porlet dalla pagina
myPortlet.setSource('data/html/onions.html');
                     // cambia il codice