Javascript 5種設計風格

標籤：cal   聲明   animation   ini   creat   java   different   on()   字串   

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種設計風格