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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
Node.js API详解之 querystring用法实例分析
Apr 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 if 想到的些问题
2008/03/22 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
React diff算法的实现示例
2018/04/20 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
HTML的form表单和django的form表单
2019/07/25 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
九月份红领巾广播稿
2014/01/22 职场文书
培训专员岗位职责
2014/02/26 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
浅谈python中的多态
2021/06/15 Python