javascript设计模式之Adapter模式【适配器模式】实现方法示例


Posted in Javascript onJanuary 13, 2017

本文实例讲述了javascript设计模式之Adapter模式。分享给大家供大家参考,具体如下:

所谓Adapter模式就是适配器模式,主要是指使两个原本没有关联的类结合一起使用。

JS实现Adapter模式示例如下:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="json.js"></script>
  <script type="text/javascript" language="javascript">
    var DataSource01={};
    DataSource01.Author="Kevin";
    DataSource01.GetName=function(){
      return "Kevin";
    };
    DataSource01.GetAge=function(){
      return 35;
    };
    var DataSource02={};
    DataSource02.Author="Leo";
    DataSource02.MyName=function(){
      return "Leo";
    };
    DataSource02.MyAge=function(){
      return 25;
    };
    var DataSource03={};
    DataSource03.Author="zhihui";
    DataSource03.Name=function(){
      return "zhihui";
    };
    DataSource03.Age=function(){
      return 25;
    };
    //讲所有的放入一个数组中
    //在生成随机数后可以以下标
    var DataSources=[DataSource01,DataSource02,DataSource03];
    var DataAdapter={};
    DataAdapter.DataSource=false;
    DataAdapter.SetDataSource=function(ds){
      DataAdapter.DataSource=ds;
    };
    DataAdapter.ReturnData=function(){
      var Data={};
      Data.Author=false;
      Data.Name=false;
      Data.Age=false;
      //生成随机数
      //用来随机模拟前台的点击
      var rand=Math.random();
      rand=Math.floor(Math.random()*3);
      console.log(rand);
      console.log(DataSources[rand]);
      DataAdapter.SetDataSource(DataSources[rand]);
      if(rand==0){
        Data.Author=DataAdapter.DataSource.Author;
        Data.Name=DataAdapter.DataSource.GetName();
        Data.Age=DataAdapter.DataSource.GetAge();
      }else if(rand==1){
        Data.Author=DataAdapter.DataSource.Author;
        Data.Name=DataAdapter.DataSource.MyName();
        Data.Age=DataAdapter.DataSource.MyAge();
      }else if(rand==2){
        Data.Author=DataAdapter.DataSource.Author;
        Data.Name=DataAdapter.DataSource.Name();
        Data.Age=DataAdapter.DataSource.Age();
      }
      return Data;
    };
    function ShowData(){
      var Data= DataAdapter.ReturnData();
      alert(Data.toJSONString());
    }
    function ChooseDS01(){
      DataAdapter.SetDataSource( DataSource01);
    }
    function ChooseDS02(){
      DataAdapter.SetDataSource( DataSource02);
    }
  </script>
</head>
<body>
<input type="button" value="DataSource01" onclick="ChooseDS01()">
<input type="button" value="DataSource02" onclick="ChooseDS02()">
<input type="button" value="Show Data" onclick="ShowData()">
</body>
</html>

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
document.documentElement的一些使用技巧
Apr 18 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
微信小程序(三):网络请求
Jan 13 #Javascript
Javascript自定义事件详解
Jan 13 #Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 #Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 #Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 #Javascript
Vue数据驱动模拟实现5
Jan 13 #Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 #Javascript
You might like
深入php多态的实现详解
2013/06/09 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
python如何读写json数据
2018/03/21 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
应届生简历中的自我评价
2014/01/13 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
房屋租赁协议书
2014/10/18 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
同学聚会通知书
2015/04/20 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis