一、设计模式

javascript里面给我们提供了很多种设计模式:

工厂、桥、组合、门面、适配器、装饰者、享元、代理、观察者、命令、责任链

在前面我们实现了工厂模式和桥模式

工厂模式 :

核心:为了生产对象,实现解耦。

桥接模式 :

(桥接模式是一种既能把两个对象连接在一起,又能避免二者间的强耦合的方法。通过“桥”把彼此联系起来,同时又允许他们各自独立变化)

主要作用:主要作用表现为将抽象与其实现隔离开来,以便二者独立化。

组合模式 :

(组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式。使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为。这可以简化粘合性代码,使其更容易维护,而那些复杂行为则被委托给各个对象。)

优点 :

1 你可以用同样的方法处理对象的集合与其中的特定子对象。

2 它可以用来把一批子对象组织成树形结构,并且使整棵树都可以被遍历。

场景 :

1 存在一批组织成某种层次体系的对象

2 希望对这批对象或其中的一部分对象实施一个操作。

特点 :

1 组合模式中只有两种类型对象:组合对象、叶子对象

2 这两种类型都实现同一批接口

3 一般我们会在组合对象中调用其方法并隐式调用"下级对象"的方法(这里我们一般采用递归的形式去做)

门面模式

两个作用:

1、简化类的接口

2、消除类与使用它的客户代码之间的耦合

门面模式常常是开发人员最亲密的朋友。它几乎是所有javascript库的核心原则

门面模式的目的是为了让开发人员用更简单的方法调用一些相对复杂或组合的方法,主要就是简化开发的复杂性,提供一个相对容易的API去调用内部的方法供外界去使用,这样程序员开发会变得轻松些,编写一次组合代码后可以反复的去使用它,有助于节省时间和精力

注意:

不要滥用门面模式,所以使用你心仪的门面之前一定要三思而定,搞不好你就会小题大做

适配器设计

1、适配器模式可用来在现有的接口和不兼容的类之间进行适配。
使用这种模式的对象又叫做包装器(wrapper),因为他们是在用一个新的接口包装另一个对象。
借助适配器可以处理一些类与API不匹配、不能一同使用的情况。

2、注意适配器和门面虽然比较类似,但是门面模式只是为了简化一个接口,
它并不是提供额外的选择,适配器则要把一个接口转换为另一个接口,
它并不会滤除某些能力,也不会简化接口。

介绍简单的适配器模式-------注意主要要掌握思想,代码是次要

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>适配器设计</title>
    <!--
    @theme: javascript高级 适配器设计
    @autor:EthanCoco
    @date:2015-11-23
    @email:lijianlin0204@163.com
    -->
</head>
<body>
    <script type=text/javascript charset=utf-8>

    //适配器设计
    /**
    适配器模式可用来在现有的接口和不兼容的类之间进行适配。
    使用这种模式的对象又叫做包装器(wrapper),因为他们是在用一个新的接口包装另一个对象。
    借助适配器可以处理一些类与API不匹配、不能一同使用的情况。

    注意适配器和门面虽然比较类似,但是门面模式只是为了简化一个接口,
    它并不是提供额外的选择,适配器则要把一个接口转换为另一个接口,
    它并不会滤除某些能力,也不会简化接口。
    */
    /*********************************************************/

    /*********************************************************/
    //通常做法很简单 如下:
    //我在页面上写了三个div

    //场景 :在企业开发中:JavaScript库中有(extjs,jquery,yui,prototype....等等)

    //(我们现用prototype框架,会prototype的程序员该怎写?
    //用yui的程序员要怎么写呢?)

    //(模拟取得页面元素id)

    //////////////////////////////////////////////////////////////////////
    //首先我们看会YUI开发人员的写法
    /*
    //模拟YAHOO中YUI程序员的写法
    //YUI get function (传递了一个参数 :类型不是字符串 就是数组)
    var YAHOO={};//命名空间
    YAHOO.get = function(ele){//YUI中get只接受一个参数,不是字符串就是数组
        if(typeof ele === 'string'){//如果是字符串
            return document.getElementById(ele);
        }
        if(ele instanceof Array){//如果是数组
            var elements = [] ;
            for(var i = 0 ; i < ele.length ; i++){
                elements[elements.length] = YAHOO.get(ele[i]);
            }
            return elements;
        }
        if(ele){//如果都不是,来什么我返回什么
            return ele;
        }
        return null;//如果没有参数,我就返回null,不管了
    }

    window.onload = function(){
        //YUI 开发人员调用就会用他们习惯的写法
        var arr = YAHOO.get(['div1','div2','div3'])
        alert(arr);
        //返回[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement]
    };
    */
    //////////////////////////////////////////////////////////////////////////

    //////////////////////////////////////////////////////////////////////////
    //现在我们看一下prototype开发人员的写法
    /*
    //Prototype $ function  (不需要传递任何的形参:一个id 写一个参数 多个id 多个参数)
    function $(){
        var elements = [] ;
        for(var i = 0 ; i < arguments.length; i++){
            var element = arguments[i];
            if(typeof element == 'string')
                element = document.getElementById(element);
            if(arguments.length ==1)
                return element ;
            elements.push(element);
        }
        return elements;
    }

    window.onload = function(){
        //prototype 开发人员调用就会用他们习惯的写法
        var arr = $('div1','div2','div3');
        //var arr = YAHOO.get('div1','div2','div3')//YUI开发人员使用就会出错不是期望的
        alert(arr);
        //返回[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement]
    };
    */
    //////////////////////////////////////////////////////////////////////////

    //我们发现在调用的时候传入的参数形式是不一样的,
    //如果项目用雅虎框架,YUI开发人员写他们的调用方法没有任何问题,
    //但是prototype开发人员改怎么调用呢,他调用就会出错或者不是我们期望的

    //这样适配器模式就可以用来解决这样的事情

    //简单的适配器模式设计

    //YUI开发人员获取页面元素的方法

    //YUI get function (传递了一个参数 :类型不是字符串 就是数组)
    var YAHOO={};//命名空间
    YAHOO.get = function(ele){//YUI中get只接受一个参数,不是字符串就是数组
        if(typeof ele === 'string'){//如果是字符串
            return document.getElementById(ele);
        }
        if(ele instanceof Array){//如果是数组
            var elements = [] ;
            for(var i = 0 ; i < ele.length ; i++){
                elements[elements.length] = YAHOO.get(ele[i]);
            }
            return elements;
        }
        if(ele){//如果都不是,来什么我返回什么
            return ele;
        }
        return null;//如果没有参数,我就返回null,不管了
    }

    //prototype开发人员获取页面元素的方法

    //Prototype $ function  (不需要传递任何的形参:一个id 写一个参数 多个id 多个参数)
    function $(){
        var elements = [] ;
        for(var i = 0 ; i < arguments.length; i++){
            var element = arguments[i];
            if(typeof element == 'string')
                element = document.getElementById(element);
            if(arguments.length ==1)
                return element ;
            elements.push(element);
        }
        return elements;
    }

    //回到我们的场景
    //我们用雅虎框架YUI    写一个prototype开发人员也能使用的适配器

    YAHOO.get = YUIToPrototypeAdapter;//转换

    function YUIToPrototypeAdapter(){
        //对于YUI开发人员来说 永远传递一个参数
        if(arguments.length == 1){
            var e = arguments[0];
            return  $.apply(window,e instanceof Array?e:[e]);
        } else {
            return $.apply(window ,arguments);
        }
    }

     window.onload = function(){
        // YUI  调用
        var domarr = YAHOO.get(['div1','div2','div3']);
        alert(domarr); 

        //prototype 调用
        var domarr = YAHOO.get('div1','div2','div3');
        alert(domarr);
    };
    //这样就传入的参数来说都能使用

    </script>
    <div id="div1" >我是div1</div><br/>
    <div id="div2" >我是div2</div><br/>
    <div id="div3" >我是div3</div>
