一种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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 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树的代码,可以嵌套任意层
2006/10/09 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
php和asp语法上的区别总结
2019/05/12 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
文档对象模型DOM通俗讲解
2013/11/01 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python 内置函数complex详解
2016/10/23 Python
python之Character string(实例讲解)
2017/09/25 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Python项目打包成二进制的方法
2020/12/30 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
防灾减灾标语
2014/10/07 职场文书
长城导游词300字
2015/01/30 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书