精华内容
下载资源
问答
我要提问

  • javascript设计模式 – 外观模式原理与用法实例分析

     2020-10-15 10:39:19
    主要介绍了javascript设计模式 – 外观模式,结合实例形式分析了javascript外观模式基本概念、原理、用法及操作注意事项,需要的朋友可以参考下 
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript设计模式之外观模式实例
    
                                    
                                2020-10-25 09:30:37
                            
    
                            
    
                                
    
                                    主要介绍了JavaScript设计模式之外观模式实例,本文用一些代码实例来讲解JavaScript中的外观模式,需要的朋友可以参考下
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript设计模式之外观模式介绍
    
                                    
                                2020-10-24 23:57:58
                            
    
                            
    
                                
    
                                    主要介绍了JavaScript设计模式之外观模式介绍,外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口,需要的朋友可以参考下
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript设计模式之外观模式
    
                                    
                                2020-02-17 22:15:12
                            
    
                            
    
                                
    
                                    外观模式 外观模式，顾名思义，外表看起来相同，但实际可能不一致。在JS中外观模式通常用于处理兼容性问题。比如封装了一个bindEvent事件绑定方法，不同的浏览器会调用bindEvent内部封装的浏览器所支持的方法。 外观...
                                
    
                                
    
                                    
    
                                        
    外观模式
    

    外观模式，顾名思义，外表看起来相同，但实际可能不一致。在JS中外观模式通常用于处理兼容性问题。比如封装了一个bindEvent事件绑定方法，不同的浏览器会调用bindEvent内部封装的浏览器所支持的方法。
    

    外观模式封装示例
    

    
 myEvent = {
        stop: function (e) {
            if (typeof e.preventDefault() === "function") {
                return e.preventDefault();
            }
            if (typeof e.stopPropagation() === "function") {
                return e.stopPropagation();
            }
            //for IE
            if (typeof e.returnValue === "boolean") {
                return (e.returnValue = false);
            }
            if (typeof e.cancelBubble === "boolean") {
                return (e.cancelBubble = true);
            }
        },
        bindEvent(dom, type, fn) {
            if (dom.addEventListener) {
                dom.addEventListener(type, fn, false);
            } else if (dom.attachEvent) {
                dom.attachEvent('on' + type, fn);
            } else {
                dom['on' + type] = fn;
            }
        }
    }
    myEvent.bindEvent(document.querySelector('button'), 
    	'click', () => console.log('button clicked'))

    


    
                                    
    
                                    
    收起 
    
                                
    
                                        
                                            展开全文
                                            
                                        
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    javascript设计模式之外观模式
    
                                    
                                2018-04-06 17:00:27
                            
    
                            
    
                                
    
                                    外观模式    外观模式(Facade)为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口使得这一子系统更加容易使用。 外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦，外观...
                                
    
                                
    
                                    
    
                                        
    外观模式
    


    
  
    外观模式(Facade)为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口使得这一子系统更加容易使用。 外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦，外观模式经常被认为开发者必备，它可以将一些复杂操作封装起来，并创建一个简单的接口用于调用。
    

    




    外观模式的作用
    


    • 在设计初期，应该要有意识地将不同的两个层分离，比如经典的三层结构。
      • 

    • 在开发阶段，子系统往往因为不断的重构演化而变得越来越复杂，增加外观模式可以提供一个简单的接口，减少他们之间的依赖。
      • 

    • 在维护阶段为系统开发一个外观Facade类，为设计粗糙和高度复杂的遗留代码提供比较清晰的接口，让新系统和Facade对象交互。
      • 

    外观模式的注意事项
    


    • 外观模式被开发者连续使用时会产生一定的性能问题，因为在每次调用时都要检测功能的可用性。
      • 

    外观模式实战
    


    // 商店对象
var shop = {};
// 商店内制造食物
shop.createFood = function() {
  console.log('Food ok');
}
// 商店内制造饮料
shop.createDrink = function () {
  console.log('Drink ok');
}
// 商店内提供服务
shop.service = function () {
  this.createFood(); // 提供食物
  this.createDrink(); // 提供饮料
}
// 商店开门营业
shop.open = function () {
  return this.service(); // 提供服务
}

// 调用门面(外观)
shop.open();

    
                                    
    
                                    
    收起 
    
                                
    
                                        
                                            展开全文
                                            
                                        
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript设计模式_外观模式
    
                                    
                                2019-04-01 17:11:21
                            
    
                            
    
                                
    
                                     外观模式中定义的统一接口，可以解决浏览器兼容性问题，如EventUtil对象(这只是外观模式应用的一部分)，很多代码库通过外观模式封装多个功能，简化底层操作方法。   <!DOCTYPE html> <html> 	<...
                                
    
                                
    
                                    
    
                                        
             为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易，即对底层封装来简化用户使用
    
        外观模式中定义的统一接口，可以解决浏览器兼容性问题，如EventUtil对象(这只是外观模式应用的一部分)，很多代码库通过外观模式封装多个功能，简化底层操作方法。
    


    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>外观模式</title>

    <script>
        window.οnlοad = function () {

            var EventUtil = {

                addHandler: function (element, type, handler) {
                    if (element.addEventListener) { //存在DOM2级函数
                        element.addEventListener(type, handler, false);
                    } else if (element.attachEvent) { //IE浏览器
                        element.attachEvent(type, handler, false);
                    } else {
                        element["on" + type] = handler; //DOM0级事件，只能定义同类事件一次，多则覆盖，尽量避免此类事件函数添加。
                    }
                },

                removeHandler: function (element, type, handler) { //取消事件
                    if (element.removeEventListener) {
                        element.removeEventListener(type, handler, false);
                    } else if (element.detachEvent) {
                        element.detachEvent("on" + type, handler);
                    } else {
                        element["on" + type] = null;
                    }
                },

                getEvent: function (event) { //使用这个方法跨浏览器取得event对象
                    return event ? event : window.event;
                },

                getTarget: function (event) { //返回事件的实际目标
                    return event.target || event.srcElement;
                },

                preventDefault: function (event) { //阻止事件的默认行为
                    if (event.preventDefault) {
                        event.preventDefault();
                    } else {
                        event.returnValue = false;
                    }
                },

                stopPropagation: function (event) { //立即停止事件在DOM中的传播
                    //避免触发注册在document.body上面的事件处理程序
                    if (event.stopPropagation) {
                        event.stopPropagation();
                    } else {
                        event.cancelBubble = true;
                    }
                }
            }

            var btn1 = document.getElementById("myBtn1");
            var handler = function () {
                alert("hello");
            }
            EventUtil.addHandler(btn1, "click", handler);
        }
    </script>
</head>

<body>
    <button id="myBtn1">按我</button>
    <p>按F12打开调试界面</p>
</body>

