一种JavaScript的设计模式


Posted in Javascript onNovember 22, 2006

一种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封装,就可以用一种通用的方案实现参数传递。 
//一个简单的开发框架
<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>

Javascript 相关文章推荐
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
angular.bind使用心得
Oct 26 Javascript
深入理解js generator数据类型
Aug 16 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
vue实现分页组件
Jun 16 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
表单内同名元素的控制
Nov 22 #Javascript
document.all与WEB标准
May 13 #Javascript
云网广告中的代码,提示出错,大家找找
Nov 21 #Javascript
在视频前插入广告
Nov 20 #Javascript
使两个iframe的高度与内容自适应,且相等
Nov 20 #Javascript
arguments对象
Nov 20 #Javascript
重定向实现代码
Nov 20 #Javascript
You might like
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
windows下python安装小白入门教程
2018/09/18 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
商业活动邀请函
2014/02/04 职场文书
认识深刻的检讨书
2014/02/16 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
如何使用python包中的sched事件调度器
2022/04/30 Python