</body>
</html>

JavaScript高级---适配器模式的更多相关文章

  1. JavaScript高级---装饰者模式设计

    一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...

  2. 《JavaScript高级程序设计(第3版)》笔记-序

    很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...

  3. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  4. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  5. 读javascript高级程序设计00-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  6. 《JavaScript高级程序设计》读书笔记--前言

    起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...

  7. 阅读摘录《javascript 高级程序设计》01

    前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...

  8. 《JavaScript高级程序设计》学习笔记(5)——面向对象编程

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...

  9. 《JavaScript高级程序设计》学习笔记(4)——引用类型

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...

随机推荐

  1. C# 特性详解(上)

    特性(attribute)是被指定给某一声明的一则附加的声明性信息. 元数据,就是C#中封装的一些类,无法修改.类成员的特性被称为元数据中的注释.     1.什么是特性 1)属性与特性的区别  属性 ...

  2. c++虚函数的学习

    1.虚函数 #include<iostream.h> class Base { public: void print() { cout<<"Base"< ...

  3. java selenium webdriver实战 helloWord

    第一步:建立Maven项目 Selenium 支持 maven 工程,这会让你的工作更加简便. 用 Eclipse 建个 Maven 的工程,建成后,修改 pom.xml <dependenci ...

  4. WPF仿网易云音乐系列(二、歌单创建窗口+登录设置模块)

    老衲牺牲午休时间写博客,都快把自己感动了,-_-!! 之前上一篇随笔,我看了下评论,有部分人说WPF已经凉凉了,这个我觉得,这只是一个达到自己目的的工具而已,只要自己能用这个工具,得心应手的做出自己想 ...

  5. 将Excel导出为SQL语句

    需求说明:公司做项目前进行需求分析,确定表结构后需要建表,如果照着表格去敲,那就太麻烦了,所以想到了自动生成SQL语句. 思路大概就是:解析Excel,拼接SQL语句,输出SQL文件. 第三方jar包 ...

  6. Coursera Deep Learning 2 Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization - week1, Assignment(Gradient Checking)

    声明:所有内容来自coursera,作为个人学习笔记记录在这里. Gradient Checking Welcome to the final assignment for this week! In ...

  7. hackbar功能简介

    SQL:提供三种数据库的sql查询语句,以及一些方便联合查询的语句 XSS:提供xss攻击语句 string.fromcharcode():将根据UNICODE 值来输出xss语句 html char ...

  8. (转)python中调用R语言通过rpy2 进行交互安装配置详解

    python中调用R语言通过rpy2 进行交互安装配置详解(R_USER.R_HOME配置) 2018年11月08日 10:00:11 luqin_ 阅读数:753   python中调用R语言通过r ...

  9. [Laravel] 05 - Controller

    大纲 PHP章节貌似有类似功能,回头看下. 请求 URL 一.URL 处理方法 请求使用的是:symfony/http-foundation组件 $_GET, $_POST, $_COOKIE, $_ ...

  10. 移动端常用的 meta设置

    <meta charset="utf-8"> <meta name="viewport" content="width=device ...