[JavaScript] Observer Pattern Cont.

續上篇
Observer Pattern真的是一個蠻好用的Pattern，以我工作的例子是我會去操作一個第三方的JavaScript API，操作完之後這個API只會產生一個事件，而且這個事件裡面會帶一個參數表示目前的狀態
如下

trdParty.onCallback(function(status){
   // do something you want
});

trdParty.doMethod();

onCallback會在每次呼叫不同的doMethod都會回傳目前的狀態，你可以透過偵測status的狀態來執行你想做的事情，最簡單的方式是透過類似HashTable的方式來做mapping，如下

var funMap = [];
funMap['status1'] = function(status)
{
   //do statu1 need to do
};
funMap['status2'] = function(status)
{
   //do statu2 need to do
};

trdParty.onCallback(function(status){
   funMap[status.Text](status); //這裡就會依照status.Text的狀態類型呼叫對應的method了
});

trdParty.doMethod();

透過以上的方法可以簡單的做funciton mapping呼叫。但如果針對一個status可能有好幾件事情要做呢?
說真的，透過JavaScript來達到二維的呼叫也是很簡單

var funMap = [][]; //二維
funMap['status1'].push(function(status)
{
   //do statu1 need to do -- 1
});
funMap['status1'].push(function(status)
{
   //do statu1 need to do -- 2
});
funMap['status2'].push(function(status)
{
   //do statu2 need to do -- 1
});
funMap['status2'].push(function(status)
{
   //do statu2 need to do -- 2
});

trdParty.onCallback(function(status){
   for(var fn in funMap[status.Text])
   {
      funMap[status.Text][fn](status);
   }
});

trdParty.doMethod();

怎樣，很簡單吧。

不過這樣寫每次沒辦法利用，時間晚了，下次再來介紹整個Observer Pattern...

[JavaScript] Observer Pattern

這是在我日常的工作中是一個很常被使用到的Pattern，它使用起來的方式如下

var callback = function(topic, data){
   console.log(topic + ': ' + data);
}

//假設observe object 已存在
observe.addCallback('MyTopic',callback);

observe.fireCallback('Mytopic', 'my data 1');  // Mytopic : my data 1
observe.fireCallback('Mytopic', 'my data 2');  // Mytopic : my data 2
observe.fireCallback('Mytopic', 'my data 3');  // Mytopic : my data 3

基本上使用起來很像.NET中event的方式

To be continue ...

[JavaScript] Advanced Object Declaration

上一篇文章中提到了幾個JavaScript class的宣告方式，以及用該class來宣告物件。而這一篇會介紹比較Advanced的物件宣告方式

Literal

//object declaration with attribute and method
var person = {
 //public attribute
 name:'',
 year:0,
 
 //public function
 Init:function(name, year){
  this.name=name;
  this.year=year; 
 }
}

Module

//can declare private/public attribte and method
var Person = (function(){
 //private attribute
 var name;
 
 var privateInfo=function(){
  return this.name;
 };
 
 //All public method and attribute
 return{
  //public attribute
  Nickname:'Andy',
  //public method
  getInfo:function(){
   return Nickname + " - " + name;    
  }
 }
})();

目前看起來好像只有透過所謂Module的宣告方式才可以有public/private的特性，其他方式的的宣告方法看起來都沒有這個效果.

有鑑於有我第一次看到Module的宣告方式看了好久都看不懂，還以為是所謂的新語法，其實不是，帶我一一來拆解

//一般方法的宣告方式
var Person = function(){ /*do what you want*/ };

//execute method
Person();

//如果方法裡面有回傳值
var Person = function(){ 
 /*do what you want*/ 
 
 // return a JSON object
 return{
  pubVar:'',
  pubMethod:function()
  {
   // do method
  }
  
   
 }
};
//execute the same method
var obj = Person();
//get PubVar
var val = obj.pubVar;
//execute pubmethod
obj.pubMethod();

那如果宣告的同時就順便執行呢?

//用()把整個function的宣告包起來後順便再()執行
var person = (function(){ /*do what you want */ })();

//get PubVar
var val = obj.pubVar;
//execute pubmethod
obj.pubMethod();

不曉得各位看官有沒有看懂了

JavaScript class 宣告方式

在JavaScript的語法中，光是class的宣告方式就有好幾種，底下列出我所知道的宣告方式

function Person(name,year){
 //public attribute
 this.name=name;
 this.year=year;
 
 //public method
 this.getInfo(){
  return 'I am '+ this.name + 
      ',and I am ' + this.year + 'years old';
 }
}

用法

var p = new Person('Andy','18');
p.getInfo();

你也可以透過Prototype的方式宣告

function Person(name,year){
 //public property
 this.name=name;
 this.year=year;
}
//public method
//底下方法也可以宣告public property
//public method
Person.prototype.getInfo = function(){
  //public method
  return 'I am '+ this.name + 
      ',and I am ' + this.year + 'years old';
};

..
或者這樣宣告

var Person = function(name,year){
 //public attribute
 this.name=name;
 this.year=year;
};

//public method
Person.prototype.getInfo = function(){
  //public method
  return 'I am '+ this.name + 
      ',and I am ' + this.year + 'years old';
};

另一種宣告class的方法，不過這個方法我不知道怎麼宣告constructor

var Person = new Class;

//public method
Person.prototype.getInfo = function(){
  //public method
  return 'I am '+ this.name + 
      ',and I am ' + this.year + 'years old';
};

靜態方法(static method)部分，可以這樣宣告

//Person is class name
Person.find = function(id){/* ... */}

//instance method部分，也可以這樣宣告

//instance a Person object
var person = new Person('Andy',18);
person.find = function(id){/*  .... */}

下次再來介紹如何宣告物件 ....