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 相关文章推荐
Javascript 圆角div的实现代码
Oct 15 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 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/07/12 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
Maps Javascript
2007/01/22 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python+Django搭建自己的blog网站
2018/03/13 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
python中实现栈的三种方法
2020/12/19 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
群众路线问题查摆对照检查材料
2014/10/04 职场文书
投资入股合作协议书
2014/10/28 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书