一种JavaScript的设计模式

 更新时间:2006年11月22日 00:00:00   作者:  
一种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>

相关文章

  • Nuxt.js 数据双向绑定的实现

    Nuxt.js 数据双向绑定的实现

    这篇文章主要介绍了Nuxt.js 数据双向绑定的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • JS与jQuery判断文本框还剩多少字符可以输入的方法

    JS与jQuery判断文本框还剩多少字符可以输入的方法

    这篇文章主要介绍了JS与jQuery判断文本框还剩多少字符可以输入的方法,简单分析了js字符个数统计的方法,并给出了jQuery字符统计插件textlimit的相关使用方法示例,需要的朋友可以参考下
    2018-09-09
  • 原生JS实现拖拽排序的示例代码

    原生JS实现拖拽排序的示例代码

    说到拖拽,应用场景不可谓不多。无论是打开电脑还是手机,第一眼望去的界面都是可拖拽的,靠拖拽实现APP或者应用的重新布局,或者拖拽文件进行操作文件。本文就将利用JS实现拖拽排序,需要的可以参考一下
    2022-12-12
  • 关于JavaScript的单双引号嵌套问题

    关于JavaScript的单双引号嵌套问题

    单引号和双引号之间可以相互嵌套。接下来通过本文给大家介绍JavaScript的单双引号嵌套问题 ,感兴趣的朋友一起看看吧
    2017-08-08
  • JavaScript正则表达式函数总结(常用)

    JavaScript正则表达式函数总结(常用)

    正则表达式作为一种匹配处理字符串的利器在很多语言中都得到了广泛实现和应用.这篇文章主要介绍了JavaScript正则表达式函数总结,需要的朋友可以参考下
    2018-02-02
  • JS实现非首屏图片延迟加载的示例

    JS实现非首屏图片延迟加载的示例

    下面小编就为大家分享一篇用JS实现非首屏图片延迟加载的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)

    Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)

    这篇文章主要介绍了Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理),需要的朋友可以参考下
    2015-01-01
  • 关于Javascript作用域链的八点总结

    关于Javascript作用域链的八点总结

    其实吧,关于作用域链相关的文章我也看了不少,但是我一直也没能做一个详细的总结,今天把我看到的一些东西,结合自己的想法,总结成以下8个点
    2013-12-12
  • 正则表达式,替换所有HTML标签的简单实例

    正则表达式,替换所有HTML标签的简单实例

    下面小编就为大家带来一篇正则表达式,替换所有HTML标签的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js实现GIF动图分解成多帧图片上传

    js实现GIF动图分解成多帧图片上传

    这篇文章主要为大家详细介绍了js实现GIF动图分解成多帧图片上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论