JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】


Posted in Javascript onMay 23, 2020

本文实例讲述了JavaScript设计模式--简单工厂模式。分享给大家供大家参考,具体如下:

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

(1)引入接口文件

//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//(1)定义一个接口类
var Interface=function (name,methods) {//name:接口名字
 if(arguments.length<2){
  alert("必须是两个参数")
 }
 this.name=name;
 this.methods=[];//定义一个空数组装载函数名
 for(var i=0;i<methods.length;i++){
  if(typeof methods[i]!="string"){
   alert("函数名必须是字符串类型");
  }else {
   this.methods.push( methods[i]);
  }
 }
};
Interface.ensureImplement=function (object) {
 if(arguments.length<2){
  throw new Error("参数必须不少于2个")
  return false;
 }
 for(var i=1;i<arguments.length;i++){
  var inter=arguments[i];
  //如果是接口就必须是Interface类型
  if(inter.constructor!=Interface){
   throw new Error("如果是接口类的话,就必须是Interface类型");
  }
  //判断接口中的方法是否全部实现
  //遍历函数集合
  for(var j=0;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!=4) return;
     //200值的是正常交互完成
     //404文件未找到
     //500 内部程序出错
     (xhr.status==200)?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=0;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为""会默认为本地的链接,其他正确的链接,会出现跨域问题

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
原生JS实现留言板功能
Feb 08 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 #Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 #Javascript
微信小程序点击滚动到指定位置的实现
May 22 #Javascript
使用JavaScript通过前端发送电子邮件
May 22 #Javascript
uni-app微信小程序登录授权的实现
May 22 #Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
You might like
php不用正则采集速度探究总结
2008/03/24 PHP
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
JS原型链怎么理解
2016/06/27 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
js实现简易聊天对话框
2017/08/17 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
React 父子组件通信的实现方法
2019/12/05 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
深入浅析python继承问题
2016/05/29 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python去除文件中重复的行实例
2018/06/29 Python
Sanic框架流式传输操作示例
2018/07/18 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
公务员的自我鉴定
2013/10/26 职场文书
医科大学生毕业的自我评价分享
2013/11/12 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
个人求职意向书
2015/05/11 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
经营场所证明范本
2015/06/19 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript