一种JavaScript的设计模式

2016-02-19 22:17 4 1 收藏

下面是个超简单的一种JavaScript的设计模式教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - Web开发 】

//简单的类的设计模式
//定义一个类class1
function class1() {
  //构造函数
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

//通过指定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; iarguments.length; i++) {
    args.push(arguments[i]);
  }
  //用无参数函数封装事件处理程序的调用
  return function() {
    obj[strFunc].apply(obj, args);//将参数传递给指定的事件处理程序
  }
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

//定义类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

来源:http://www.tulaoshi.com/n/20160219/1628085.html

延伸阅读
标签: Web开发
在javascript中,方法的链式调用很流行,使用jQuery的朋友对此一定深有体会。在《javascript设计模式》中对这种方法作了比较详细的描述,实现方法的链式调用,只须让在原型中定义的方法都返回调用这些方法的实例对象的引用即可,看看书中的这段代码: (function() {   function _$(els) {     this.elements = []; &nb...
标签: PS PS教程
本教程由中国 第一印相 原创,转载请保留此信息. screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" border=0>  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}...
标签: Web开发
效果:比如一个设备管理系统的某处要填入设备编号,但设备编号通常比较难记,而可能记住的只是哪个部门哪个位置的设备。因此,我们想在文本框旁边加一个按钮,点击之后弹出一个子页面,这里有设备编号、设备的各项详情对照的一个表格,我只要根据位置找到该设备,双击此记录,设备编号便填上去了。 实现过程: 父页面 打开新窗口的javascrip...
标签: Web开发
ECMAScript可以识别两种类型的对象,一种叫做Native Object属于语言范畴;一种叫做Host Object,由运行环境提供例如document对象, Dom Node等 Native objects是一种松散的结构并且可以动态的增加属性(property),所有的属性都有一个名字和一个值,这个值可以是另一个对象的引用 或者是内建的数据类型(String, Numbe...
标签: 瘦身
懒人有效减肥密诀 减肥往往和辛苦挂上钩,似乎像我们这种“懒人”这辈子只能忍受肥胖的及煎熬,与苗条无缘了。其实不然,只要掌握方法要领,懒人减肥不是梦。 你是否注意到过,吃蛋白质食物会让你觉得很饱?这并不是你想象出来的。研究表明,蛋白质激发胰高血糖酶生成一种引起饱食感的物质。试试在你午餐的色拉中加入一些鸡肉或金枪鱼肉--这样...

经验教程

719

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部