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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
写一个Vue loading 插件
Nov 09 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
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
Python paramiko模块的使用示例
2018/04/11 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python中的__init__作用是什么
2020/06/09 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
《东方明珠》教学反思
2014/04/20 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
信仰心得体会
2014/09/05 职场文书
大学生自荐材料范文
2014/12/30 职场文书
入学证明
2015/06/23 职场文书
运动会广播稿20字
2015/08/19 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android