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 相关文章推荐
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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截取中文字符串的问题
2006/07/12 PHP
第九节--绑定
2006/11/16 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
js tab效果的实现代码
2009/12/26 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
树结构之JavaScript
2017/01/24 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
远程调用的原理
2014/07/05 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
长城导游词300字
2015/01/30 职场文书
2015年财务部工作总结
2015/04/10 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
Python可视化神器pyecharts绘制水球图
2022/07/07 Python