分享
 
 
 

事件驱动的JScript面对象编程

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

在这里分享一下我对JScript的面对象编程的一些认识和一点解决方案。JScript和JavaScript差不多(当然有所不同),但本文中讲到的内容也可用于JavaScript

JScript支持面对象的一些属性,但他的this指针很奇怪,当有一个对象obj1中的一个成员函数用到this,如果有别一个对象obj2引用该函数,那这个this指向的不是obj1,而是obj2。

下面我们来看一个例子:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title></head>

<body>

<p id="text">this is the element "p"</p>

<script language="jscript">

function obj1(){ //类obj1

this.innerText = "this is obj1";

}

function obj1.prototype.fun(){

alert(this.innerText);

}

var o1 = new obj1; //对象o1

o1.fun(); //显示“this is obj1”

text.onclick = o1.fun;//把对象o1的成员函数绑定到HTML元素text中,这是再点击“this is the element “p”。你会发现显示的是this is the element “p”,而不是this is obj1。

</script>

</body></html>

从上面的例子中我们可以知道JScrpt中函数引用只是引用了函数的入口,并没有保存对象的引用。而this只是简单的指向调用函数的对象而已。JScript并无对象指针这种东西(可能我不知道,如果看文章的您知道的话,请告诉我(QQ:123737))。

在我们通常写一些要处理HTML元素的onclick事件的时候,我们会这样写

方法一:

<script language="jscript">

function fun(obj){

alert(obj.innerText);

}

</script>

<p id="text" onclick="fun(this) ">element</p>

方法二:

<p id="text">element</p>

<script language="jscript">

function fun(){

alert(this.innerText);

}

text.onclick = fun;

</script>

上面两个方法的动行结果是一样的,可能你会发现方法一的onclick="fun(this) "直现一些。方法二的fun更理性些。但方法一的fun(this)的this太麻烦了,把代码改成:

<script language="jscript">

function fun(){

alert(this.innerText);

}

</script>

<p id="text" onclick="fun()">element</p>

你会发现这个脚本是不能工作的。为什么??当你用方法一书写时,实际上这时onclick的处理事件是这样的:

function anonymous() { fun(this) }

也就是说IE为onclick事件创造了一个匿名函数,并在函数中调用了fun函数。由于调用anonymous的是对象text,所以this就把text的引用传给了fun函数。这时fun中的形参obj就指向text。如果您把事件绑定写成:

<p id="text" onclick="fun()">element</p>

则由于调用fun()的是函数anonymous而不是对象text,所以如果您在fun中使用this的话,这里this是不指向任何地方的。如果您alter(this)的话,您会发现他的值是undefined。

在方法二中,onclick的处理事件就是fun,所以this是可用的,它指向text。但您千万不要把方法二中fun的定义写成:

function fun(obj){

alert(obj.innerText);

}

当text响应onclick事件调用onclick时是不传递任何参数给fun的,这时obj就是undefined了。

问题已经明确,但当我们要响应HTML的事件,而处理的信息又是存在于对象中时又该怎么办呢?(当然处理方法是基于纯事件驱动的)

我们可以这样:

<p id="text">click this</p>

<script language="jscript">

function obj(){

this.innerText = "this is obj";

}

function obj.prototype.fun(){

var self = this.obj; //得到obj1的引用。学过Delphi的都知道self是什么意思

//JScript中this是不能重新赋值的,所以用self。学过Delphi的人都知道self是什么意思

alert(self.innerText);

}

var obj1 = new obj;

text.obj = obj1; //给text添加一个新的属性obj,并赋于obj1的引用。

text.onclick = obj1.fun;

</script>

点击click this结果显示"this is obj"。使用该方法就可以用JScript纯事件驱动的程序了。

说完了事件驱动的JScript面对象编程。我们来看看一个具体的例子:

假如我们要在网页上做一种可编辑的Label。正常情怳下它像一般的文本一样。当用鼠标点击它时就变成输入框并可编辑文本的内容。然后当它失去焦点时又恢复成正常文本的样子。

程序运行的例子如下:

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

程序的源代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

<body>

<script language="jscript">

function EditableText(_owner){

this.owner = _owner;

this.edit = document.createElement("input");

this.edit.type = "text";

this.edit.onblur = this.onEditBlur;

this.edit.onclick = this.onEditClick;

this.edit.obj = this;

this.span = document.createElement("span");

this.span.innerText = "EditableText";

this.span.obj = this;

this.span.onclick = this.onSpanClick;

this.owner.appendChild(this.span);

}

function EditableText.prototype.onEditClick(){

event.cancelBubble = true;

}

function EditableText.prototype.onEditBlur(){

event.cancelBubble = true;

var self = this.obj;

self.span.innerHTML = "";

self.span.innerText = self.edit.value;

}

function EditableText.prototype.onSpanClick(){

event.cancelBubble = true;

var self = this.obj;

self.edit.value = this.innerText;

this.innerHTML = "";

this.appendChild(self.edit);

self.edit.focus();

}

////////////////////////////////////////////////////////////

function init(){

for(var i=0;i<20;i++){

new EditableText(document.body);

var br = document.createElement("br");

document.body.appendChild(br);

}

}

init();

</script>

</body>

</html>

注意程序后面的init函数。里面的new EditableText(document.body)只是建立了对象。但是我并无保存建立的对象的引用。而是让对象自己去管理自己。对象的行为都是由事件来驱动的(onclick和onblur),而无须别外的辅助代码。

程序运行的例子如下:

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

EditableText

程序的源代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

<body>

<script language="jscript">

function EditableText(_owner){

this.owner = _owner;

this.edit = document.createElement("input");

this.edit.type = "text";

this.edit.onblur = this.onEditBlur;

this.edit.onclick = this.onEditClick;

this.edit.obj = this;

this.span = document.createElement("span");

this.span.innerText = "EditableText";

this.span.obj = this;

this.span.onclick = this.onSpanClick;

this.owner.appendChild(this.span);

}

function EditableText.prototype.onEditClick(){

event.cancelBubble = true;

}

function EditableText.prototype.onEditBlur(){

event.cancelBubble = true;

var self = this.obj;

self.span.innerHTML = "";

self.span.innerText = self.edit.value;

}

function EditableText.prototype.onSpanClick(){

event.cancelBubble = true;

var self = this.obj;

self.edit.value = this.innerText;

this.innerHTML = "";

this.appendChild(self.edit);

self.edit.focus();

}

////////////////////////////////////////////////////////////

function init(){

for(var i=0;i<20;i++){

new EditableText(document.body);

var br = document.createElement("br");

document.body.appendChild(br);

}

}

init();

</script>

</body>

</html>

注意程序后面的init函数。里面的new EditableText(document.body)只是建立了对象。但是我并无保存建立的对象的引用。而是让对象自己去管理自己。对象的行为都是由事件来驱动的(onclick和onblur),而无须别外的辅助代码。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有