javascript设计模式之Adapter模式【适配器模式】实现方法示例
作者: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中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- JavaScript适配器模式详解
- JavaScript设计模式之适配器模式介绍
- 深入理解JavaScript系列(39):设计模式之适配器模式详解
- 详解JavaScript实现设计模式中的适配器模式的方法
- javascript设计模式 – 适配器模式原理与应用实例分析
- JavaScript设计模式学习之适配器模式
- JavaScript 设计模式之组合模式解析
- JavaScript组合模式学习要点
- 设计模式中的组合模式在JavaScript程序构建中的使用
- javascript设计模式 – 组合模式原理与应用实例分析
- JavaScript设计模式开发中组合模式的使用教程
- javascript适配器模式和组合模式原理与实现方法详解