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 判断整数方法分享
Dec 16 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
微信小程序实现底部弹出模态框
Nov 18 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
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
电子商务个人自荐信
2013/12/12 职场文书
一年级学生评语大全
2014/04/21 职场文书
中学生演讲稿
2014/04/26 职场文书
国际金融专业自荐信
2014/07/05 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
十二生肖观后感
2015/06/12 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