HTML5 okiem .NET-owca - odc. 5

W odcinku piątym trochę notatek o websocketach i microdata z HTML5 oraz kilka wzorców dla tworzenia strukturalnego, obiektowego kodu w Java Script.

Web Sockets

full-duplex z przeglądarki

var server = new WebSocket(“ws://localhost:8181/server”);

server.AddEventListener(“message”, messageHandler, false);

server.AddEventListener(“open”, openHandler, false);

server.AddEventListener(“close”, closeHandler, false);

server.AddEventListener(“error”, errorHandler, false);

function messageHandler(e) { // e.data - string, JSON.parse };

server.send(“hello”);

jStockTicker

Microdata

standard HTML Markup + vocabulary namespace

<div itemscope itemtype=”http://data-vocabulary.org/Person”>

<h2 itemprop=”name”></h2>

<image itemprop=”photo”/>

<span itemprop=”address” itemscope itemtype=”http://data-vocabulary.org/Address”>

      <span itemprop=”region”></span>

</span>

</div>

itemid - jednoznaczna identyfikacja na poziomie przestrzeni

itemref - referencja do wartości microdata niezawartych w itemscope

Wartości microdata

• meta - content
• audio, embed, iframe, img, source, video - src
• a, area, link - href
• object - data
• time - datetime
• inne - zawartość tekstowa

Rich Snippets Testing Tool

Person, Product, Event, Review

Wzorce JS w aplikacjach HTML5

Closures

function myClosure() {

var date = new Date();

return function() {

          return  date.getMiliseconds();

};

}

var closure = myClosure();

closure();

 

var myClosure2 = function() {

var date = new Date();

var myNestedFunc = function() {

      return date.getMiliseconds();

};

return {

    foo: myNestedFunc

};

}

var closure = new myClosure2();

closure.foo();

 

var a = a1;

var b = b1;

równoważne z

var a = a1, b = b2;

 

Wzorzec Prototype

Zalety

• wykorzystanie właściwości języka Java Script
• modularyzacja i reużytkowanie kodu
• zmienne i funkcje poza globalną przestrzenią nazw
• funkcje ładowane są do pamięci tylko raz
• możliwość “nadpisywania” funkcji

Wady

• oddzielona definicja konstruktora od definicji prototype
• tricky

var myNS = myNS || {};

myNS.Calculator = function(eq) { this.a = … }

myNS.Calculator.prototype = {

add: function(x, y) {

      …

},

}

//Calculator.prototype.add = function (x,y) { … };  //nadpisanie

var calc = new myNS.Calculator(‘xxx’);

calc.add(1,2);

 

Wzorzec module

Zalety:

• modularyzacja kodu
• zmienne/funkcje poza globalną przestrzenią nazw
• udostępnianie tylko publicznych elementów

Problemy:

• możliwość duplikowania w pamięci funkcji w obiektach, jeśli nie zostanie użyty singleton
• trudna rozszerzalność
• czasami debugowanie

var myNS = myNS || {};

myNS.Calculator =  function(eq) {

//prywatne zmienne i funkcje

var a = …

return {

      //publiczne elementy

     add: function(x,y) { … a … }

};

};

var calc = new Calculator(‘xxx’);

calc.add(1,2);

<div onclick=”calc.numberClick(event);”/>

 

Wzorzec Revealing Module

Zalety:

• modularyzacja
• zmienne/funkcje poza globalną przestrzenią nazw
• udostępnianie tylko publicznych elementów
• bardziej naturalny sposób udostępniania publicznych elementów

Wady - takie same jak przy wzorcu Module

var calculator = function(eq) {

//prywatne zmienne i funkcje

var a = b,

innerFunc = function(x,y) { … },

subtract = function(x,y) { … }

return  {

       //publiczne elementy

       add: innerFunc,

       subtract: subtract

};

}(‘xxx’);

calculator.add(1,2);

 

Wzorzec Revealing Prototype Pattern

Zalety:

• kombinacja wzorców Prototype i Revealing Module
• modularyzacja kodu
• zmienne/funkcje poza globalną przestrzenią nazw
• udostępnianie tylko publicznych elementów
• funkcje ładowane tylko raz do pamięci
• rozszerzalność

Wady:

• this - tricky
• oddzielona definicja konstruktora od definicji prototype

var Calculator = function(eq) {

//definicja zmiennych

this.a = …;

};

Calculator.prototype = function() {

//definicja funkcji

var add = new function(x,y) { … };

return  {

       //publiczne elementy zdefiniowane wg. Revealing Module Pattern

       add:  add

};

}();

var calc = new Calculator(‘xxx’);

calc.add(1,2);

.this - w JS może się zmienić

setVal = function(val) { }

setval.call(this, ‘0’);