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的replace方法介绍
Oct 20 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
vue实现分页加载效果
Dec 24 Javascript
详解React 条件渲染
Jul 08 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
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
python包的导入方式总结
2021/03/02 Python
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
文明礼仪标语
2014/06/13 职场文书
股指期货心得体会
2014/09/10 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2015年国庆节寄语
2015/08/17 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers