使用JavaScript实现观察者模式

原文出处:http://www.codeproject.com/KB/scripting/Observer_Pattern_JS.aspx

JavaScript的简单介绍

JavaScript是一种基于原型(prototype)的脚本语言(以前叫LiveScript)。它的语法松散,类似于C语言。该脚本语言是由Netscape社团开发的,用于Navigator浏览器。和C语言一样,JavaScript本身没有构造函数和析构函数。C语言依赖于标准输入/输出库;而JavaScript则依赖于执行它的宿主环境。这种脚本语言使用自定义函数,其他语言中可能会被称为过程、例程或功能。基于web的JavaScript主要用于在web页面中和DOM(即文档对象模型)进行交互,以便完成一些仅使用HTML无法实现的功能。JScript是微软推出的和 JavaScript 对应的一种脚本语言,它用于微软的IE浏览器当中。

在JavaScript中创建自定义对象

创建一个新的JavaScript对象需要2个步骤。首先,你需要创建一个函数,函数名就是新建的类的名称。这个函数也就是我们经常说的 构造函数。然后,你必须使用 new 操作符,后面跟上对象的名称以及一些必要的参数来创建一个对象的实例。下面的代码定义了一个 Person 函数,然后使用 new 操作符创建了 Person 的实例:

function Person(name, surname)
{
   this.name = name;
   this.surname = surname;
}

var salvo = new Person('Salvatore', 'Vetro');

this关键字是指向你当前正在执行的对象的实例,因此,允许你在当前对象上添加或修改对象的属性。

如何为对象添加方法?

在JavaScript中,通过调用绑定了原型属性的 构造函数 来创建任何对象。添加新方法的语法如下:

customeObject.prototype.newMethodName = function;
//方法体
Person.prototype.Speak = function(){...};

如果你在一个对象的prototype属性上添加一个方法,那么,所有通过该对象的构造函数创建的实例都具有这个新方法。注意,prototype 本身也是一个对象,而且能够通过 对象文字语法(object literal syntax) 来为它定义属性和方法:

function NewObject()
{
   alert("I am a new object.");
}

NewObject.prototype =
{
   alert1 : function(str){alert(str);}, //新方法
   name : 'As you want', //新属性
   Alert2 : function(){alert('Bye.');}, //新方法
};
var newObject = new NewObject();
newObject.alert1("Ciao");
newObject.name;
newObject.alert2();

脚本每次尝试读/写对象的属性的时候,JavaScript会按照特定的顺序来搜寻和指定名称匹配的属性。顺序如下:

l 如果该属性已经分配给当前对象,则使用该属性的值;

l 如果在当前对象中没有搜索到指定的属性,则检查该对象构造函数的prototype属性的值;

l 沿着prototype链一直查找,直到找到匹配的属性(已经为它赋值),否则,一直会查找到 Object 对象。因此,如果你改变了构造函数的prototype属性的值,并且没有在构造函数的某个实例中重写属性的值,JavaScript会返回对象当前prototype属性的值。

时间: 2024-12-02 13:50:57

使用JavaScript实现观察者模式的相关文章

Javascript设计模式:观察者模式

一直以来都想把在实际开发中的一些经验系统地整理一下,共享出来给一些有志于深入B/S开发的朋 友,趁着国庆忙里偷闲,先试验性的写一下有关于Javascript开发中的比较有用的东西. 设计模 式一直以来都是在面向对象的语言,或比较正规化的开发中才会出现的一门程序设计思想.一直以来众 多的前端开发者认为使用OO方式来写JS更像是一个程序开发者,殊不知一旦将这门脚本语言深入进去后 ,仅仅才是一个开始,设计模式仅能算是对程序设计深入了解的第一步. 为什么要用设计模式我 就不多说了,仁者见仁的问题,现在还

React 组件间通讯

React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父子:Parent 与 Child_1.Child_2.Child_1_1.Child_1_2.Child_2_1 兄弟:Child_1 与 Child_2.Child_1_1 与 Child_2.etc. 针对这些关系,我们将来好好讨论一下这些关系间的通讯方式. (在 React 中,React 组

Angular双向数据绑定的例子

Angular是一款较为出名的前端框架,它的很多特性都是相当酷的,例如:双向数据绑定.依赖注入.指令.MVC(或者说MVVM).模板(有点像handlebar).但是被讨论最多的还是双向数据绑定,其核心思想就是观察者模式(或者说发布订阅模式),本文的重点就在于讨论如何实现观察者模式,进而讨论如何实现简单的双向数据绑定. 首先我们先来看看观察者模式: 观察者模式 JavaScript是一个事件驱动型语言,观察者模式可谓随处可见,例如常用的一些onclick. attachEvent . addEv

JavaScript设计模式之观察者模式

设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切图.做少量交互效果的FE甚至可能不会用到,但是当你开始使用Angular/Backbone等框架的时候,就无法避免设计模式.MVC/MVVM这些东西了(反正我是伤脑筋). 我学设计模式是刚开始接触编程大概三个月的时候,看一本书<大话设计模式>,里面用C#语言来写,我很无语,因为强类型的编程语言对于

传统javascript事件模型实现观察者模式

在W3C新的事件模型框架中,IE和Mozilla都实现了相应的版本,IE的是attachEvent和detachEvent来实现元素事件的添加和删除,而Mozilla则是标准的addEventListener和 removeEventListener.在传统的javascript事件模型中,我们没办法为一个页面元素注册多个事件,只有靠自己来实现观察者模式.代码来自<ajax in action>,我添加了注释 //命名空间var jsEvent = new Array(); //构造函数jsE

Javascript设计模式之观察者模式的多个实现版本实例

 这篇文章主要介绍了Javascript设计模式之观察者模式的多个实现版本实例,本文给出3种实现版本代码,同时给出了Jquery实现版本,需要的朋友可以参考下     介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. 使用观察者模式的好处: 1.支持简单的广播通信,自动通知所有已经订阅过的对象. 2.页面载入后目标对象很容易与观

Javascript 模式实例 观察者模式_javascript技巧

在园里有许多牛人都已经写过这些文章,不过大多的例子都是.NET,今天我要举一个JS的使用实例.有兴趣的朋友可以先了解一下一些牛人的,比如李会军大哥设计模式篇中观察者的那一节 http://www.cnblogs.com/Terrylee/archive/2006/10/23/Observer_Pattern.html说说我自己对这模式的理解,其思想核心是:每个被观察对象都依据对象数据的改变而改变,被观察对象一定要有同样的改变行为来约束,这个约束是被观察对象提供给观察器的统一接口.观察器会开发改变

学习JavaScript设计模式之观察者模式_javascript技巧

一.定义 观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: (1)可广泛应用于异步编程中,是一种替代传递回调函数的方案. (2)可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口.两对象轻松解耦. 二.DOM事件–观察者模式典例 需要监控用户点击document.body的动作,但是我们没有办法预知用户将在什么时间点击

以【猫叫、老鼠跑、主人醒】为例子,使用 javascript 来实现 观察者模式 (有在线演示)

  "猫叫.老鼠跑.主人醒"是一个很古老的话题了,大家也都有各自的想法和解决方案.我也是看了很多,一开始的时候是相当的迷糊,这个怎么就是面试题了?考的是啥呀,和编程有关系吗?又是猫又是老鼠的,晕死了.后来遇到有人写就去凑凑热闹看几眼.但还是迷迷糊糊.后来学习了面向对象的知识,知道了接口.委托,然后又看了<大话设计模式>. 这时候再回过头去看猫呀.老鼠什么的,才能看懂一点.为什么只是看懂一点呢?因为还是不知道这个东东和写代码有啥关系,呵呵.再再后来,在自己写代码的时候,为了解