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，现在我有以下问题/查询

es6中的设计模式是什么，相当于我的模块化设计模式？
我不打算重写现有的js文件，但只在es6中编写新的js。所以我希望新的设计模式不应该干扰现有的架构，并且仍然支持我在es6中编写新的js文件。
此外，当创建页面的单个缩小文件时，我仍然可以轻松地在其他文件中调用一个js文件函数。

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

Answer 1

1）es6中的设计模式与我的模块化设计模式相同是什么？

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

但真正的看法是你渴望使用ES6中提供的一些最新功能，并且基于你上面的代码，你似乎需要某种类型的私有变量和方法封装，这意味着{{3对你来说可能是完美的。

转换它非常简单，但您唯一需要记住的是，与使用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文件函数。

请记住，这完全取决于您捆绑文件的方式。您确实需要做的就是将您创建的任何内容作为全局变量公开。

es5模块化设计模式为es6

1 个答案: