


The appearance pattern simplifies the interaction between the client and the subsystem by introducing a appearance role, provides a unified entrance for complex subsystem calls, and reduces the coupling between the subsystem and the client. Next, let’s look at the design pattern. The application of facade appearance mode in JavaScript development
Concept
Facade mode (facade mode) is a relatively simple and ubiquitous mode. The appearance pattern provides a high-level interface that makes it easier for clients or subsystems to call it.
Appearance mode is not an adapter mode. The adapter mode is a wrapper used to adapt the interface so that it can be used in incompatible systems. Creating appearance elements is a convenience. It is not used for the purpose of dealing with client systems that require a specific interface, but to provide a simplified interface.
JavaScript code example
Use a simple piece of code to express it
var getName = function(){ return ''svenzeng" } var getSex = function(){ return 'man' }
If you need to call the getName and getSex functions separately. You can use A higher-level interface getUserInfo is called.
var getUserInfo = function(){ var info = a() + b(); return info; }
Maybe you will ask why the code for getName and getSex were not written together at the beginning, such as this
var getNameAndSex = function(){ return 'svenzeng" + "man"; }
The answer is obvious, canteen The stir-fry chef will not stir-fry the two dishes in the same pot just because you ordered a portion of roast duck and a portion of cabbage. He would rather offer you a roast duck rice set. Also in programming, we need to ensure that functions or objects are at a reasonable granularity as much as possible. After all, not everyone likes to eat roast duck and also likes to eat cabbage.
Another advantage of the appearance mode is that it can hide the real implementation details from users, and users only care about the highest-level interface. For example, in the story of the roasted duck rice set, you don't care whether the chef cooks the roasted duck first or the cabbage first, and you don't care where the duck was grown.
Finally write an example of appearance mode that we have all used
var stopEvent = function( e ){ //同时阻止事件默认行为和冒泡 e.stopPropagation(); e.preventDefault(); }
I know that the concept of appearance mode is easy to grasp. You don’t necessarily need a JavaScript code example, but there are always some people who care more about code. I think it would be easier to understand that way. What's more, JavaScript articles without code examples are simply not convincing and should be deleted from the web. Let's start with a simple event listener example. Everyone knows that adding an event listener is not an easy task, unless you only want the code to run on a few browsers. You have to test a lot of ways to make sure your code works correctly for different browsers. In this code example we just add feature detection to this method:
function addEvent(element, type, func) { if (window.addEventListener) { element.addEventListener(type, func, false); } else if (window.attachEvent) { element.attachEvent('on'+type, func); } else { element['on'+type] = func; } }
Keep it simple! I really wish I could stop writing unnecessary code and make it as simple as possible, but if that were the case it wouldn't be interesting and you wouldn't want to read it, right? So I don't think so, I think I'm going to show you something a little more complicated. I just wanted to say that your code would have looked a bit like this:
var foo = document.getElementById('foo'); foo.style.color = 'red'; foo.style.width = '150px'; var bar = document.getElementById('bar'); bar.style.color = 'red'; bar.style.width = '150px'; var baz = document.getElementById('baz'); baz.style.color = 'red'; baz.style.width = '150px';
So lame! You do the exact same thing for every element! I think we can make it simpler:
function setStyle(elements, property, value) { for (var i=0, length = elements.length; i < length; i++) { document.getElementById(elements[i]).style[property] = value; } } // 现在你可以这么写: setStyle(['foo', 'bar', 'baz'], 'color', 'red'); setStyle(['foo', 'bar', 'baz'], 'width', '150px');
Do you think our NB is broken? Just forget it! We are JavaScript programmers! Can you use your brain and be serious? Maybe we could set all styles with just one call. Take a look at this:
function setStyles(elements, styles) { for (var i=0, length = elements.length; i < length; i++) { var element = document.getElementById(elements[i]); for (var property in styles) { element.style[property] = styles[property]; } } } //现在你只要这样写: setStyles(['foo', 'bar', 'baz'], { color: 'red', width: '150px' });
If we have many elements that we want to set the same style, then this code really saves us a lot of time.
Benefits of Appearance Mode: The purpose of using Appearance Mode is to make life easier for programmers. Write the combination code once and then use it repeatedly, which helps save money. time and effort. Provide a simplified interface for some complex problems.
The appearance method is convenient for developers. It provides higher-level functions, reduces dependence on external code, and adds some extra flexibility to the development of application systems. By using the facade pattern, you can avoid tight coupling with underlying subsystems. This allows modifications to the system to be made without affecting client code.
Disadvantages of appearance mode: Sometimes appearance elements also bring some unnecessary additional burdens. You should carefully weigh the practicality of some routines before implementing them. Sometimes the strength of a component function is more attractive than a complex appearance function. This is because facade functions may often perform tasks you don't need.
For a simple personal website or a small number of marketing pages, it may not be wise to import this Javascript library just for a few enhancements such as tool tips and pop-ups. At this point consider using just a few simple appearance elements rather than a library full of them.
Facade functions provide a simple interface for performing a variety of complex tasks, and they make the code easier to maintain and understand. They also loosen the coupling between subsystems and client code. Group common functions that often appear together. This mode is commonly used in environments such as DOM scripting that need to deal with inconsistent browser interfaces.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
related articles:
Detailed interpretation of the event stream and event handler in JavaScript (picture Text tutorial)
The above is the detailed content of The application of the facade appearance pattern in design patterns in JavaScript development (advanced). For more information, please follow other related articles on the PHP Chinese website!

如何在PHP后端功能开发中合理应用设计模式?设计模式是一种经过实践证明的解决特定问题的方案模板,可以用于构建可复用的代码,在开发过程中提高可维护性和可扩展性。在PHP后端功能开发中,合理应用设计模式可以帮助我们更好地组织和管理代码,提高代码质量和开发效率。本文将介绍常用的设计模式,并给出相应的PHP代码示例。单例模式(Singleton)单例模式适用于需要保

本篇文章给大家带来了关于golang设计模式的相关知识,其中主要介绍了职责链模式是什么及其作用价值,还有职责链Go代码的具体实现方法,下面一起来看一下,希望对需要的朋友有所帮助。

随着数据的增长和复杂性的不断提升,ETL(Extract、Transform、Load)已成为数据处理中的重要环节。而Go语言作为一门高效、轻量的编程语言,越来越受到人们的热捧。本文将介绍Go语言中常用的ETL设计模式,以帮助读者更好地进行数据处理。一、Extractor设计模式Extractor是指从源数据中提取数据的组件,常见的有文件读取、数据库读取、A

单例模式是一种常见的设计模式,它在系统中仅允许创建一个实例来控制对某些资源的访问。在 Go 语言中,实现单例模式有多种方式,本篇文章将带你深入掌握 Go 语言中的单例模式实现。

设计模式的六大原则:1、单一职责原则,其核心就是控制类的粒度大小、将对象解耦、提高其内聚性;2、开闭原则,可以通过“抽象约束、封装变化”来实现;3、里氏替换原则,主要阐述了有关继承的一些原则;4、依赖倒置原则,降低了客户与实现模块之间的耦合;5、接口隔离原则,是为了约束接口、降低类对接口的依赖性;6、迪米特法则,要求限制软件实体之间通信的宽度和深度。

到目前为止,我们已经介绍了本系列中的三种设计模式。我们定义了四类不同的设计模式。在本文中,我将解释策略设计模式,它属于行为设计模式。你可能有一个问题:什么时候应该使用这种设计模式?我想说,当我们有多种方法(算法)来执行相同的操作,并且我们希望应用程序根据您拥有的参数选择特定的方法时。这种模式也称为策略模式。本文的一个非常简单的示例是排序功能。例如,我们有多种对数组进行排序的算法,但是根据数组元素的数量,我们应该选择使用哪种算法来获得最佳性能。此模式也称为策略模式。问题我将举一个集成了多个支付网关

利用GolangFacade模式提升业务开发效率的方法论引言:在当今快节奏的软件开发环境中,开发人员需要快速且高效地开发出高质量的代码。为了提升业务开发效率,我们可以利用设计模式来简化开发流程和减少代码的复杂性。本文将介绍如何利用Golang中的Facade模式来提升业务开发效率,并给出具体的代码示例。一、什么是Facade模式?Facade模式是一种结构

GolangFacade模式在微服务架构中的应用探索微服务架构是一种将应用程序拆分成一组小型、自治、可独立运行的服务的方法,每个服务都可以独立开发、部署和扩展。在这种架构中,设备服务之间通过API进行通信,并可以使用不同的编程语言和技术栈实现。在微服务架构中,存在着各种服务之间的依赖关系,例如一个服务可能需要调用其他多个服务来完成一个请求。这时,使用Fac


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Zend Studio 13.0.1
Powerful PHP integrated development environment

Atom editor mac version download
The most popular open source editor

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Dreamweaver Mac version
Visual web development tools
