1.過程式的程序設計

<script>
/*Start and Stop animations using functions.*/
function startAnimation() {
//....
}
function stopAnimation() {
//....
}
</script>

2.創建類對象

<script>
/* Anim class. */
var Anim = function () {
//...
};
Anim.prototype.start = function () {
//...
};
Anim.prototype.stop = function
 
 () {
//...
};

/* Usage.*/
var myAnim = new Anim();
myAnim.start();
//...
myAnim.stop();

</script>

3.把類封裝在一條聲明中

<script>

/* Anim class, with a slightly different syntax for declaring methods. */
var Anim = function () {
//...
};
Anim.prototype = {
start: function () {
//...
},
strop: function
 
 () {
//...
}
};
</script>

4.添加一個方法

<script>
/* Add a method to the Fuction object that can be used to declare methods. */
/* Function.prototype.method 用於為類添加新方法，兩個參數。
第一個參數：字符串，表示新方法的名稱；
第二個參數：用作新方法的函數
*/
Function.prototype.method = function (name, fn) {
this.prototype[name] = fn;
}

/* Anim class,with methods created using a convenience method.
 
*/
var Anim = function () {
//...
};
Anim.method(‘start‘, function () {
//...
});
Anim.method(‘stop‘, function () {
//...
});
</script>

5.鏈式調用

<script>
/* This version allows the calls to be chained. */
Function.prototype.method = function (name, fn) {
this.prototype[name] = fn;
return this; //返回this,使其可以被鏈式調用。
};

/* Anim class,with methods created using a convenience method and chaining .*/
var Anim = function () {
//...
};
Anim.
method(‘start‘, function () {
//...
}).
method(‘stop‘, function () {
//... 
});
</script>

Javascript 5種設計風格