Oggetti JS e HTML

JavaScript può essere usato per “programmare” degli oggetti che rendono “attivo” l’ HTML.

Alcuni esempi tratti da: http://stackoverflow.com/questions/3582185/handle-html-code-block-as-an-object

<div id="book1">
<div id="price">$30</div>    
...
</div>
// oggetti creati con il metodo del costruttore
// si può usare anche Object.create
var Book = function(name) {
   this.name = name;
}

Book.prototype = {
   setPrice : function(price) {
      this.price = price;
   },
   update : function() {
      pricediv = document.getElementById(this.name)
      pricediv.innerHTML = '$'+price;
   }
}

var book = new Book('book1')
book.setPrice(50);
book.update();

MicroTemplate e Cascade

var Book = function(){
    var price    =   args.price  || 0,
        color    =   args.color  || 'red',
        height   =   args.height || '200px',
        width    =   args.width  || '600px',
        template =   "<div style='background-color: COLOR; width=WIDTH; height: HEIGHT;'><span>$PRICE</span><br/></div>";

    return {
        setPrice:  function(np){
             price = np;
             return this;
        },
        setColor:  function(nc){
             color = nc;
             return this;
        },
        setHeight: function(nh){
             height = nh;
             return this;
        },
        render:    function(){
             template = template.replace(/COLOR/, color);
             template = template.replace(/PRICE/, price);
             // etc
             // use jQuery or native javascript to form and append your html
             $(template).appendTo(document.body);
        }
    };
};
// Uso:
var book = Book({
    price:  30,
    color:  'blue'
});

book.render();
// modifica dei valori:
book.setPrice(140).setColor('yellow').setHeight('500').render();

Estendere il DOM

http://robskelly.com/2011/11/subclassing-dom-elements-in-javascript/

Estendendo li oggetti del DOM si possono creare nuovi oggetti con più funzionalità.
Nel link si fa questo esempio: si estende HTMLImageElement seguendo il Factory Pattern.
Le variabili locali verranno aggiunte all’ elemento DOM con le closures, mentre con Object.defineProperty si definiranno le proprietà pubbliche.
Nell’ esempio si definisce una sotto-classe di HTMLImageElement con un setter che riceve un oggetto Image customizzato per contentere le proprietà src e title.
Quando Image vieneimpostato in HTMLImageElement, verranno automaticamente impostati source e alt.

L’ oggetto Image:

/**
* Represents an Image.
* @param src The source URL of the image file.
* @param title The title of the image.
*/
function Image(src, title){
    this.title = title;
    this.src = src;
}
Image.prototype = new Object();

La sotto-classe:

/**
* Creates a "subclass" of HTMLImageElement.
*/
function newImageElement(){
 
    // Create a regular img element.
    var img = document.createElement("img");
 
    // A variable to hold the Image instance.
    var _image = null;
 
    // Create a property. The get and set closures will keep
    // the _image variable in scope. The setter sets the properties
    // on the img element.
    Object.defineProperty(img, "image", {
        get : function(){
        return _image;
    },
    set : function(value){
        _image = value;
        this.src = value.src;
        this.alt = value.title;
    }
    });
 
    // Return the modified img element.
    return img;
}

Per usare il factory method:

// Create an img element.
var img = newImageElement();
 
// Create the image object.
var image = new Image("http://farm6.static.flickr.com/5187/5774436039_28352f0d8f.jpg", "A cyclist.");
 
// Set the image on the img.
img.image = image;
 
// Append the img on the document's body.
document.body.appendChild(img);

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...