Javascript 5种设计风格

Posted 2020-09-22 荆棘中的百合花

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>