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 相关文章推荐
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
vue小白入门教程
Apr 02 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
php分页示例分享
2014/04/30 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
python实现反转部分单向链表
2018/09/27 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Internet主要有哪些网络群组成
2015/12/24 面试题
货代行业个人求职简历的自我评价
2013/10/22 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
工程招投标邀请书
2014/01/30 职场文书
硕士生找工作求职信
2014/07/05 职场文书
公司租房协议书范本
2014/10/08 职场文书
医生个人年终总结
2015/02/28 职场文书
2015年党总支工作总结
2015/05/25 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers