search
HomeWeb Front-endJS TutorialThe application of the facade appearance pattern in design patterns in JavaScript development (advanced)

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([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;color&#39;, &#39;red&#39;);
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;width&#39;, &#39;150px&#39;);

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([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], {
  color: &#39;red&#39;,
  width: &#39;150px&#39;
});

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 method of implementing the adapter pattern in the design pattern in JavaScript (picture and text tutorial)

Detailed interpretation of the event stream and event handler in JavaScript (picture Text tutorial)

Summary of the application of Adapter pattern in JavaScript design pattern programming (graphic 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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
如何在PHP后端功能开发中合理应用设计模式?如何在PHP后端功能开发中合理应用设计模式?Aug 07, 2023 am 10:34 AM

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

深入聊聊设计模式利器之“职责链模式”(附go实现流程)深入聊聊设计模式利器之“职责链模式”(附go实现流程)Jan 17, 2023 am 11:43 AM

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

Go语言中的ETL的设计模式Go语言中的ETL的设计模式Jun 01, 2023 pm 09:01 PM

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

深入解析Go语言中的单例模式深入解析Go语言中的单例模式Mar 21, 2023 pm 06:36 PM

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

设计模式的六大原则是什么设计模式的六大原则是什么Jan 06, 2023 pm 04:25 PM

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

策略模式:设计模式中的一种策略模式:设计模式中的一种Aug 28, 2023 pm 05:53 PM

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

利用Golang Facade模式提升业务开发效率的方法论利用Golang Facade模式提升业务开发效率的方法论Sep 27, 2023 am 11:33 AM

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

Golang Facade模式在微服务架构中的应用探索Golang Facade模式在微服务架构中的应用探索Sep 28, 2023 pm 08:21 PM

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

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools