JavaScript 设计模式

最新推荐文章于 2024-01-17 11:17:48 发布

睿子

最新推荐文章于 2024-01-17 11:17:48 发布

阅读量396

点赞数

分类专栏： Javascript 文章标签： javascript function 语言设计模式 methods 编程

本文链接：https://blog.csdn.net/ge_zhiqiang/article/details/6602124

版权

Javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JavaScript是近年来一个非常流行并被广泛应用的语言。因为它被几乎所有的浏览器所支持，因此也得到了广泛的推广。作为一种语言，它在我们的生活变得难以相信的重要，帮助我们增强web的功能，创建丰富的用户界面。
为什么仍然有一些人认为它是一种“玩具式”的语言，认为它不适合于专业的程序员。我认为这是因为他们没有认识到它的真正的强大之处和它相比其它各种编程语言的独特性。JavaScript是一门非常神奇高深的语言，拥有一些C家族类语言所没有的特性。
本章我们将探讨是哪些特性使JavaScript如此的神奇高深。我们将看到JavaScript使你可以用多种不同的方式来完成同一件事情，以及如何通过函数式程序设计的方式来模拟实现面向对象程序设计。我们将讨论为什么你应该把设计模式放在首页以及如何使用它来使你的代码更有效，工作更简单。

进入正题 :

JavaScript的一个很重要的特性就是其灵活性。作为JavaScript程序员，你可以使你的程序很简单或很复杂。JavaScript允许你使用各种不同的编程风格。你可以使用函数式风格或者接近于面向对象的编程风格来编写你的代码，同样你可以在不了解函数式或面向对象编程的情形下书写相对复杂的程序，你也可以通过写一些简单的函数来使用它。或者这些也是一些人把JavaScript看做“玩具”语言的一个原因，但我们应该认为这些是一些优秀的特性。它可以使程序员只掌握小部分易学的语言子集来完成一些有用的功能，同样它也意味着当你成为一个更加高级的程序员时JavaScript会在你手中发挥更大的能力。
      JavaScript允许你去模拟其他语言中的模式和思想。此外它自身还包含一些独有的特性。它提供了和传统服务端语言完全一样的面向对象特性。
      我们来看一下通过几个不同的代码组织方式来完成同样的一件任务：启动和停止一个动画。如果你不理解这些例子也无所谓，我们这里使用的所有模式和技术都会在本书中讲到。现在，你可以把这一节做为JavaScript可以通过不同的方式来完成同一件任务的一个实际的例子。
      如果你以前是一个面向过程的程序员，你可以会像下面这样做：

Js代码

function startAnimation() {
}
function stopAnimation() {
}

function startAnimation() {

}
function stopAnimation() {

}

这种方法非常简单，但它没有创建一个动画的对象来使你可以保存状态并拥有一些只作用于其内部状态的方法。下面这段代码定义了一个类使你可以创建这样的一个对象：

Js代码

/* Anim class. */
var Anim = function() {
};
Anim.prototype.start = function() {
};
Anim.prototype.stop = function() {
};
/* Usage. */
var myAnim = new Anim();
myAnim.start();
myAnim.stop();

/* Anim class. */
var Anim = function() {

};
Anim.prototype.start = function() {

};
Anim.prototype.stop = function() {

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

myAnim.stop();

这里定义了一个叫做Anim的类并为该类的prototype属性增加了两个方法。我们在第三章将详细讨论这种技术。如果你喜欢创建一个只有一个声明的类，你可能会写出如下的代码：

Js代码

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

/* Anim class, with a slightly different syntax for declaring methods. */
var Anim = function() { 

};
Anim.prototype = {
start: function() {

},

stop: function() {

}
};

这看起来有点类似于经典的面向对象编程风格：将函数声明嵌套在一个类声明之内。如果你之前使用过这种风格，你可以试一下下面这个例子，如果不太理解下面的部分代码也不要担心：

Java代码

/* Add a method to the Function object that can be used to declare methods. */
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() {
});

/* Add a method to the Function object that can be used to declare methods. */
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() {

});

Function.prototype.method使你可以为类增加新的方法。它可以接收两个参数：第一个是作为新方法的名字的字符串，第二个是为这个方法名指定的一个函数。
你可以通过对Function.prototype.method稍作修改以使其可以进行链式调用。为此，你只需要在创建完每个方法时返回一个this即可

Js代码

/* This version allows the calls to be chained. */
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
return this;
};
/* Anim class, with methods created using a convenience method and chaining. */
var Anim = function() {
};
Anim.
method('start', function() {
}).
method('stop', function() {
});

/* This version allows the calls to be chained. */
Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
    return this;
};
/* Anim class, with methods created using a convenience method and chaining. */
var Anim = function() { 

};
Anim.
method('start', function() {

}).
method('stop', function() {

});

结束语 :

在JavaScript语言中，函数是第一性的对象。它可以被存储在一个变量中，作为参数传入到函数中，被函数作为返回值返回，或者在运行的时间动态构造。这些特性使你在使用函数增加了很大的灵活性和表现能力。