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 相关文章推荐
jQuery 开天辟地入门篇一
Dec 09 Javascript
iframe 异步加载技术及性能分析
Jul 19 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 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 操作符与控制结构
2012/03/07 PHP
php的hash算法介绍
2014/02/13 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
JavaScript中的some()方法使用详解
2015/06/09 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python实现简易数码时钟
2021/02/19 Python
python执行精确的小数计算方法
2019/01/21 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Pygame框架实现飞机大战
2020/08/07 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
python 批量将中文名转换为拼音
2021/02/07 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
最新大学生自我评价
2013/09/24 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
公司薪酬管理制度
2014/01/31 职场文书
人力资源职位说明书
2014/07/29 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书