グローバルインポートモジュールパターンをES6モジュールに変換

Question

これまでの数年間、私はjavascriptのグローバルインポートメソッドを使用して作業してきました。通常、一連のユーティリティ関数をラップアップし、各Web機能の個別の機能を含む別のサイトモジュールに渡します。私たちはに追加のモジュール、ユーティリティ、ユーザー・インターフェース・オブジェクト（主にエイリアスGSAP）とjQueryのような他のものに沿って通過するこのサンプルで

(function(m, u, ui, w, a, $){ 

    // Example Module 
    m.example = function(){ 
     // Do stuff, the m.example module gets auto initialized. 
}; 

})(Site.modules = Site.modules || {}, Site.utils, Site.ui, Site.w, Site.anim, jQuery); 

。

ご覧のとおり、特に大規模なサイトでは大量の機能が混在しています。

私はES6とNPMに移動したいと思います。モジュールの作成方法、モジュールをインポートする方法、NPMでモジュールを取り込む方法に関する記事や例を見てきましたが、実際にそれをすべて一緒に引っ張っている例や記事。

単純な例です。私はNPMで滑らかなカルーセルをインポートします。私はバナーカルーセルとつぶやきのカルーセルとの単一ページのウェブサイトを持っています。これらの要素が存在することを確認し、2つの別々のカルーセルを初期化するにはどうすればよいですか？

匿名のクロージャを使用する私は、DOM要素をルックアップし、さまざまなオプションを使用してカルーセルを初期化する独立した自動開始関数を用意しています。

編集

私の現在のワークフローの例については、私は複数の再利用静的変数と、このようなアニメーション変数、ウィンドウへの参照、自動更新変数になど、サイト全体で再利用いくつかのアイテムを持っているサイトオブジェクトを定義しますアクセスビューポートプロパティなど

次に、ビルドされた各Webサイトに固有の別個のファイルに、サイト上に実装された機能のチャンクごとに別々の「モジュール」を作成するメインファイルがあります。ページに含まれているjQueryとプレーンなjavascriptプラグインをutilsとmain jsファイルとともに使用します。

utils.jsは

jQuery(document).ready(function($) { 
    Site.init(); 
}); 


var Site = (function($) { 

    // DOM caching 
    var win = window; 

    // Globals 
    var w = { 
     width: win.innerWidth, 
     height: win.innerHeight, 
     scroll: win.pageYOffset 
    }; 

    var ui = { 
     fast: 0.2, 
     slow: 0.4, 
     step: 0.03, 
     easeout: Power4.easeOut, 
     easein: Power4.easeIn 
    }; 

    function updateGlobals(){ 
     w.width = win.innerWidth; 
     w.height = win.innerHeight; 
     w.scroll = win.pageYOffset; 
    } 

    win.addEventListener('resize', updateGlobals, true); 
    win.addEventListener('scroll', updateGlobals, true); 
    win.addEventListener('load', updateGlobals, true); 

    return { 
     init: function(){ 

      for (var prop in this.modules) { 
       if (this.modules.hasOwnProperty(prop)) { 
        this.modules[prop](); 
       } 
      } 

      for (var props in this.autoInits) { 
       if (this.autoInits.hasOwnProperty(props)) { 
        var $selector = $(props); 

        if ($selector.length) { 
         this.autoInits[props]($selector); 
        } 
       } 
      } 
     }, 
     ui: ui, 
     w: w 
    }; 

})(jQuery); 

main.js

(function(m, $){ 

    m.homepageCarousel = function(){ 
     var element = $('.js-homepage-carouel'); 

     $(element).slick({ 
      dots: true, 
      speed: 500, 
      arrows: false 
     }); 
    }; 

    m.productsCarousel = function(){ 
     var element = $('.js-products-carouel'); 

     $(element).slick({ 
      dots: false, 
      speed: 500, 
      arrows: true 
     }); 
    }; 

    m.showcookieNotice = function(){ 
     ... example check cookies for marker and show cookie notice if not present. 
    } 

    ... rest of the websites js, maps, menus, custom reused items etc 

})(Site.modules = Site.modules || {}, jQuery); 

Answer 1

は "すべてがグローバルである" のように考えてはいけません。グローバルスコープは、最大のjs設計ミスの1つです。たとえば、

var name = 1; 
console.log(name + 1); 

グローバルスコープは全く役に立たないとは思われませんが、その用途は非常に限定されています。あなたはそれをウェブページ/サーバの状態と考えるべきです。これは、最良の場合にはコードを含まないことを意味します。グローバルスコープにさらされる機能性（コード）が増えるほど、2つのスクリプトの間に悪い推論が生じる可能性が高くなり、それらのバグは見つけにくいでしょう。だからあなたのコードはそれ自身をカプセル化するべきです。できるだけグローバルスコープに公開し、変更する必要があります。つまり、ページの2つの異なるファイル間で特定の機能を共有したい場合（たとえば、menu.jsとslider.jsの両方にボタンクラスが必要です）、この機能は両方のスクリプトによってインポートされます。だから、すべての別々のファイルには、最後に一番上の輸入と輸出を持っている必要があり、それ自体をカプセル化する必要があります

import {functionality1, functionality2} from "module"; 

{ //encapsulation 
    let somevariable; 
    //... your code 
} 

は、同じページ上の別のファイルに同じモジュールを複数回インポートする恐れてはいけません、 jsエンジンが最適化します。