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 trim函数 去空格函数与正则集锦
Nov 20 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
vue登录以及权限验证相关的实现
Oct 25 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 Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
删除节点的jquery代码
2014/01/13 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
简单实现js放大镜效果
2017/07/24 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
Python MD5加密实例详解
2017/08/02 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python 以16进制打印输出的方法
2018/07/09 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
django-csrf使用和禁用方式
2020/03/13 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
竞选部长演讲稿
2014/04/26 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
节约用水的口号
2014/06/20 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
化妆品促销活动总结
2015/05/07 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android