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/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
Vue和Flask通信的实现
May 19 Vue.js
微信小程序(三):网络请求
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中截取字符串支持utf-8
2007/01/18 PHP
php 归并排序 数组交集
2011/05/10 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
php-msf源码详解
2017/12/25 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
学习python处理python编码问题
2011/03/13 Python
Python random模块常用方法
2014/11/03 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
超简单使用Python换脸实例
2019/03/27 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
《守株待兔》教学反思
2014/03/01 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS