本文介绍JavaScript中的基础设计模式，包括通过prototype定义类成员、使用this指针处理内部引用，以及通过高阶函数封装带参事件处理程序。同时提供完整的XMLHttpRequest跨浏览器兼容代码示例，展示如何初始化、发送GET请求并处理响应状态。
JavaScript设计模式概述
JavaScript类与成员定义模式
// 简单类的设计模式示例
// 定义一个名为class1的类
function class1() {
// 构造函数定义
}
// 通过指定prototype对象来实现类的成员定义
class1.prototype = {
someProperty:"simple",
someMethod:function {
// 方法代码实现
},
// 其实属性和方法
}在一个类的成员之间互相引用，必须通过this指针来进行。因为在JavaScript中第个属性和方法都是独立的，它们通过this指针联系在一个对象上。
带参数的事件处理封装
// 简单的带参数的事件设计模式
<script language="JavaScript" type="text/javascript">
<!--
// 将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = [];//定义args用于存储传递给事件处理程序的参数
if(!obj) obj = window;//如果是全局函数则obj=window;
// 得到传递给事件处理程序的参数
for(var i=2; i<arguments.length; i++) {
args.push(arguments[i]);
}
// 用无参数函数封装事件处理程序的调用
return function() {
obj[strFunc].apply(obj, args);//将参数传递给指定的事件处理程序
}
}
// 定义类class1
function class1() {
// 构造函数
}
class.prototype = {
show:function() {
// show函数的实现
this.onshow();//触发onshow事件
},
onShow:function() {}//定义事件接口
}
// 创建class1的实例
var obj = new class1();
// 创建obj的onshow事件处理程序
function objOnshow(userName) {
alert("hello,"+userName);
}
// 定义变量userName
var userName = "terry";
// 绑定obj的onShow事件
obj.onShow=createFunction(null, "objOnshow", userName);
// 调用obj的show方法
obj.show();
//-->
</script>
通过createFunction封装，就可以用一种通用的方案实现参数传递。
XMLHttpRequest跨浏览器封装示例
// 一个简单的开发框架
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
// 开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { // Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
</script>