`
ziyuewang
  • 浏览: 40114 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

JavaScript设计模式 第一章:神奇的JavaScript

阅读更多

开场白 :

 

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

进入正题 :

 

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

 

function startAnimation() {

}
function stopAnimation() {

}

 

 

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

 

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

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

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

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

myAnim.stop();

 

 

 

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

 

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

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

},

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即可

 

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

 

分享到:
评论
15 楼 dayday_up1 2011-04-26  
javascript设计模式这本书的么,请加上“转载”两字!
14 楼 zhouxianglh 2011-04-26  
1 不喜欢LZ转帖的风格
2 这些东西都是很基础的,被复杂化了
13 楼 ziyuewang 2011-04-26  
大家好好学习吧!都低调点比什么不强!
12 楼 dfbdfbdfb 2011-04-26  
潜水很久,今天忍不住通过恶心的测试来回个贴

个人觉得javaeye的水准日益下降,这个贴的意义在哪里?这些都是最最基本的js基础知识,当笔记好了,竟然可以上首页。。。

还有那么多的同学们提到js的面向对象和设计模式时很兴奋,这不是很多年前就有的东西吗?那么好的入门书籍就在那里。。。
11 楼 attol 2011-04-25  
转东西都不加上转载二字了?
10 楼 wj539h 2011-04-25  
建议楼主把头像换了
9 楼 __游乐场 2011-04-23  
加上转载2个字把
8 楼 ziyuewang 2011-04-22  
大家互相交流啊!
7 楼 lokinell2006 2011-04-22  
LZ先我一步了啊,一直想写JS的设计模式呢
6 楼 ziyuewang 2011-04-22  
js是基于原型的语言,面向对象是模拟的!
5 楼 bugu1986 2011-04-22  
。。。区别
4 楼 ziyuewang 2011-04-22  
但还是有区别的!
3 楼 sliverxxm 2011-04-22  
近年来js的框架越来越牛啦,迟早会将面向对象的理念完全加进去的.
2 楼 lcgg110 2011-04-22  
http://wanghongxu.iteye.com/blog/434997
发贴重复了吧 ?
1 楼 01404421 2011-04-22  
我写了好几年Js但很少用到面向对象的思想,很惭愧,谢谢了!

相关推荐

    javascript 设计模式 电子书 英文版

    ### JavaScript设计模式知识点详解 #### 一、书籍概述 《Pro JavaScript Design Patterns》是一本深入讲解JavaScript面向对象编程和设计模式的专业书籍。本书由Ross Harmes与Dustin Diaz合著,于2008年出版。书中...

    javascript 设计模式 第一部分(第2-6章) 翻译

    翻译自APress的《Pro JavaScript Design Patterns》,由于时间紧迫,难免漏洞百出,还请谅解,这是本书的第一部分,由于第一章在CSDN已经有了试读,所以没有放上来。希望能跟大家一起进步. QQ:13810701 Email:...

    javascript高级程序设计笔记第一章.docx

    本文将深入探讨在"javascript高级程序设计笔记第一章"中提及的关键概念。 首先,ECMAScript(通常简称为ES)是JavaScript的标准化规范,由ECMA国际维护。在ECMAScript中,存在五种基本数据类型:Undefined、Null、...

    JavaScript设计模式 (美)哈梅斯(Harmes,R), (美)迪亚斯(Diaz,D)著 源码+PDF

    《JavaScript设计模式》共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识,主要包括接口、封装和信息隐藏、继承、单体模式等内容。第二部分则专注于各种具体的设计模式及其在JavaScript...

    JavaScript 王者归来第一章WORD版

    通过以上分析可以看出,《JavaScript王者归来》第一章从多个角度深入探讨了JavaScript的选择理由、应用场景以及合理使用的策略。这对于初学者和专业人士来说都是一份宝贵的指南,有助于他们在实际项目中更加高效地...

    javascript入门教程(共有8章pdf格式)

    1. **第一章:JavaScript简介** - JavaScript的历史和背景 - JavaScript与Java的区别 - JavaScript在浏览器中的执行环境:DOM(Document Object Model)和BOM(Browser Object Model) - JavaScript的基本语法:...

    JavaScript设计模式中文版第4章-继承.pdf

    JavaScript设计模式中的继承机制是其面向对象编程的重要组成部分。继承允许子类继承父类的属性和方法,从而减少代码重复并提高代码复用性。在JavaScript中,继承并不像Java或C++等语言那样简单地使用一个关键字,...

    完全手册:JavaScript动态网页开发详解(1-8章pdf格式)

    第一章:JavaScript入门 这一章主要介绍了JavaScript的基础,包括它的历史、用途以及如何在HTML中引入JavaScript代码。读者将学习到变量、数据类型(如字符串、数字和布尔值)、操作符、表达式和语句的基本用法。 ...

    JavaScript教学大纲

    1. 第一章:JavaScript概述 - 了解JavaScript的历史和发展。 - 区分JavaScript与Java。 - 明确JavaScript的功能和用途。 - 学习JavaScript的开发工具,如IDE和文本编辑器。 2. 第二章:JavaScript基础 - 掌握...

    软件秘笈:设计模式那点事 下载

    在第1章软件设计模式概述后,从第2章到第24章诠释23个软件设计模式。每一种都以一个生活故事开始,然后是模式定义、模式分析、模式实现、设计原则和使用场合。模式实现通过Eclipse中的Java工程展开,采用软件编程...

    JavaScript设计模式中文版第4章-继承定义.pdf

    JavaScript中的继承是一个重要的概念,它允许开发者创建具有共同属性和方法的类层次结构,从而减少代码重复并提高代码复用性。与其他面向对象语言不同,JavaScript并没有简单的继承关键字,而是利用原型(prototype)...

    JavaScript_设计模式_中文版_第3章-封装和信息隐藏

    JavaScript设计模式中的封装和信息隐藏是面向对象编程中至关重要的概念。封装是将对象的内部状态(数据)和行为(方法)结合在一起,对外提供一个有限的接口进行交互,以此来保护内部数据的完整性和安全性。信息隐藏...

    Advanced Game Design with HTML5 and JavaScript

    这包括设计模式、架构选择、性能优化等方面的内容。 #### 总结 通过本书的学习,读者不仅可以掌握HTML5和JavaScript在游戏开发中的高级应用,还能学会如何从零开始构建一个完整的2D游戏开发环境。无论你是初学者...

Global site tag (gtag.js) - Google Analytics