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 相关文章推荐
JS数学函数Exp使用说明
Aug 09 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
Javascript var变量删除原理及实现
Aug 26 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
咖啡的传说和历史
2021/03/03 新手入门
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
详解JS模块导入导出
2017/12/20 Javascript
vue cli 全面解析
2018/02/28 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
简单介绍Python中的JSON模块
2015/04/08 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
解决python3输入的坑——input()
2020/12/05 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
给老师的道歉信
2014/01/11 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
PHP基本语法
2021/03/31 PHP
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android