</html>
    


     
    

    
                                    
    
                                    
    收起 
    
                                
    
                                        
                                            展开全文
                                            
                                        
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript 设计模式之外观模式
    
                                    
                                2015-09-08 15:28:26
                            
    
                            
    
                                
    
                                    外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口使得这一子系统更加容易使用。 外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式经常被...
                                
    
                                
    
                                    
    
                                        
    专业的解读：
    

    外观模式（Facade）为子系统(要馒头的人)中的一组接口提供了一个一致的界面(地主家的大门)，此模块定义了一个高层接口(这个门面非常的庞大，外部是非常的漂亮，不需要知道门里面做什么)，这个接口使得这一子系统更加容易使用。
    

    外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式经常被认为开发者必备，它可以将一些复杂操作封装起来，并创建一个简单的接口用于调用。
    

    大白话的解释：
    

    假如一家善心的地主，每一次都在自己的豪华的大门前，发送自己家的馒头。当发馒头的时候，要馒头的人只需要，在他的门口等待即可。但是具体的馒头怎么做的，具体的加工的步骤，要馒头的人是不需要知道的。要馒头的人只需要在同一个门面前等待即可。
    

    有图有真相：
    


    

    外观模式的作用和注意事项：
    

    模式的作用：
    

    1、在设计初期，应该要有意识地将不同的两层分离，不如经典的三层结构。
    

    2、在开发阶段，子系统往往因为不断地重构演化而变得越来越复杂，增加外观可以提供一个简单的接口，减少他们之间的依赖。
    

    3、在维护一个遗留的大型系统时，为系统开发一个外观Facade类，外设计粗糙和高度复杂的遗留代码提供比较清晰的接口，让新系统和Facade对象交互。
    

    注意事项：外观模式被开发者连续使用时会产生一定的性能问题，因为在每次调用时都要检测功能的可用性。
    


    

    
                                    
    
                                    
    收起 
    
                                
    
                                        
                                            展开全文
                                            
                                        
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    javascript 设计模式 工厂模式 单例模式 构造器模式 桥接模式 外观模式 享元模式 代理模式 观察者模式
    
                                    
                                2020-02-21 08:52:26
                            
    
                            
    
                                
    
                                    结构型模式：适配器模式、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式。 行为型模式：模版方法模式、命令模式、迭代器模式、观察者模式、中介者模式、备忘录模式、解释器模式（Interpreter模式）、...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    javascript设计模式-外观模式
    
                                    
                                2015-01-20 19:06:00
                            
    
                            
    
                                
    
                                    也可译为门面模式。它为子系统中的一组接口提供一个一致的界面， Facade模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。引入外观角色之后，使用者只需要直接与外观角色交互，使用者与子系统之间的...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Javascript设计模式-05-外观模式
    
                                    
                                2017-07-12 09:49:58
                            
    
                            
    
                                
    
                                    Javascript设计模式 - 05 - 外观模式简介  外观模式为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口使得这一子系统更加容易使用，他可以将一些复杂的操作封装起来，并创建一个简单的...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        设计模式   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript设计模式 Item8 --外观模式Facade
    
                                    
                                    
                                            千次阅读
                                    
                                2016-03-14 14:02:43
                            
    
                            
    
                                
    
                                    外观模式(门面模式)，是一种相对简单而又无处不在的模式。一、定义外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口值得这一子系统更加容易使用。外观模式不仅简化...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        设计模式   
                                        门面模式   
                                        facade   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript设计模式经典之外观模式
    
                                    
                                2014-12-09 16:33:13
                            
    
                            
    
                                
    
                                    外观模式(门面模式)，是一种相对简单而又无处不在的模式。外观模式提供一个高层接口，这个接口使得客户端或子系统更加方便调用。  用一段再简单不过的代码来表示            var getName = function(){    return ”...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    javascript-外观模式
    
                                    
                                2016-10-21 16:38:00
                            
    
                            
    
                                
    
                                    外观模式笔记 1. 为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易；   2. 简化底层接口的复杂性，解决浏览器兼容性问题。   3.也会用于对底层结构兼容性做统一封装来...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    javascript设计模式--外观模式
    
                                    
                                2017-09-30 14:13:11
                            
    
                            
    
                                
    
                                    引入外观角色之后，使用者只需要直接与外观角色交互，使用者与子系统之间的复杂关系由外观角色来实现，从而降低了系统的耦合度。 作用： 简化复杂接口解耦和，屏蔽使用者对子系统的直接访问  示例： function addEv....
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript设计模式系列八：外观模式
    
                                    
                                2018-04-02 03:57:39
                            
    
                            
    
                                
    
                                    外观模式 外观模式是指提供一个统一的接口去访问多个子系统的多个不同的接口，为子系统中的一组接口提供统一的高层接口。使得子系统更容易使用，不仅简化类中的接口，而且实现调用者和接口的解耦。外观模式在我们的...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript设计模式（五）——外观模式
    
                                    
                                2018-10-13 18:29:08
                            
    
                            
    
                                
    
                                    一、外观模式概念解读   外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口使得这一子系统更加容易使用。   外观模式不仅简化类中的接口，而且对接口与调用者也...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        高级前端   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript设计模式详解：08、外观模式
    
                                    
                                2019-02-22 14:57:27
                            
    
                            
    
                                
    
                                    什么是外观模式  这里是引用
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript设计模式-第一部分：单例模式、组合模式和外观模式
    
                                    
                                2017-01-10 17:34:39
                            
    
                            
    
                                
    
                                    JavaScript设计模式-第一部分：单例模式、组合模式和外观模式 设计模式是一些可靠的编程方式，有助于保证代码更加易于维护、扩展及分离，所有设计模式在创建大型JavaScript应用程序时均不可或缺 单例模式 单例模式是...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    每日JavaScript设计模式：Day5 外观模式
    
                                    
                                2019-04-03 17:52:51
                            
    
                            
    
                                
    
                                    外观模式 为一组复杂的子系统的接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更加容易，在JavaScript中有时也会用于对底层结构兼容性作统一封装。 举个例子，我们想吃一顿美味的炖排骨，一种...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JavaScript 设计模式学习第十五篇－外观模式
    
                                    
                                2019-11-30 23:12:17
                            
    
                            
    
                                
    
                                    外观模式（Facade Pattern）又叫门面模式，定义一个将子系统的一组接口集成在一起的高层接口，以提供一个一致的外观。外观模式让外界减少与子系统内多个模块的直接交互，从而减少耦合，让外界可以更轻松地使用子系统...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        14 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    275
            

            

                精华内容
                    110
            

        

        

            
热门标签

            
        


        


        

            关键字：
javascript外观模式 

        



                

                    
                    java
                    订阅