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 文件，我使用来自该页面所需的所有 js 的 gulp 任务创建了一个缩小的 JS。目前，一切正常，我可以毫无问题地在另一个内部调用一个 js 文件函数。

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

1. 什么是 es6 中的设计模式，它将等同于我的模块化设计模式？

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

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

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

Answer 1

1) es6 中的设计模式是什么，相当于我的模块化设计模式？

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

但实际上，您似乎渴望使用 ES6 中提供的一些最新功能，并且根据您上面的代码，您似乎需要某种类型的私有变量和方法封装，这意味着 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) 此外，当为页面创建单个缩小文件时，我仍然应该能够轻松地调用另一个 js 文件函数。

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