[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){/*  .... */}

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