第一步,Ajax操作接口(目的是起一个接口检测作用)

(1)引入接口文件

//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//(1)定义一个接口类
var Interface=function (name,methods) {//name:接口名字
if(arguments.length<){
alert("必须是两个参数")
}
this.name=name;
this.methods=[];//定义一个空数组装载函数名
for(var i=;i<methods.length;i++){
if(typeof methods[i]!="string"){
alert("函数名必须是字符串类型");
}else {
this.methods.push( methods[i]);
}
}
};
Interface.ensureImplement=function (object) {
if(arguments.length<){
throw new Error("参数必须不少于2个")
return false;
}
for(var i=;i<arguments.length;i++){
var inter=arguments[i];
//如果是接口就必须是Interface类型
if(inter.constructor!=Interface){
throw new Error("如果是接口类的话,就必须是Interface类型");
}
//判断接口中的方法是否全部实现
//遍历函数集合
for(var j=;j<inter.methods.length;j++){
var method=inter.methods[j];//接口中所有函数 //object[method]传入的函数
//最终是判断传入的函数是否与接口中所用函数匹配
if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
throw new Error("实现类中没有完全实现接口中的所有方法")
}
}
}
}

第二步,实例化一个可以具体的ajax接口

 var AjaxHandler=new Interface("AjaxHandler",["request","createXhrObject"]);

第三步,针对接口的ajax实现类

(1)定义一个空类

  var   SimpleHandler=function(){};

(2)在该空类上直接扩展原型---实现接口里面的方法

    SimpleHandler.prototype={
/*
* method:get post
* url:请求地址
* callback:回调函数
* postVars:传入参数
* */
request:function (method,url,callback,postVars) {
//1,使用工厂得到xhr对象
var xhr=this.createXhrObject(); xhr.onreadystatechange=function () {
//4代表的意思是交互完成
if(xhr.readyState!=) return;
//200值的是正常交互完成
//404文件未找到
//500 内部程序出错
(xhr.status==)?callback.success(xhr.responseText,xhr.responseXML):
callback.failure(xhr.status);
}
//打开链接
xhr.open(method,url,true);
//设置参数
if(method!="POST"){
postVars=null;
}
xhr.send(postVars);
},
//2,获取xhr的方法--不同浏览器不一样
createXhrObject:function () {
var methods=[
function () {return new XMLHttpRequest();},
function () {return new ActiveXObject("Microsoft.XMLHTTP");}
];
//利用try--catch 制作一个智能循环体
for(var i=;i<methods.length;i++){
try{
methods[i]();
}catch(e) {
continue;//回到循环开始的地方重新开始
}
this.createXhrObject=methods[i]();//非常重要,只有这样才能确保不用每一次请求,全循环数组
return methods[i]();
}
//如果全不对则报错
throw new Error("error");
}
};

第三步,使用检验

(1)实例化对象

  var myHandler=new SimpleHandler();

(2)接口检验实现类是否完全实现接口中的方法

  Interface.ensureImplement(myHandler,AjaxHandler);//检验是否实现接口中所有方法

(3)定义一个回调对象

   var callback={
success:function (responseText) {
alert("ok");
},
failure:function (status) {
alert(status+"failure")
}
};

(4)最终的使用格式

   myHandler.request("POST","http://www.baidu.com",callback);//若url为""会默认为本地的链接,其他正确的链接,会出现跨域问题

