适配器模式小demo

最新推荐文章于 2024-09-29 10:49:09 发布

weixin_43414945

最新推荐文章于 2024-09-29 10:49:09 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/weixin_43414945/article/details/102761489

版权

本文详细介绍了适配器模式在JavaScript中的应用实例，通过将老数据格式转换为新数据格式，实现了不同数据结构之间的兼容性。文章展示了如何使用适配器模式来统一数据接口，以满足新旧系统间的数据交互需求。

摘要由CSDN通过智能技术生成

适配器模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <script>

       //适配器模式的实现
       // 首先有一个老的数据渲染的方法

       function getCity(){
           var city = [
               {
                   id:0,
                   name:'南山区'
                },{
                    id:1,
                    name:'龙岗区',
                }
           ]
           return city;
       }
       // 渲染数据的方法 
       function render(fn){
           console.log('开始数据的渲染');
           document.write(JSON.stringify(fn()))
       }
       render(getCity);

       //创建一个适配新老数据的方法
       function addressAdapter (oldData){

        //首先拿到新数据和老数据
        var address = {'福田区':2, '宝安区':3};
        oldAdress = oldData();
        //通过遍历将老数据和新数据合并 并采用新数据的结果存储
        for (var i = 0; i<oldAdress.length; i++){
             var obj = oldAdress[i];
             address[obj.name] = obj.id;
        }
        //返回一个函数 方便数据的渲染
        return function (){
            return address;
        }
       }
       //调用渲染的方法
       render(addressAdapter(getCity));
        




</script>
</body>
</html>

不足之处敬请校正