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 相关文章推荐
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
基于php-fpm 参数的深入理解
2013/06/03 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP实现合并discuz用户
2015/08/05 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
常用DOM整理
2015/06/16 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
node.js的http.createServer过程深入解析
2019/06/06 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python 如何测试文件是否存在
2020/07/31 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
生日寄语大全
2014/04/08 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
元旦趣味活动方案
2014/08/22 职场文书
销售开票员岗位职责
2015/04/15 职场文书
工会经费申请报告
2015/05/15 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers