javascript设计模式之Adapter模式【适配器模式】实现方法示例

更新时间：2017年01月13日 10:16:58 作者：lx_3278@126

这篇文章主要介绍了javascript设计模式之Adapter模式,结合实例形式分析了JS适配器模式的原理与具体实现方法,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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格式化日期时间的几种常用方法，个人对最后一种个性化输出时间比较有兴趣，基本上只要项目中能用到都是使用这种，推荐给小伙伴们。
2015-10-10
关于Layui Table隐藏列问题
今天小编就为大家分享一篇关于Layui Table隐藏列问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript常考手写题之柯里化与数组扁平化的实现
这篇文章主要为大家详细介绍了JavaScript常考手写题中柯里化与数组扁平化、数组去重的实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
IE6下CSS图片缓存问题解决方法
ie6下如果用css图片平铺，会出现cpu短暂100%的情况，主要原因在于，ie6会重复下载图片。
2010-12-12
浅析Bootstrap表格的使用
Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。下面给大家介绍Bootstrap表格的使用的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-06-06
微信小程序实现锚点定位功能的方法实例
“锚点”功能在实际应用设计的好,可以提高用户体验,这篇文章主要给大家介绍了关于微信小程序实现锚点定位功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-07-07
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
这篇文章主要介绍了JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06
javascript实现秒表计时器的制作方法
这篇文章主要为大家详细介绍了javascript实现秒表计时器的制作方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
跨域资源共享 CORS 详解
所有浏览器都支持该功能IE浏览器不能低于IE10.整个CORS通信过程都是浏览器自动完成不需要用户参与。对于开发者来说CORS通信与同源的AJAX通信没有差别代码完全一样浏览器一旦发现AJAX请求跨源就会自动添加一些附加的头信息有时还会多出一次附加的请求，但用户不会有感觉。
2016-04-04
基于three.js实现的3D粒子动效实例代码
这篇文章主要给大家介绍了关于如何基于three.js实现的3D粒子动效的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04