javascript - es5 模块化设计模式到 es6

Question

我有一个每天有 10 万用户的网站。目前我们正在使用模块化设计模式在 Jquery/Vanilla JS 中编写代码。一个简单的隐藏/显示加载器的js如下

"use strict";
var loaderHandler = (function(){
    var loader = document.getElementById('main_loader');
    return{
        showProcessLoader : function(){
            loader.style.display = 'block';
            loader.style.opacity = '0.5';
        },
        hideLoader : function(){
            loader.style.display = 'none';
        }
    }
})();
docReady(function() {
    loaderHandler.hideLoader();

});

每当我想在某个地方显示加载程序时，我只需调用 loaderHandler.showProcessLoader();和 loaderHandler.hideLoader();隐藏它。同样，我还有其他使用相同设计模式编写的 JS 文件，并且我使用 gulp 任务从该页面所需的所有 js 中创建了一个缩小的 JS。目前，一切正常，我可以毫无问题地调用另一个 js 文件函数。

我决定将我的应用程序迁移到最新的 es6，现在我遇到以下问题/查询

1. es6 中与我的模块化设计模式等效的设计模式是什么？

2. 我不打算重写现有的js文件，而是只在es6中编写新的js。所以我希望新的设计模式不应该干扰现有的架构，并且仍然支持我在 es6 中编写新的 js 文件。

3. 此外，当为页面创建单个缩小文件时，我仍然应该能够轻松地调用另一个 js 文件函数。

编辑 - 我已经在使用 babel 将我的 es6 代码转换为 es5 等效代码

Answer 1

1) What is the design pattern in es6 which will be equivalent to my modular design pattern?

设计模式不一定内置于语言中，它们只是语言可能提供也可能不提供足够的抽象能力来实现的技术。根据问题 2，您似乎知道，您之前可以做的任何设计模式也可以在 ES6 中做，甚至反之亦然。事实上，像 babel 这样的转译器采用 es6 编写的代码，然后像魔术一样将其转换为以前的版本。

但实际上，您似乎渴望使用 ES6 中提供的一些最新功能，并且根据上面的代码，您似乎需要某种类型的私有(private)变量和方法封装，这意味着 classes可能非常适合您。

转换它非常简单，但您唯一需要记住的是，与使用 IIFE 相比，您需要导出类的新实例。通过类，如果您想要甚至进行一些继承，您还可以获得创建类的多个实例的能力，但对于您当前的示例，这些功能可能没有一个好的用例。

在下面的示例中，元素的 id 被传递到构造函数中，这意味着如果您选择或仅导出单例实例，则可以为任意数量的元素重复使用此类。

class AbstractLoaderHandler{
  constructor(el_id){
    this.loader = document.getElementById(el_id)
  }
  
  showProcessLoader(){
    this.loader.style.display = 'block';
    this.loader.style.opacity = '0.5';
  }
  
  hideLoader(){
    this.loader.style.display = 'none';
  }
}

let loaderHandler = new AbstractLoaderHandler('main_loader');

loaderHandler.hideLoader();

<div id="main_loader">Hello World</div>
<button onClick="loaderHandler.showProcessLoader()">Show</button> 
<button onclick="loaderHandler.hideLoader()">Hide</button>

3) Also, I still should be easily able to call one js file function in other when a single minified file for a page is created.

请记住，这完全与您捆绑文件的方式有关。为了确保这一点，您真正需要做的就是将您创建的任何内容公开为全局变量。