全国省市县无刷新多级联动菜单

省市县关联菜单

多级关联菜单：

Posted: 2006年7月31日 10:29 by admin | 0 Comments

Filed under: 联动菜单

关于SELECT的无限联动菜单

index.asp
程序代码：

'jscript_city.asp
程序代码：
<%
' varBase 下拉菜单等级
' varSele 所选择下拉菜单项的数据库ID
' varElem 下一级的表单名称

varBase=Request.QueryString("base")
varSele=Left(Request.QueryString("sele"),InStr(Request.QueryString("sele"),"-")-1)
varElem=Request.QueryString("elem")

varDistName=""
varAutoID=""

Set conDB=Server.CreateObject("ADODB.CONNECTION")
conDB.Open "Driver={Microsoft Access Driver (*.mdb)};DBQ="&Server.Mappath("db1.mdb")

sqlCommand="select * from table1 where filed1="&varBase&" and filed2="&varSele
Set rsRecord=conDB.Execute(sqlCommand)

While Not rsRecord.eof
varDistName=varDistName&chr(34)&rsRecord("filed3")&chr(34)
varAutoID=varAutoID&chr(34)&rsRecord("id")&chr(34)

rsRecord.movenext
If Not rsRecord.Eof Then
varDistName=varDistName&","
varAutoID=varAutoID&","
End If
Wend

Response.Write("var varDistName=new Array("&varDistName&")"&vbcrlf)
Response.Write("var varAutoID=new Array("&varAutoID&")"&vbcrlf)

Response.Write("var varElem=eval("&chr(34)&"document.Form1."&varElem&chr(34)&")"&vbcrlf)

Response.Write("varElem.length=varDistName.length+1;"&vbcrlf)

Response.Write("for(var i=0;i Response.Write(" varElem.options[i+1].text=varDistName;"&vbcrlf)
Response.Write(" varElem.options[i+1].value=varAutoID+'-'+varDistName;"&vbcrlf)
Response.Write("}"&vbcrlf)

Response.Write("varElem.selectedIndex=0;"&vbcrlf)

%>

db1.mdb
'-------------------------------------------------
福建厦门思明黄厝曾厝桉村
福建泉州丰泽西湖水头村

如上面的五级转成数据库为：
'-------------------------------
id    filed1    filed2    filed3
1    0        0        福建
2    1        1        厦门
3    1        1        泉州
4    2        2        思明
5    3        4        黄厝
6    4        5        曾厝桉村
7    2        3        丰泽
8    3        7        西湖
9    4        8        水头村
'-------------------------------------------------
数据库说明：
id 自动编号
filed1 下拉菜单列表的等级(看级数。可以设置它的精度。是数字类型)
filed2 上一级的id号(用长整型吧)
filed3 这个就不用说了吧(文件。长度自己看情况)

本程序在IIS4+WIN2000P+ACCESS2000下通过。

来源：http://www.it055.com/it055_infos/net_programs/asp/1590_page1.htm

Posted: 2006年7月31日 9:40 by admin | 0 Comments

Filed under: 联动菜单

JavaScript对正则exec的扩展

Posted:2006年7月26日 3:24 by admin | 0 Comments

JavaScript异常处理

异常处理概述
在代码的运行过程中，错误是不可避免的，总的来说，错误发生于两种情况：一是程序内部的逻辑或者语法错误，二是运行环境或者用户输入中不可预知的数据造成的错误。对于前者，就称之为错误（error），可以通过调试程序来解决；而后一种则更多的称之为异常（exception），顾名思义，就是超出常规，没有按程序设计的意愿来输入数据。当然，异常还会有许多种类型。
所以说，异常并不等价于错误，相反，有时还会利用异常来解决一些问题。JavaScript可以捕获一个异常并进行相应的处理，从而避免了浏览器向用户报错。

使用try-catch-finally处理异常
用户可以使用该结构处理可能发生异常的代码，如果发生异常，则由catch捕获并进行处理，其语法如下：
try{
       //要执行的代码
}
catch(e){
       //处理异常的代码
}
finally{
       //无论异常发生与否，都会执行的代码
}
通过异常处理，可以避免程序停止运行，从而具有了一定的自我修复能力。
在Ajax开发中，利用异常处理的一个典型应用就是创建XMLHttpRequest对象，不同浏览器创建它的方式是不一样的，为了使代码能够跨浏览器运行，就可以利用异常，一种方法不行，再用另一种方法，直到不发生异常为止，例如：

通过这种方式，就可以跨浏览器创建XMLHttpRequest对象。注意，即使不在catch块内进行处理，catch标识及其参数e也是必须写的，否则会产生语法错误，而finnally则不是必须的。
使用throw语句抛出异常
在JavaScript中有其内部的异常机制，在遇到非法操作时能自动抛出异常。实际的开发中，随着程序的复杂，需要能自己实现异常，这可以通过throw语句来实现：
throw value；
其中value就是要抛出的异常变量，它可以是JavaScript中的任何一种类型。但在JavaScript内部的异常中，异常参数（即catch (e)中的e）是一个名为error的对象，可以通过new Error(message)来创建这个对象，异常的描述被作为error对象的一个属性message，可以由构造函数传入，也可以之后赋值。通过这个异常描述message，可以让程序获取异常的详细信息，从而自动处理。
下面的程序计算两个数据的和，如果参数不是数字，则抛出异常，代码如下：

程序中使用字母作为参数传递给sum函数，是错误的，所以函数内抛出了一个异常对象，这个对象被catch语句获取，并使用alert语句显示了其详细信息。
注意：使用new Error(message)创建异常对象只是一种默认的习惯，也是内置异常的实现方式。这不是必需的，完全可以抛出任意数据类型的异常，例如一个整数，来作为异常的描述。只要在程序中抛出异常和捕获异常能匹配即可。

Error 对象除了message属性以外，还有一些其他的属性，这些属性因浏览器而异，例如：在IE浏览器中，error对象的属性包括name、number、 description、message；而在Firefox浏览器中，error对象的属性包括message、fileName、 lineNumber、stack、name。在实际的应用中如果要实现自己的异常，这些属性只要被赋值，都是可用的，其中Firefox浏览器还会自动对stack属性赋值，用于显示异常出现的位置。

Posted: 2006年7月7日 7:02 by admin | 0 Comments

JavaScript使用Window对象

使用Window.open方法新建窗口
Window对象表示的是浏览器窗口，它有多种操作，其中一个重要的方法是open，表示新建一个窗口来打开指定页面。例如在a.html中执行以下语句：
window.open("b.html");
则新建一个窗口打开了b.html页面，这和在a.html页面中用一条链接打开页面的效果是一样的：
b
但window.open对新建窗口的样式可以有更多的控制，例如：窗口大小、是否显示菜单栏、是否显示滚动条、是否显示地址栏等等。其完整的调用语法如下：
window.open(url,windowName,"name1=value1[,name2=value2,[…]]");
其中：url是要打开的页面地址；windowName表示新建窗口的名字，从而可以对其进行控制；最后是一个用字符串表示的参数列表。每一个参数都是名称和值对应的形式，用逗号隔开，其中可以使用的参数如下。
? height：表示新建窗口的高度；
? width：表示新建窗口的宽度；
? left：表示新建窗口到屏幕左边缘的距离；
? top：表示新建窗口到屏幕顶端的距离。
以上属性的单位均为象素，例如对于800×600的分辨率，left=400则表示新窗口的左边缘处于屏幕的正中间。其余的属性主要是布尔型的，用yes或者1表示开启，用no或者0表示关闭。如果是开启，则yes或者1可省略，例如：toolbar=1等价于toolbar=yes等价于toolbar，下面分别介绍这些属性：
? directories：是否显示链接工具栏；
? location：是否显示地址栏；
? menubar：是否显示菜单栏；
? resizable：是否允许调整窗口大小；
? scrollbars：是否显示滚动条；
? status：是否显示状态栏；
? toolbar：是否显示工具栏。
例如，下面的代码将显示一个无菜单、无工具条、无滚动条的窗口：
window.open("test3.html","","height=200,width=300, toolbar=0,menubar=0,scrollbars=0");
使用定时器实现JavaScript的延期执行或重复执行
window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：
window.setTimeout(expression,milliseconds);
window.setInterval(expression,milliseconds);
其中，expression可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法的第二个参数是milliseconds，表示延时或者重复执行的毫秒数。下面分别介绍两种方法。
1．window.setTimeout方法
该方法可以延时执行一个函数，例如：

这段代码将使得页面打开5秒钟后显示对话框“hello”。其中最后一句也可以写为：
window.setTimeout("hello()",5000);
读者可以体会它们的差别，在window.setInterval方法中也有这样的性质。
如果在延时期限到达之前取消延执行，可以使用window.clearTimeout(timeoutId)方法，该方法接收一个id，表示一个定时器。这个id是由setTimeout方法返回的，例如：

这样，如果要取消显示，只需单击页面任何一部分，就执行了window.clearTimeout方法，使得超时操作被取消。

2．window.setInterval方法
该方法使得一个函数每隔固定时间被调用一次，是一个很常用的方法。如果想要取消定时执行，和clearTimeout方法类似，可以调用 window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如：
//定义一个反复执行的调用
var id=window.setInterval("somefunction",10000);
//取消定时执行
window.clearInterval(id);
上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到setInterval方法，下面将设计一个秒表，来介绍setInterval函数的用途：该秒表将包括两个按钮和一个用于显示时间的文本框。当单击开始按钮时开始计时，最小单位为0.01秒，此时再次单击按钮则停止计时，文本框显示经过的时间。另外一个按钮用于将当前时间清零。其实现代码如下：

New Document

给定时器调用传递参数
无论是window.setTimeout还是window.setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必须要带参数，这就需要想方法解决。例如对于函数hello(_name)，它用于针对用户名显示欢迎信息：
var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello,"+_name);
}
这时，如果企图使用以下语句来使hello函数延迟3秒执行是不可行的：
window.setTimeout(hello(userName),3000);
这将使hello函数立即执行，并将返回值作为调用句柄传递给setTimeout函数，其结果并不是程序需要的。而使用字符串形式可以达到想要的结果：
window.setTimeout("hello(userName)",3000);
这里的字符串是一段JavaScript代码，其中的userName表示的是变量。但这种写法不够直观，而且有些场合必须使用函数名，下面用一个小技巧来实现带参数函数的调用：

这里定义了一个函数_hello，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。在 window.setTimeout函数中，使用_hello(userName)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。

使用status和defaultStatus属性改变状态栏信息
status和defaultStatus是window对象的属性，用于设置状态栏信息，语法为：
window.status="message";
window.defaultStatus="message";

其中status属性就是用于设置状态栏显示的文本。而defaultStatus表示默认的状态栏信息，例如默认情况下IE浏览器会显示“完毕”，而Firefox浏览器则显示“完成”。可以通过defaultStatus来改变这一信息。
使用alert、prompt和confirm语句与用户进行交互
这三个语句都是弹出一个对话框，来处理用户输入。它们都是window对象的一个方法，在实际使用时，常常省略window，而直接写成alert("hello")类似的形式。下面分别介绍：
1．alert语句
该语句的原型是：
window.alert(message);
alert接收一个参数，该参数将转换为字符串直接显示在对话框上，例如：
alert("hello,ajax");
2．prompt语句
该语句的原型是：
window.prompt(message,defaultValue);
prompt用于让用户输入一个值，其中message表示提示信息，defaultValue表示显示于文本框的初始值；函数返回用户的输入。对话框包括【确定】和【取消】两个按钮，用户单击【确定】按钮则返回文本框中的内容，单击【取消】则返回null。例如：
var userName=window.prompt("请输入您的姓名：","");
alert("hello,"+userName);
其中prompt提示用户输入其姓名，使用userName变量获取用户输入，并显示欢迎信息。

3．confirm语句
该语句的原型是：
window.confirm(message);
其作用是显示一条信息让用户确认，弹出的对话框包括【确定】和【取消】两个按钮，如果用户单击【确定】，则confirm函数返回true，否则返回false。例如下面的语句：
if(confirm("确定删除该记录吗？")){
//删除记录的操作
}else{
//不删除记录
}

Posted: 2006年7月7日 7:02 by admin | 0 Comments

新浪BLOG提示框

Author:yaosansi
Site:

              国产热门品牌

                    广州丰田

                    北京现代

              国外热门品牌

                    美洲品牌

http://www.yaosansi.com

Posted: 2006年7月7日 6:56 by admin | 0 Comments

使用Modello编写JavaScript类

一，背景

回顾一下编程语言的发展，不难发现这是一个不断封装的过程：从最开始的汇编语言，到面向过程语言，然后到面向对象语言，再到具备面向对象特性的脚本语言，一层一层封装，一步一步减轻程序员的负担，逐渐提高编写程序的效率。这篇文章是关于 JavaScript 的，所以我们先来了解一下 JavaScript 是一种怎样的语言。到目前为止，JavaScript 是一种不完全支持面向对象特性的脚本语言。之所以这样说是因为 JavaScript 的确支持对象的概念，在程序中我们看到都是对象，可是 Javascipt 并不支持类的封装和继承。曾经有过 C++、Java或者 php、python 编程经验的读者都会知道，这些语言允许我们使用类来设计对象，并且这些类是可继承的。JavaScript 的确支持自定义对象和继承，不过使用的是另外一种方式：prototype（中文译作：原型）。用过 JavaScript 的或者读过《设计模式》的读者都会了解这种技术，描述如下：

每个对象都包含一个 prototype 对象，当向对象查询一个属性或者请求一个方法的时候，运行环境会先在当前对象中查找，如果查找失败则查找其 prototype 对象。注意 prototype 也是一个对象，于是这种查找过程同样适用在对象的 prototype 对象中，直到当前对象的 prototpye 为空。

在 JavaScript 中，对象的 prototype 在运行期是不可见的，只能在定义对象的构造函数时，创建对象之前设定。下面的用法都是错误的：

														o2
														.
														prototype
														 = 
														o1
														;

														/*
这时只定义了 o2 的一个名为“prototype”的属性，
并没有将 o1 设为 o2 的 prototype。
*/
														
																

														
														// ---------------
														
																

														
														f2
														 = 
														function
														(){}
														;

														o2
														 = 
														new
														
														
														f2
														;

														f2
														.
														prototype
														 = 
														o1
														;

														/*
这时 o1 并没有成为 o2 的 prototype，
因为 o2 在 f2 设定 prototype 之前已经被创建。
*/
														
																

														
														// ---------------
														
																

														
														f1
														 = 
														function
														(){}
														;

														f2
														 = 
														function
														(){}
														;

														o1
														 = 
														new
														
														
														f1
														;

														f2
														.
														prototype
														 = 
														o1
														;

														o2
														 = 
														new
														
														
														f2
														;

														/*
同样，这时 o1 并不是 o2 的 prototype，
因为 JavaScript 不允许构造函数的 prototype 对象被其它变量直接引用。
*/

正确的用法应该是：

从上面的例子可以看出：如果你想让构造函数 F2 继承另外一个构造函数 F1 所定义的属性和方法，那么你必须先创建一个 F1 的实例对象，并立刻将其设为 F2 的 prototype。于是你会发现使用 prototype 这种继承方法实际上是不鼓励使用继承：一方面是由于 JavaScript 被设计成一种嵌入式脚本语言，比方说嵌入到浏览器中，用它编写的应用一般不会很大很复杂，不需要用到继承；另一方面如果继承得比较深，prototype 链就会比较长，用在查找对象属性和方法的时间就会变长，降低程序的整体运行效率。

二，问题

现在 JavaScript 的使用场合越来越多，web2.0 有一个很重要的方面就是用户体验。好的用户体验不但要求美工做得好，并且讲求响应速度和动态效果。很多有名的 web2.0 应用都使用了大量的 JavaScript 代码，比方说 Flickr、Gmail 等等。甚至有些人用 Javasript 来编写基于浏览器的 GUI，比方说 Backbase、Qooxdoo 等等。于是 JavaScript 代码的开发和维护成了一个很重要的问题。很多人都不喜欢自己发明轮子，他们希望 JavaScript 可以像其它编程语言一样，有一套成熟稳定 Javasript 库来提高他们的开发速度和效率。更多人希望的是，自己所写的 JavaScript 代码能够像其它面向对象语言写的代码一样，具有很好的模块化特性和很好的重用性，这样维护起来会更方便。可是现在的 JavaScript 并没有很好的支持这些需求，大部分开发都要重头开始，并且维护起来很不方便。

三，已有解决方案

有需求自然就会有解决方案，比较成熟的有两种：

1，现在很多人在自己的项目中使用一套叫 prototype.js 的 JavaScript 库，那是由 MVC web 框架 Ruby on Rails 开发并使用 JavaScript 基础库。这套库设计精良并且具有很好的可重用性和跨浏览器特性，使用 prototype.js 可以大大简化客户端代码的开发工作。prototype.js 引入了类的概念，用其编写的类可以定义一个 initialize 的初始化函数，在创建类实例的时候会首先调用这个初始化函数。正如其名字，prototype.js 的核心还是 prototype，虽然提供了很多可复用的代码，但没有从根本上解决 JavaScript 的开发和维护问题。

2，使用 asp.net 的人一般都会听过或者用到一个叫 Atlas 的框架，那是微软的 AJAX 利器。Atlas 允许客户端代码用类的方法来编写，并且比 prototype.js 具备更好的面向对象特性，比方说定义类的私有属性和私有方法、支持继承、像java那样编写接口等等。Atlas 是一个从客户端到服务端的解决方案，但只能在 asp.net 中使用、版权等问题限制了其使用范围。

从根本上解决问题只有一个，就是等待 JavaScript2.0（或者说ECMAScript4.0）标准的出台。在下一版本的 JavaScript 中已经从语言上具备面向对象的特性。另外，微软的 JScript.NET 已经可以使用这些特性。当然，等待不是一个明智的方法。

四，Modello 框架

如果上面的表述让你觉得有点头晕，最好不要急于了解 Modello 框架，先保证这几个概念你已经能够准确理解：

JavaScript 构造函数：在 JavaScript 中，自定义对象通过构造函数来设计。运算符 new 加上构造函数就会创建一个实例对象
JavaScript 中的 prototype：如果将一个对象 P 设定为一个构造函数 F 的 prototype，那么使用 F 创建的实例对象就会继承 P 的属性和方法
类：面向对象语言使用类来封装和设计对象。按类型分，类的成员分为属性和方法。按访问权限分，类的成员分为静态成员，私有成员，保护成员，公有成员
类的继承：面向对象语言允许一个类继承另外一个类的属性和方法，继承的类叫做子类，被继承的类叫做父类。某些语言允许一个子类只能继承一个父类（单继承），某些语言则允许继承多个（多继承）
JavaScript 中的 closure 特性：函数的作用域就是一个 closure。JavaScript 允许在函数 O 中定义内部函数 I ，内部函数 I 总是可以访问其外部函数 O 中定义的变量。即使在外部函数 O 返回之后，你再调用内部函数 I ，同样可以访问外部函数 O 中定义的变量。也就是说，如果你在构造函数 C 中用 var 定义了一个变量V，用 this 定义了一个函数F，由 C 创建的实例对象 O 调用 O.F 时，F 总是可以访问到 V，但是用 O.V 这样来访问却不行，因为 V 不是用 this 来定义的。换言之，V 成了 O 的私有成员。这个特性非常重要，如果你还没有彻底搞懂，请参考这篇文章《Private Members in JavaScript》

搞懂上面的概念，理解下面的内容对你来说已经没有难度，开始吧！

如题，Modello 是一个允许并且鼓励你用 JavaScript 来编写类的框架。传统的 JavaScript 使用构造函数来自定义对象，用 prototype 来实现继承。在 Modello 中，你可以忘掉晦涩的 prototype，因为 Modello 使用类来设计对象，用类来实现继承，就像其它面向对象语言一样，并且使用起来更加简单。不信吗？请继续往下看。

使用 Modello 编写的类所具备如下特性：

私有成员、公共成员和静态成员
类的继承，多继承
命名空间
类型鉴别

Modello 还具有以下特性：

更少的概念，更方便的使用方法
小巧，只有两百行左右的代码
设计期和运行期彻底分离，使用继承的时候不需要使用 prototype，也不需要先创建父类的实例
兼容 prototype.js 的类，兼容 JavaScript 构造函数
跨浏览器，跨浏览器版本
开放源代码，BSD licenced，允许免费使用在个人项目或者商业项目中

下面介绍 Modello 的使用方法：

1，定义一个类

														Point
														 = 
														Class
														.
														create
														()
														;

														/*
创建一个类。用过 prototype.js 的人觉得很熟悉吧；）
*/

2，注册一个类

														Point
														.
														register
														(
														"
														Modello.Point
														"
														)
														;

														/*
这里"Modello"是命名空间，"Point"是类名，之间用"."分隔
如果注册成功，
Point.namespace 等于 "Modello"，Point.classname 等于 "Point"。
如果失败 Modello 会抛出一个异常，说明失败原因。
*/
														
																

														
														Point
														.
														register
														(
														"
														Point
														"
														)
														; 
														// 这里使用默认的命名空间 "std"
														
																

														
														Class
														.
														register
														(
														Point
														, 
														"
														Point
														"
														)
														; 
														// 使用 Class 的 register 方法

3，获取已注册的类

														P
														 = 
														Class
														.
														get
														(
														"
														Modello.Point
														"
														)
														;

														P
														 = 
														Class
														.
														get
														(
														"
														Point
														"
														)
														; 
														// 这里使用默认的命名空间 "std"

4，使用继承

														ZPoint
														 = 
														Class
														.
														create
														(
														Point
														)
														; 
														// ZPoint 继承 Point
														
																

														
														ZPoint
														 = 
														Class
														.
														create
														(
														"
														Modello.Point
														"
														)
														; 
														// 继承已注册的类
														
																

														
														ZPoint
														 = 
														Class
														.
														create
														(
														Point1
														, 
														Point2
														[
														, ...
														])
														;

														/*
多继承。参数中的类也可以用已注册的类名来代替
*/
														
																

														
														/*
继承关系：
Point.subclasses 内容为 [ ZPoint ]
ZPoint.superclasses 内容为 [ Point ]
*/

5，定义类的静态成员

6，定义类的构造函数

														Point
														.
														construct
														 = 
														function
														(
														$
														self
														, $
														class
														)
														
														
														{
														
																

														
														// 用 "var" 来定义私有成员
														
																

														
														var
														
														
														_name
														 = 
														""
														;

														var
														
														
														_getName
														 = 
														function
														
														
														()
														
														
														{
														
																

														
														return
														
														
														_name
														;

														}
														
																

														
														// 用 "this" 来定义公有成员
														
																

														
														this
														.
														x
														 = 
														0
														;

														this
														.
														y
														 = 
														0
														;

														this
														.
														initialize
														 = 
														function
														
														
														(
														x
														, 
														y
														)
														
														
														{
														
														
														// 初始化函数
														
																

														
														this
														.
														x
														 = 
														x
														;

														this
														.
														y
														 = 
														y
														;
$
														class
														.
														count
														 += 
														1
														; 
														// 访问静态成员
														
																

														
														// 公有方法访问私有私有属性
														
																

														
														this
														.
														setName
														 = 
														function
														
														
														(
														name
														)
														
														
														{
														
																

														
														_name
														 = 
														name
														;

														}
														
																

														
														this
														.
														getName
														 = 
														function
														
														
														()
														
														
														{
														
																

														
														return
														
														
														_getName
														()
														;

														}
														
																

														
														this
														.
														toString
														 = 
														function
														
														
														()
														
														
														{
														
																

														
														return
														
														
														"
														Point(
														"
														 + 
														this
														.
														x
														 + 
														"
														, 
														"
														 + 
														this
														.
														y
														 + 
														"
														)
														"
														;

														}
														
																

														
														// 注意：initialize 和 toString 方法只有定义成公有成员才生效
														
																

														
														this
														.
														add
														 = 
														function
														()
														
														
														{
														
																

														
														// 调用静态方法，使用构造函数传入的 $class
														
																

														
														return
														 $
														class
														.
														add
														(
														this
														.
														x
														, 
														this
														.
														y
														)
														;

														}
														
																

														
														}
														
																

														
														ZPoint
														.
														construct
														 = 
														function
														(
														$
														self
														, $
														class
														)
														
														
														{
														
																

														
														this
														.
														z
														 = 
														0
														; 
														// this.x, this.y 继承自 Point
														
																

														
														// 重载 Point 的初始化函数
														
																

														
														this
														.
														initialize
														 = 
														function
														
														
														(
														x
														, 
														y
														, 
														z
														)
														
														
														{
														
																

														
														this
														.
														z
														 = 
														z
														;

														// 调用第一个父类的初始化函数，
														
																

														
														// 第二个父类是 $self.super1，如此类推。
														
																

														
														// 注意：这里使用的是构造函数传入的 $self 变量
														
																
$
														self
														.
														super0
														.
														initialize
														.
														call
														(
														this
														, 
														x
														, 
														y
														)
														;

														// 调用父类的任何方法都可以使用这种方式，但只限于父类的公有方法
														
																

														
														}
														
																

														
														// 重载 Point 的 toString 方法
														
																

														
														this
														.
														toString
														 = 
														function
														
														
														()
														
														
														{
														
																

														
														return
														
														
														"
														Point(
														"
														 + 
														this
														.
														x
														 + 
														"
														, 
														"
														 + 
														this
														.
														y
														 +

														"
														, 
														"
														 + 
														this
														.
														z
														 + 
														"
														)
														"
														;

														}
														
																

														
														}
														
																

														
														// 连写技巧
														
																

														
														Class
														.
														create
														()
														.
														register
														(
														"
														Modello.Point
														"
														)
														.
														construct
														 = 
														function
														(
														$
														self
														, $
														class
														)
														
														
														{
														
																

														
														// ...
														
																

														
														}

7，创建类的实例

														// 两种方法：new 和 create
														
																

														
														point
														 = 
														new
														
														
														Point
														(
														1
														, 
														2
														)
														;

														point
														 = 
														Point
														.
														create
														(
														1
														, 
														2
														)
														;

														point
														 = 
														Class
														.
														get
														(
														"
														Modello.Point
														"
														)
														.
														create
														(
														1
														, 
														2
														)
														;

														zpoint
														 = 
														new
														
														
														ZPoint
														(
														1
														, 
														2
														, 
														3
														)
														;

8，类型鉴别

														ZPoint
														.
														subclassOf
														(
														Point
														)
														; 
														// 返回 true
														
																

														
														point
														.
														instanceOf
														(
														Point
														)
														; 
														// 返回 true
														
																

														
														point
														.
														isA
														(
														Point
														)
														; 
														// 返回 true
														
																

														
														zpoint
														.
														isA
														(
														Point
														)
														; 
														// 返回 true
														
																

														
														zpoint
														.
														instanceOf
														(
														Point
														)
														; 
														// 返回 false
														
																

														
														// 上面的类均可替换成已注册的类名

以上就是 Modello 提供的全部功能。下面说说使用 Modello 的注意事项和建议：

在使用继承时，传入的父类可以是使用 prototype.js 方式定义的类或者 JavaScript 方式定义的构造函数
类实际上也是一个函数，普通的 prototype 的继承方式同样适用在用 Modello 定义的类中
类可以不注册，这种类叫做匿名类，不能通过 Class.get 方法获取
如果定义类构造函数时，像上面例子那样提供了 $self, $class 两个参数，Modello 会在创建实例时将实例本身传给 $self，将类本身传给 $class。$self 一般在访问父类成员时才使用，$class 一般在访问静态成员时才使用。虽然 $self和$class 功能很强大，但不建议你在其它场合使用，除非你已经读懂 Modello 的源代码，并且的确有特殊需求。更加不要尝试使用 $self 代替 this，这样可能会给你带来麻烦
子类无法访问父类的私有成员，静态方法中无法访问私有成员
Modello 中私有成员的名称没有特别限制，不过用"_"开始是一个好习惯
Modello 不支持保护(protected)成员，如果你想父类成员可以被子类访问，则必须将父类成员定义为公有。你也可以参考 "this._property" 这样的命名方式来表示保护成员：）
尽量将一些辅助性的计算复杂度大的方法定义成静态成员，这样可以提高运行效率
使用 Modello 的继承和类型鉴别可以实现基本的接口（interface）功能，你已经发现这一点了吧；）
使用多继承的时候，左边的父类优先级高于右边的父类。也就是说假如多个父类定义了同一个方法，最左边的父类定义的方法最终被继承

使用 Modello 编写的类功能可以媲美使用 Atlas 编写的类，并且使用起来更简洁。如果你想用 Modello 框架代替 prototype.js 中的简单类框架，只需要先包含 modello.js，然后去掉 prototype.js 中定义 Class 的几行代码即可，一切将正常运行。

如果你发现 Modello 的 bug，非常欢迎你通过 email 联系我。如果你觉得 Modello 应该具备更多功能，你可以尝试阅读一下源代码，你会发现 Modello 可以轻松扩展出你所需要的功能。

Modello 的原意为“大型艺术作品的模型”，希望 Modello 能够帮助你编写高质量的 JavaScript 代码。

5，下载

Modello 的完整参考说明和下载地址：http://modello.sourceforge.net

Posted: 2006年7月7日 6:56 by admin | 0 Comments

JS的IE和Firefox兼容性汇编

JS的IE和Firefox兼容性汇编(原作:hotman_x)- -


以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox

1. document.form.item 问题
    (1)现有问题：
        现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行
    (2)解决方法：
        改用 document.formName.elements["elementName"]
    (3)其它
        参见 2

2. 集合类对象问题
    (1)现有问题：
        现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
    (2)解决方法：
        改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
        又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
    (3)其它

3. window.event
    (1)现有问题：
        使用 window.event 无法在 MF 上运行
    (2)解决方法：
        MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
        原代码(可在IE中运行)：

            ...

                function gotoSubmit() {
                    ...
                    alert(window.event);    // use window.event
                    ...
                }


        新代码(可在IE和MF中运行)：

            ...

                function gotoSubmit(evt) {
                    evt = evt ? evt : (window.event ? window.event : null);
                    ...
                    alert(evt);             // use evt
                    ...
                }

        此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

4. HTML 对象的 id 作为对象名的问题
    (1)现有问题
        在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
    (2)解决方法
        用 getElementById("idName") 代替 idName 作为对象变量使用。

5. 用idName字符串取得对象的问题
    (1)现有问题
        在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
    (2)解决方法
        用 getElementById(idName) 代替 eval(idName)。

6. 变量名与某 HTML 对象 id 相同的问题
    (1)现有问题
        在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
    (2)解决方法
        在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
        此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
    (3)其它
        参见问题4

7. event.x 与 event.y 问题
    (1)现有问题
        在IE 中，event 对象有 x, y 属性，MF中没有。
    (2)解决方法
        在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
        故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
        event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

        如果要完全一样，可以稍麻烦些：
        mX = event.x ? event.x : event.pageX;
        然后用 mX 代替 event.x
    (3)其它
        event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。

8. 关于frame
   (1)现有问题
         在 IE中可以用window.testFrame取得该frame，mf中不行
   (2)解决方法
         在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：

那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
mf：只能这样window.top.frameName来访问这个window对象

另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改

9. 在mf中，自己定义的属性必须getAttribute()取得
10.在mf中没有  parentElement parement.children  而用
               parentNode parentNode.childNodes
   childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
  一般可以通过node.getElementsByTagName()来回避这个问题。
   当html中节点缺失时，IE和MF对parentNode的解释不同，例如

   MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点

  MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

11.const 问题
  (1)现有问题:
     在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
  (2)解决方法:
     不使用 const ，以 var 代替。

12. body 对象
   MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

13. url encoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&

14. nodeName 和 tagName 问题
  (1)现有问题：
     在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
     有问题（具体情况没有测试，但我的IE已经死了好几次）。
  (2)解决方法：
     使用 tagName，但应检测其是否为空。

15. 元素属性
   IE下 input.type属性为只读，但是MF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题
  (1)现有问题：
     在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。

Posted:2006年7月7日 6:55 by admin | 0 Comments

公有成员、私有成员和静态成员

实现类的公有成员
前面定义的任何类成员都属于公有成员的范畴，该类的任何实例都对外公开这些属性和方法。

实现类的私有成员
私有成员即在类的内部实现中可以共享的成员，不对外公开。JavaScript中并没有特殊的机制来定义私有成员，但可以用一些技巧来实现这个功能。
这个技巧主要是通过变量的作用域性质来实现的，在JavaScript中，一个函数内部定义的变量称为局部变量，该变量不能够被此函数外的程序所访问，却可以被函数内部定义的嵌套函数所访问。在实现私有成员的过程中，正是利用了这一性质。
前面提到，在类的构造函数中可以为类添加成员，通过这种方式定义的类成员，实际上共享了在构造函数内部定义的局部变量，这些变量就可以看作类的私有成员，例如：

这样，就实现了私有属性pp和私有方法pm。运行完class1以后，尽管看上去pp和pm这些局部变量应该随即消失，但实际上因为class1是通过new来运行的，它所属的对象还没消失，所以仍然可以通过公开成员来对它们进行操作。
注意：这些局部变量（私有成员），被所有在构造函数中定义的公有方法所共享，而且仅被在构造函数中定义的公有方法所共享。这意味着，在prototype中定义的类成员将不能访问在构造体中定义的局部变量（私有成员）。
要使用私有成员，是以牺牲代码可读性为代价的。而且这种实现更多的是一种JavaScript技巧，因为它并不是语言本身具有的机制。但这种利用变量作用域性质的技巧，却是值得借鉴的。
实现静态成员
静态成员属于一个类的成员，它可以通过“类名.静态成员名”的方式访问。在JavaScript中，可以给一个函数对象直接添加成员来实现静态成员，因为函数也是一个对象，所以对象的相关操作，对函数同样适用。例如：
function class1(){//构造函数
}
//静态属性
class1.staticProperty="sample";
//静态方法
class1.staticMethod=function(){
      alert(class1.staticProperty);
}
//调用静态方法
class1.staticMethod();
通过上面的代码，就为类class1添加了一个静态属性和静态方法，并且在静态方法中引用了该类的静态属性。
如果要给每个函数对象都添加通用的静态方法，还可以通过函数对象所对应的类Function来实现，例如：
//给类Function添加原型方法：show ArgsCount
Function.prototype.showArgsCount=function(){
      alert(this.length);    //显示函数定义的形参的个数
}
function class1(a){
      //定义一个类
}
//调用通过Function的prototype定义的类的静态方法showArgsCount
class1. showArgsCount ();
由此可见，通过Function的prototype原型对象，可以给任何函数都加上通用的静态成员，这在实际开发中可以起到很大的作用，比如在著名的prototype-1.3.1.js框架中，就给所有的函数定义了以下两个方法：
//将函数作为一个对象的方法运行
Function.prototype.bind = function(object) {
var __method = this;
return function() {
     __method.apply(object, arguments);
}
}
//将函数作为事件监听器
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
    __method.call(object, event || window.event);
}
}
这两个方法在prototype-1.3.1框架中起了很大的作用.

Posted: 2006年7月7日 6:53 by admin | 0 Comments

JavaScript类的实现

理解类的实现机制
在JavaScript中可以使用function关键字来定义一个“类”，如何为类添加成员。在函数内通过this指针引用的变量或者方法都会成为类的成员，例如：
function class1(){
      var s="abc";
      this.p1=s;
      this.method1=function(){
             alert("this is a test method");
      }
}
var obj1=new class1();
通过new class1()获得对象obj1，对象obj1便自动获得了属性p1和方法method1。
在JavaScript中，function本身的定义就是类的构造函数，结合前面介绍过的对象的性质以及new操作符的用法，下面介绍使用new创建对象的过程。
（1）当解释器遇到new操作符时便创建一个空对象；
（2）开始运行class1这个函数，并将其中的this指针都指向这个新建的对象；
（3）因为当给对象不存在的属性赋值时，解释器就会为对象创建该属性，例如在class1中，当执行到this.p1=s这条语句时，就会添加一个属性p1，并把变量s的值赋给它，这样函数执行就是初始化这个对象的过程，即实现构造函数的作用；
（4）当函数执行完后，new操作符就返回初始化后的对象。
通过这整个过程，JavaScript中就实现了面向对象的基本机制。由此可见，在JavaScript中，function的定义实际上就是实现一个对象的构造器，是通过函数来完成的。这种方式的缺点是：
? 将所有的初始化语句、成员定义都放到一起，代码逻辑不够清晰，不易实现复杂的功能。
? 每创建一个类的实例，都要执行一次构造函数。构造函数中定义的属性和方法总被重复的创建，例如：
this.method1=function(){
            alert("this is a test method");
      }
这里的method1每创建一个class1的实例，都会被创建一次，造成了内存的浪费。下一节介绍另一种类定义的机制：prototype对象，可以解决构造函数中定义类成员带来的缺点。
使用prototype对象定义类成员
上一节介绍了类的实现机制以及构造函数的实现，现在介绍另一种为类添加成员的机制：prototype对象。当new一个function时，该对象的成员将自动赋给所创建的对象，例如：

prototype是一个JavaScript对象，可以为prototype对象添加、修改、删除方法和属性。从而为一个类添加成员定义。
了解了函数的prototype对象，现在再来看new的执行过程。
（1）创建一个新的对象，并让this指针指向它；
（2）将函数的prototype对象的所有成员都赋给这个新对象；
（3）执行函数体，对这个对象进行初始化操作；
（4）返回（1）中创建的对象。
和上一节介绍的new的执行过程相比，多了用prototype来初始化对象的过程，这也和prototype的字面意思相符，它是所对应类的实例的原型。这个初始化过程发生在函数体（构造器）执行之前，所以可以在函数体内部调用prototype中定义的属性和方法，例如：

和上一段代码相比，这里在class1的内部调用了prototype中定义的方法showProp，从而在对象的构造过程中就弹出了对话框，显示prop属性的值为1。
需要注意，原型对象的定义必须在创建类实例的语句之前，否则它将不会起作用，例如：

这段代码将会产生运行时错误，显示对象没有showProp方法，就是因为该方法的定义是在实例化一个类的语句之后。
由此可见，prototype对象专用于设计类的成员，它是和一个类紧密相关的，除此之外，prototype还有一个重要的属性：constructor，表示对该构造函数的引用，例如：
function class1(){
      alert(1);
}
class1.prototype.constructor(); //调用类的构造函数
这段代码运行后将会出现对话框，在上面显示文字“1”，从而可以看出一个prototype是和一个类的定义紧密相关的。实际上：class1.prototype.constructor===class1。

一种JavaScript类的设计模式
前面已经介绍了如何定义一个类，如何初始化一个类的实例，且类可以在function定义的函数体中添加成员，又可以用prototype定义类的成员，编程的代码显得混乱。如何以一种清晰的方式来定义类呢？下面给出了一种类的实现模式。
在JavaScript 中，由于对象灵活的性质，在构造函数中也可以为类添加成员，在增加灵活性的同时，也增加了代码的复杂度。为了提高代码的可读性和开发效率，可以采用这种定义成员的方式，而使用prototype对象来替代，这样function的定义就是类的构造函数，符合传统意义类的实现：类名和构造函数名是相同的。例如：
function class1(){
      //构造函数
}
//成员定义
class1.prototype.someProperty="sample";
class1.prototype.someMethod=function(){
      //方法实现代码
}
虽然上面的代码对于类的定义已经清晰了很多，但每定义一个属性或方法，都需要使用一次class1.prototype，不仅代码体积变大，而且易读性还不够。为了进一步改进，可以使用无类型对象的构造方法来指定prototype对象，从而实现类的成员定义：
//定义一个类class1
function class1(){
      //构造函数
}
//通过指定prototype对象来实现类的成员定义
class1.prototype={
      someProperty:"sample",
      someMethod:function(){
          //方法代码
      },
      …//其他属性和方法.
}
上面的代码用一种很清晰的方式定义了class1，构造函数直接用类名来实现，而成员使用无类型对象来定义，以列表的方式实现了所有属性和方法，并且可以在定义的同时初始化属性的值。这也更象传统意义面向对象语言中类的实现。只是构造函数和类的成员定义被分为了两个部分，这可看成JavaScript中定义类的一种固定模式，这样在使用时会更加容易理解。
注意：在一个类的成员之间互相引用，必须通过this指针来进行，例如在上面例子中的 someMethod方法中，如果要使用属性someProperty，必须通过this.someProperty的形式，因为在JavaScript 中每个属性和方法都是独立的，它们通过this指针联系在一个对象上。

Posted: 2006年7月7日 6:53 by admin | 0 Comments

深入认识JavaScript中的函数

概述
函数是进行模块化程序设计的基础，编写复杂的Ajax应用程序，必须对函数有更深入的了解。JavaScript中的函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前，先看一下函数的使用语法：
function func1(…){…}
var func2=function(…){…};
var func3=function func4(…){…};
var func5=new Function();
这些都是声明函数的正确语法。它们和其他语言中常见的函数或之前介绍的函数定义方式有着很大的区别。那么在JavaScript中为什么能这么写？它所遵循的语法是什么呢？下面将介绍这些内容。
认识函数对象（Function Object）
可以用function关键字定义一个函数，并为每个函数指定一个函数名，通过函数名来进行调用。在JavaScript解释执行时，函数都是被维护为一个对象，这就是要介绍的函数对象（Function Object）。
函数对象与其他用户所定义的对象有着本质的区别，这一类对象被称之为内部对象，例如日期对象（Date）、数组对象（Array）、字符串对象（String）都属于内部对象。这些内置对象的构造器是由JavaScript本身所定义的：通过执行new Array()这样的语句返回一个对象，JavaScript内部有一套机制来初始化返回的对象，而不是由用户来指定对象的构造方式。
在JavaScript 中，函数对象对应的类型是Function，正如数组对象对应的类型是Array，日期对象对应的类型是Date一样，可以通过new Function()来创建一个函数对象，也可以通过function关键字来创建一个对象。为了便于理解，我们比较函数对象的创建和数组对象的创建。先看数组对象：下面两行代码都是创建一个数组对象myArray：
var myArray=[];
//等价于
var myArray=new Array();
同样，下面的两段代码也都是创建一个函数myFunction：
function myFunction(a,b){
      return a+b;
}
//等价于
var myFunction=new Function("a","b","return a+b");
通过和构造数组对象语句的比较，可以清楚的看到函数对象本质，前面介绍的函数声明是上述代码的第一种方式，而在解释器内部，当遇到这种语法时，就会自动构造一个Function对象，将函数作为一个内部的对象来存储和运行。从这里也可以看到，一个函数对象名称（函数变量）和一个普通变量名称具有同样的规范，都可以通过变量名来引用这个变量，但是函数变量名后面可以跟上括号和参数列表来进行函数调用。
用new Function()的形式来创建一个函数不常见，因为一个函数体通常会有多条语句，如果将它们以一个字符串的形式作为参数传递，代码的可读性差。下面介绍一下其使用语法：
var funcName=new Function(p1,p2,...,pn,body);
参数的类型都是字符串，p1到pn表示所创建函数的参数名称列表，body表示所创建函数的函数体语句，funcName就是所创建函数的名称。可以不指定任何参数创建一个空函数，不指定funcName创建一个无名函数，当然那样的函数没有任何意义。
需要注意的是，p1到pn是参数名称的列表，即p1不仅能代表一个参数，它也可以是一个逗号隔开的参数列表，例如下面的定义是等价的：
new Function("a", "b", "c", "return a+b+c")
new Function("a, b, c", "return a+b+c")
new Function("a,b", "c", "return a+b+c")
JavaScript引入Function类型并提供new Function()这样的语法是因为函数对象添加属性和方法就必须借助于Function这个类型。
函数的本质是一个内部对象，由JavaScript解释器决定其运行方式。通过上述代码创建的函数，在程序中可以使用函数名进行调用。本节开头列出的函数定义问题也得到了解释。注意可直接在函数声明后面加上括号就表示创建完成后立即进行函数调用，例如：
var i=function (a,b){
       return a+b;
}(1,2);
alert(i);
这段代码会显示变量i的值等于3。i是表示返回的值，而不是创建的函数，因为括号“(”比等号“=”有更高的优先级。这样的代码可能并不常用，但当用户想在很长的代码段中进行模块化设计或者想避免命名冲突，这是一个不错的解决办法。
需要注意的是，尽管下面两种创建函数的方法是等价的：
function funcName(){
       //函数体
}
//等价于
var funcName=function(){
       //函数体
}
但前面一种方式创建的是有名函数，而后面是创建了一个无名函数，只是让一个变量指向了这个无名函数。在使用上仅有一点区别，就是：对于有名函数，它可以出现在调用之后再定义；而对于无名函数，它必须是在调用之前就已经定义。例如：

这段语句将产生func未定义的错误，而：

则能够正确执行，下面的语句也能正确执行：

由此可见，尽管JavaScript是一门解释型的语言，但它会在函数调用时，检查整个代码中是否存在相应的函数定义，这个函数名只有是通过function funcName()形式定义的才会有效，而不能是匿名函数。
函数对象和其他内部对象的关系
除了函数对象，还有很多内部对象，比如：Object、Array、Date、RegExp、Math、Error。这些名称实际上表示一个类型，可以通过 new操作符返回一个对象。然而函数对象和其他对象不同，当用typeof得到一个函数对象的类型时，它仍然会返回字符串“function”，而 typeof一个数组对象或其他的对象时，它会返回字符串“object”。下面的代码示例了typeof不同类型的情况：
alert(typeof(Function)));
alert(typeof(new Function()));
alert(typeof(Array));
alert(typeof(Object));
alert(typeof(new Array()));
alert(typeof(new Date()));
alert(typeof(new Object()));
运行这段代码可以发现：前面4条语句都会显示“function”，而后面3条语句则显示“object”，可见new一个function实际上是返回一个函数。这与其他的对象有很大的不同。其他的类型Array、Object等都会通过new操作符返回一个普通对象。尽管函数本身也是一个对象，但它与普通的对象还是有区别的，因为它同时也是对象构造器，也就是说，可以new一个函数来返回一个对象，这在前面已经介绍。所有typeof返回 “function”的对象都是函数对象。也称这样的对象为构造器（constructor），因而，所有的构造器都是对象，但不是所有的对象都是构造器。
既然函数本身也是一个对象，它们的类型是function，联想到C++、Java等面向对象语言的类定义，可以猜测到Function类型的作用所在，那就是可以给函数对象本身定义一些方法和属性，借助于函数的prototype对象，可以很方便地修改和扩充Function类型的定义，例如下面扩展了函数类型Function，为其增加了method1方法，作用是弹出对话框显示"function"：
Function.prototype.method1=function(){
      alert("function");
}
function func1(a,b,c){
      return a+b+c;
}
func1.method1();
func1.method1.method1();
注意最后一个语句：func1.method1.mehotd1()，它调用了method1这个函数对象的method1方法。虽然看上去有点容易混淆，但仔细观察一下语法还是很明确的：这是一个递归的定义。因为method1本身也是一个函数，所以它同样具有函数对象的属性和方法，所有对 Function类型的方法扩充都具有这样的递归性质。
Function是所有函数对象的基础，而Object则是所有对象（包括函数对象）的基础。在JavaScript中，任何一个对象都是Object的实例，因此，可以修改Object这个类型来让所有的对象具有一些通用的属性和方法，修改 Object类型是通过prototype来完成的：
Object.prototype.getType=function(){
       return typeof(this);
}
var array1=new Array();
function func1(a,b){
      return a+b;
}
alert(array1.getType());
alert(func1.getType());
上面的代码为所有的对象添加了getType方法，作用是返回该对象的类型。两条alert语句分别会显示“object”和“function”。
将函数作为参数传递
在前面已经介绍了函数对象本质，每个函数都被表示为一个特殊的对象，可以方便的将其赋值给一个变量，再通过这个变量名进行函数调用。作为一个变量，它可以以参数的形式传递给另一个函数，这在前面介绍JavaScript事件处理机制中已经看到过这样的用法，例如下面的程序将func1作为参数传递给 func2：
function func1(theFunc){
      theFunc();
}
function func2(){
      alert("ok");
}
func1(func2);
在最后一条语句中，func2作为一个对象传递给了func1的形参theFunc，再由func1内部进行theFunc的调用。事实上，将函数作为参数传递，或者是将函数赋值给其他变量是所有事件机制的基础。
例如，如果需要在页面载入时进行一些初始化工作，可以先定义一个init的初始化函数，再通过window.οnlοad=init;语句将其绑定到页面载入完成的事件。这里的init就是一个函数对象，它可以加入window的onload事件列表。
传递给函数的隐含参数：arguments
当进行函数调用时，除了指定的参数外，还创建一个隐含的对象——arguments。arguments是一个类似数组但不是数组的对象，说它类似是因为它具有数组一样的访问性质，可以用arguments[index]这样的语法取值，拥有数组长度属性length。arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表，例如：
function func(a,b){
     alert(a);
     alert(b);
     for(var i=0;i            alert(arguments[i]);
     }
}
func(1,2,3);
代码运行时会依次显示：1，2，1，2，3。因此，在定义函数的时候，即使不指定参数列表，仍然可以通过arguments引用到所获得的参数，这给编程带来了很大的灵活性。arguments对象的另一个属性是callee，它表示对函数对象本身的引用，这有利于实现无名函数的递归或者保证函数的封装性，例如使用递归来计算1到n的自然数之和：
var sum=function(n){
      if(1==n)return 1;
      else return n+sum(n-1);
}
alert(sum(100));
其中函数内部包含了对sum自身的调用，然而对于JavaScript来说，函数名仅仅是一个变量名，在函数内部调用sum即相当于调用一个全局变量，不能很好的体现出是调用自身，所以使用arguments.callee属性会是一个较好的办法：
var sum=function(n){
      if(1==n)return 1;
      else return n+arguments.callee(n-1);
}
alert(sum(100));
callee属性并不是arguments不同于数组对象的惟一特征，下面的代码说明了arguments不是由Array类型创建：
Array.prototype.p1=1;
alert(new Array().p1);
function func(){
       alert(arguments.p1);
}
func();
运行代码可以发现，第一个alert语句显示为1，即表示数组对象拥有属性p1，而func调用则显示为“undefined”，即p1不是arguments的属性，由此可见，arguments并不是一个数组对象。
函数的apply、call方法和length属性
JavaScript为函数对象定义了两个方法：apply和call，它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数的方式有所区别：
Function.prototype.apply(thisArg,argArray);
Function.prototype.call(thisArg[,arg1[,arg2…]]);
从函数原型可以看到，第一个参数都被取名为thisArg，即所有函数内部的this指针都会被赋值为thisArg，这就实现了将函数作为另外一个对象的方法运行的目的。两个方法除了thisArg参数，都是为Function对象传递的参数。下面的代码说明了apply和call方法的工作方式：
//定义一个函数func1，具有属性p和方法A
function func1(){
      this.p="func1-";
      this.A=function(arg){
            alert(this.p+arg);
      }
}
//定义一个函数func2，具有属性p和方法B
function func2(){
      this.p="func2-";
      this.B=function(arg){
             alert(this.p+arg);
      }
}
var obj1=new func1();
var obj2=new func2();
obj1.A("byA");    //显示func1-byA
obj2.B("byB");    //显示func2-byB
obj1.A.apply(obj2,["byA"]); //显示func2-byA，其中[“byA”]是仅有一个元素的数组，下同
obj2.B.apply(obj1,["byB"]); //显示func1-byB
obj1.A.call(obj2,"byA");  //显示func2-byA
obj2.B.call(obj1,"byB");  //显示func1-byB
可以看出，obj1的方法A被绑定到obj2运行后，整个函数A的运行环境就转移到了obj2，即this指针指向了obj2。同样obj2的函数B也可以绑定到obj1对象去运行。代码的最后4行显示了apply和call函数参数形式的区别。
与arguments的length属性不同，函数对象还有一个属性length，它表示函数定义时所指定参数的个数，而非调用时实际传递的参数个数。例如下面的代码将显示2：
function sum(a,b){
      return a+b;
}
alert(sum.length);

深入认识JavaScript中的this指针
this指针是面向对象程序设计中的一项重要概念，它表示当前运行的对象。在实现对象的方法时，可以使用this指针来获得该对象自身的引用。
和其他面向对象的语言不同，JavaScript中的this指针是一个动态的变量，一个方法内的this指针并不是始终指向定义该方法的对象的，在上一节讲函数的apply和call方法时已经有过这样的例子。为了方便理解，再来看下面的例子：

从代码的执行结果看，分别弹出对话框显示1和2。由此可见，getP函数仅定义了一次，在不同的场合运行，显示了不同的运行结果，这是有this指针的变化所决定的。在obj1的getP方法中，this就指向了obj1对象，而在obj2的getP方法中，this就指向了obj2对象，并通过this指针引用到了两个对象都具有的属性p。
由此可见，JavaScript中的this指针是一个动态变化的变量，它表明了当前运行该函数的对象。由 this指针的性质，也可以更好的理解JavaScript中对象的本质：一个对象就是由一个或多个属性（方法）组成的集合。每个集合元素不是仅能属于一个集合，而是可以动态的属于多个集合。这样，一个方法（集合元素）由谁调用，this指针就指向谁。实际上，前面介绍的apply方法和call方法都是通过强制改变this指针的值来实现的，使this指针指向参数所指定的对象，从而达到将一个对象的方法作为另一个对象的方法运行。
每个对象集合的元素（即属性或方法）也是一个独立的部分，全局函数和作为一个对象方法定义的函数之间没有任何区别，因为可以把全局函数和变量看作为window对象的方法和属性。也可以使用new操作符来操作一个对象的方法来返回一个对象，这样一个对象的方法也就可以定义为类的形式，其中的this指针则会指向新创建的对象。在后面可以看到，这时对象名可以起到一个命名空间的作用，这是使用JavaScript进行面向对象程序设计的一个技巧。例如：
var namespace1=new Object();
namespace1.class1=function(){
     //初始化对象的代码
}
var obj1=new namespace1.class1();
这里就可以把namespace1看成一个命名空间。
由于对象属性（方法）的动态变化特性，一个对象的两个属性（方法）之间的互相引用，必须要通过this指针，而其他语言中，this关键字是可以省略的。如上面的例子中：
obj1.getP=function(){
      alert(this.p); //表面上this指针指向的是obj1
}
这里的this关键字是不可省略的，即不能写成alert(p)的形式。这将使得getP函数去引用上下文环境中的p变量，而不是obj1的属性。

Posted: 2006年7月7日 6:53 by admin | 0 Comments

JavaScript实现抽象类

抽象类和虚函数
虚函数是类成员中的概念，是只做了一个声明而未实现的方法，具有虚函数的类就称之为抽象类，这些虚函数在派生类中才被实现。抽象类是不能实例化的，因为其中的虚函数并不是一个完整的函数，不能被调用。所以抽象类一般只作为基类被派生以后再使用。
和类的继承一样，JavaScript并没有任何机制用于支持抽象类。但利用JavaScript语言本身的性质，可以实现自己的抽象类。
在JavaScript实现抽象类
在传统面向对象语言中，抽象类中的虚方法必须先被声明，但可以在其他方法中被调用。而在JavaScript中，虚方法就可以看作该类中没有定义的方法，但已经通过this指针使用了。和传统面向对象不同的是，这里虚方法不需经过声明，而直接使用了。这些方法将在派生类中实现，例如：

这样，当在class1的实例中调用继承得到的initialize方法时，就会自动执行派生类中的oninit()方法。从这里也可以看到解释型语言执行的特点，它们只有在运行到某一个方法调用时，才会检查该方法是否存在，而不会向编译型语言一样在编译阶段就检查方法存在与否。JavaScript中则避免了这个问题。当然，如果希望在基类中添加虚方法的一个定义，也是可以的，只要在派生类中覆盖此方法即可。例如：
//定义一个抽象基类base，无构造函数
function base(){}
base.prototype={
     initialize:function(){
          this.oninit(); //调用了一个虚方法
     },
     oninit:function(){} //虚方法是一个空方法，由派生类实现
}

使用抽象类的示例
仍然以prototype-1.3.1为例，其中定义了一个类的创建模型：
//Class是一个全局对象，有一个方法create，用于返回一个类
var Class = {
   create: function() {
     return function() {
       this.initialize.apply(this, arguments);
     }
   }
}
这里Class是一个全局对象，具有一个方法create，用于返回一个函数（类），从而声明一个类，可以用如下语法：
var class1=Class.create();
这样和函数的定义方式区分开来，使JavaScript语言能够更具备面向对象语言的特点。现在来看这个返回的函数（类）：
function(){
      this.initialize.apply(this, arguments);
}
这个函数也是一个类的构造函数，当new这个类时便会得到执行。它调用了一个initialize方法，从名字来看，是类的构造函数。而从类的角度来看，它是一个虚方法，是未定义的。但这个虚方法的实现并不是在派生类中实现的，而是创建完一个类后，在prototype中定义的，例如prototype可以这样写：
var class1=Class.create();
class1.prototype={
      initialize:function(userName){
                      alert(“hello,”+userName);
      }
}
这样，每次创建类的实例时，initialize方法都会得到执行，从而实现了将类的构造函数和类成员一起定义的功能。其中，为了能够给构造函数传递参数，使用了这样的语句：
function(){
      this.initialize.apply(this, arguments);
}
实际上，这里的arguments是function()中所传进来的参数，也就是new class1(args)中传递进来的args，现在要把args传递给initialize，巧妙的使用了函数的apply方法，注意不能写成：
this.initialize(arguments);
这是将arguments数组作为一个参数传递给initialize方法，而apply方法则可以把arguments数组对象的元素作为一组参数传递过去，这是一种很巧妙的实现。
尽管这个例子在prototype-1.3.1中不是一个抽象类的概念，而是类的一种设计模式。但实际上可以把Class.create()返回的类看作所有类的共同基类，它在构造函数中调用了一个虚方法initialize，所有继承于它的类都必须实现这个方法，完成构造函数的功能。它们得以实现的本质就是对prototype的操作。

使用Modello编写JavaScript类

一，背景

二，问题

三，已有解决方案

四，Modello 框架

5，下载

JS的IE和Firefox兼容性汇编

公有成员、私有成员和静态成员

JavaScript类的实现

深入认识JavaScript中的函数

JavaScript实现抽象类

全国省市县无刷新多级联动菜单

全国省市县无刷新多级联动菜单

关于SELECT的无限联动菜单

JavaScript对正则exec的扩展

JavaScript异常处理

JavaScript使用Window对象

JavaScript仿Windows关机效果

Porsche Carrera GT

Ferrari Testarossa

新浪BLOG提示框

你可能感兴趣的:(ajax,html,js)