JavaScript设计模式--简单工厂模式例子---XHR工厂的更多相关文章

  1. js设计模式-工厂模式(XHR工厂)

    场景:如果代码中需要多次执行Ajax请求,那么明智的做法是把创建这种对象的代码提取到一个类中,并创建一个包装器来包装在实际请求时所要经历的一系列步骤.简单工厂非常适合这种场合. /*AjaxHandl ...

  2. JavaScript设计模式--简单工厂模式

    一,介绍 工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类. 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类.该模式使一个类的实例化延迟到了子类.而子类可以重写接口 ...

  3. C# 设计模式(1)——简单工厂模式、工厂模式、抽象工厂模式

    1.前言 上一篇写了设计模式原则有助于我们开发程序的时候能写出高质量的代码(牵一发而不动全身),这个系列还是做个笔记温习一下各种设计模式,下面就看看简单工厂模式.工厂模式.抽象工厂模式. 2.简单工厂 ...

  4. 设计模式之工厂模式VS抽象工厂

    一.工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. 工厂模式在<Java与模式>中分为三类:1)简单工厂模式(Simple Factor ...

  5. JAVA设计模式 3【创建型】理解工厂模式与抽象工厂模式

    上一节我们已经学习了原型模式,稍微复习一下:通过重写Object 类的clone() 方法实现浅克隆,浅克隆也要实现Cloneable 标记接口.而深克隆则是将对象通过序列化和反序列化 的方式进行创建 ...

  6. Delphi 设计模式:《HeadFirst设计模式》Delphi代码---工厂模式之抽象工厂[转]

     1  2 {<HeadFirst设计模式>工厂模式之抽象工厂 }  3 { 抽象工厂的产品                       }  4 { 编译工具:Delphi7.0     ...

  7. C#设计模式--工厂模式和抽象工厂模式

    话说有三大潮牌公司一直相互PK,有一天举办了一个活动让这三大公司来一个PK,我们来看看哪家公司的上衣做出来好看穿得舒服 现在我们有一个上衣的抽象产品让三大公司来做 //抽象产品 public inte ...

  8. 从ES6重新认识JavaScript设计模式(三): 建造者模式

    1 什么是建造者模式? 建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示. 建造者模式的特点是分步构建一个复杂的对象,可以用不同组合或顺序建造出不 ...

  9. c#工厂模式与抽象工厂模式

    一. 工厂方法(Factory Method)模式 工厂方法(FactoryMethod)模式是类的创建模式,其用意是定义一个创建产品对象的工厂接口,将实际创建工作推迟到子类中. 工厂方法模式是简单工 ...

随机推荐

  1. 团队作业4——第一次项目冲刺(Alpha版本) 4.24

    团队作业4--第一次项目冲刺(Alpha版本) Day four: 会议照片 每日站立会议: 项目进展 今天是项目的Alpha敏捷冲刺的第三天,先大概整理下昨天已完成的任务以及今天计划完成的任务.今天 ...

  2. 201521123003《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 我们利用Sca ...

  3. 201521123030《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  4. 201521123065《java程序设计》第14周学习总结

    1. 本周学习总结 1.大部分情况下使用的数据库是关系型的数据库,使用表存储数据: 2.关系型数据库可以通过唯一的主键查找记录,也可以通过多个信息确定主键: 3.Mysql操作:显示-show dat ...

  5. 201521123055 《Java程序设计》第13周学习总结

    1. 本章学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.2 te ...

  6. Java课程设计——学生信息系统(团队)

    团队名称.团队成员介绍 1.1 团队名称 1.2 团队成员 高可心 网络1514 201521123097 组长 黄滢滢 网络1514 201521123095 组员 2.项目git地址 http:/ ...

  7. 201521123095 《Java程序设计》第9周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常 Q1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何 ...

  8. 在linux环境下搭建java web测试环境(非常详细!!)

    一.项目必备软件及基本思路 项目必备:虚拟机:VMware Workstation (已安装linux的 CentOS6.5版本) 项目:java web项目 (必须在本地部署编译后选择项目的webR ...

  9. vue2.0动态绑定图片src属性值初始化时报错

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...

  10. Java 网络 IO 模型

    在进入主题之前先看个 Java 网络编程的一个简单例子:代码很简单,客户端和服务端进行通信,对于客户端的每次输入,服务端回复 get.注意,服务端可以同时允许多个客户端连接. 服务端端代码: // 创 ...