JavaScript 描述Revealing Module模式

JavaScript 描述Revealing Module模式

在本文中,我们将学习JavaScript中的Revealing Module模式。在这里,我们首先要了解与Revealing Module模式相关的一些基本细节,包括一些理论知识以及Revealing Module模式的声明语法,然后通过示例来理解它的实现。

Revealing Module模式:

JavaScript本身不具备像其他编程语言(包括C++或Java)那样可以轻易地将变量或函数(或方法)设置为公开或私有的功能,但即使在JavaScript中无法使用这个功能的情况下,我们仍然可以借助JavaScript的函数级作用域来将变量和函数设置为公开或私有。具体来说,可以使用Revealing Module模式来实现这一点。

Revealing Module模式是JavaScript的设计模式,它让用户可以将JavaScript代码组织为模块,从而使代码结构更好,并且可以将某些内容设置为私有或公开。这种设计模式使脚本更加一致,从而帮助个人在最后能够确定哪些方法或变量是私有还是公开的,从而提高可读性。

让我们来看一下下面的图解表示,它将帮助我们更好地理解这个设计模式。

JavaScript 描述Revealing Module模式

如上所示的图示表示(Music System功能的示例),几种方法(包括播放音乐、暂停音乐和更改音乐)组合在一起(分别)形成一个大的功能工作(即Music System工作)。这些显示的方法将嵌入到更大的方法中,该方法是对用户可见的主方法,它将在最初自身就起作用。

语法: 下面的语法给出了一个大致的思路,我们可以通过这种设计模式声明任何工作功能(请注意,此语法基于新的箭头函数语法,我们也可以使用简单函数代替箭头函数):

let function_name = () => {

    let first_function = () => {
        // do something...
    }

    let second_function = () => {
        // do something...
    }

   // More functions we may add on....

  return {
      calling_method_name : original_method_name,
      ...
  } 
}

示例 1: 在这个示例中,我们将通过在主方法内使用一些用户定义的方法简单地创建一个音乐系统,我们还将根据用户的愿望使其工作,使用简单的方法调用。

Javascript

<script> 
  let musicPlayer = () => { 
    let playSong = () => { 
      console.log("Song has been played...!!"); 
    }; 
  
    let pauseSong = () => { 
      console.log("Song Paused...!!"); 
    }; 
  
    return { 
      playMusic: playSong, 
      pauseMusic: pauseSong, 
    }; 
  }; 
  
  let music_system = musicPlayer(); 
  music_system.playMusic(); 
  music_system.pauseMusic(); 
</script>

输出:

Song has been played...!!
Song Paused...!!

示例2: 在这个示例中,我们将考虑前一个示例的代码和轻微的变化,即考虑到一个新的东西—— IIFE(立即调用的函数表达式) ,其他的东西保持不变,包括方法名称或它们的作用。使用这个功能的实际好处是避免使用另一个变量来实例化我们的方法,进而用于依次调用方法。

Javascript

<script> 
  let musicPlayer = (() => { 
    let playSong = () => { 
      console.log("Song has been played...!!"); 
    }; 
  
    let pauseSong = () => { 
      console.log("Song Paused...!!"); 
    }; 
  
    return { 
      playMusic: playSong, 
      pauseMusic: pauseSong, 
    }; 
  })(); 
  
  musicPlayer.playMusic(); 
  musicPlayer.pauseMusic(); 
</script>

输出:

Song has been played...!!
Song Paused...!!

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程