设计模式知识连载（20）---适配器模式:

来源：互联网发布：c语言生成lib库编辑：程序博客网时间：2024/06/05 18:31
<body><h3>设计模式知识连载（20）---适配器模式:</h3><p>    适配器模式：将一个类（对象）的接口（方法或者属性）转化为另外一个接口，    以满足用户需求，使类（对象）之间接口的不兼容问题通过适配器得以解决</p><button id = 'mybutton' >测试点击</button>  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript">    /*****    *   最简单的例子：    *   实现方式：整合全局对象    *****/    // window.A = A = jQuery ;    // A(function() {    //  A('button').on('click', function(e) {    //      console.log('运行了最简单的例子', e.target) ;    //  }) ;    // });    /**    *   案例一，方式一：初始    */    // 定义框架：    // var A = A || {} ;    // // 通过ID获取元素    // A.g = function (id) {    //  return document.getElementById(id) ;    // } ;    // // 为元素绑定事件    // A.on = function(id, type, fn) {    //  // 如果传递参数是字符串则以id处理，否则以元素对象处理    //  var dom = typeof id === 'string' ? this.g(id) : id ;    //  // 标准DOM2级添加事件方式    //  if(dom.addEventListener) {    //      dom.addEventListener(type, fn ,false) ;    //  // IE DOM2级添加事件方式    //  }else if(dom.attachEvent) {    //      dom.attachEvent('on' + type, fn) ;    //  // 简易添加事件方式    //  }else{    //      dom['on' + type] = fn ;    //  }    // } ;    // // 窗口加载完成事件    // A.on(window, 'load', function() {    //  console.log('执行了窗口加载完成事件') ;    //  // 按钮点击事件    //  A.on('mybutton', 'click', function() {    //      console.log('执行了按钮点击事件') ;    //  }) ;    // }) ;    /**    *   案例一，方式二：进阶    */    // 定义框架    var A = A || {} ;    // 通过id获取元素    A.g = function(id) {        // 通过jQuery获取jQuery对象，然后返回第一个成员        return $(id).get(0) ;    } ;    // 为元素绑定事件    A.on = function(id, type, fn) {        // 如果传递参数是字符串则以id处理，否则以元素对象处理        var dom = typeof id === 'string' ? $('#' + id) : $(id) ;        dom.on(type, fn) ;    } ;    // 窗口加载完成事件    A.on(window, 'load', function() {        console.log('执行了窗口加载完成事件') ;        // 按钮点击事件        A.on('mybutton', 'click', function() {            console.log('执行了按钮点击事件') ;        }) ;    }) ;    /**    *   案例二：参数适配器，方式一：初始    */    function doSomeThing(name, title, age, color, size, price){} ;    /**    *   案例二：参数适配器，方式二：进阶    */    function doSomeThing(obj) {        var _obj = {            name : '雨打芭蕉',            title : '设计模式',            age : 18,            color : 'pink',            size : 100,            price : 50        } ;        for(var i in _obj) {            _obj[i] = obj[i] || _obj[i] ;        } ;        // 或者 extend(_obj, obj) ;   注：此时可能会多添加属性        // do things    } ;    /**    *   案例三：数据适配    */    // 数组里的每个成员代表的意义不同，数据结构语义不好    var arr = ['JavaScript', 'book', '前端编程语言', '8月1日'] ;    // 为其找出能适配的对象形式    var obj = {        name : '',         type : '',         title : '',        time : ''    } ;    // 进行适配    function arrToObjAdapter(arr){        return {            name : arr[0],            type : arr[1],            title : arr[2],            time : arr[3]        }    } ;    // 为数据的灵活使用提供了新思路    var adapterData = arrToObjAdapter(arr) ;    console.log(adapterData) ;    /**    *   案例四：服务器端数据适配    */    // 为简化模型，这里使用jQuery的ajax方法    // 理想数据是一个一维数组    function ajaxAdapter(data) {        // 处理数据并返回新数据        reutrn [data['key1'], data['key2'], data['key3']] ;    } ;    $.ajax({        url : '',        success : function(data){            if(data){                // 使用适配后的数据---返回的对象                doSomething(ajaxAdapter(data)) ;            }        }    }) ;</script>   </body>
阅读全文
0 0