• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

JavaScript

JavaScript/モジュール化

Top / JavaScript / モジュール化

選択肢

• https://addyosmani.com/resources/essentialjsdesignpatterns/book/index.html

JavaScript/オブジェクトリテラル記法

• var module = {
  prop: "val",
  func: function(){}
  };

JavaScript/モジュールパターン

• 2003年頃 (YUIあたり)
• クロージャを使ってカプセル化

  var myNamespace = (function () {
    var myPrivateVar, myPrivateMethod;
    // A private counter variable
    myPrivateVar = 0;
    // A private function which logs any arguments
    myPrivateMethod = function( foo ) {
        console.log( foo );
    };
    return {
      // A public variable
      myPublicVar: "foo",
      // A public function utilizing privates
      myPublicFunction: function( bar ) {
        // Increment our private counter
        myPrivateVar++;
        // Call our private method using bar
        myPrivateMethod( bar );
      }
    };
  })();

グローバルインポート

• グローバル変数を引数にすると可読性が上がる

デメリット

• visibilityを途中で変えるのに不便
• あとから追加された関数だとprivateメンバにアクセスできない

Revealing Module Pattern

• モジュールパターンをちょっと改良

  var myNameSpace = function(){
    var current = null;
    function init(){...}
    function change(){...}
    function verify(){...}
    return{
      init:init,
      set:change
    }
  }();

モダンなやつ

• JavaScript/スクリプトローダ

AMD modules

• Asynchronous Module Definition

CommonJS modules

• サーバ向け
  • JavaScript/require
  • JavaScript/exports?

UMD

• AMD And CommonJS-Compatible Modules For Plugins

ECMAScript Harmony (ES6) modules

例

• https://www.w3.org/wiki/JavaScript_best_practices

例

• 全体を匿名関数で囲う

  (function(){
    var current = null;
    function init(){...}
    function change(){...}
    function verify(){...}
  })();

require

• node.jsがサポート
• CommonJSの仕様

記法

呼び出す側

• const math = require("lib/math");

モジュール側

• module.exports

ツール (ブラウザ対応)

• webpack
• Browserify

JavaScript/モジュール

• ES6で言語仕様になった
• 対応ブラウザがまだ少ない

記法

呼び出す側

• JavaScript/import

  import * as math from "lib/math";

モジュール側

• JavaScript/export

ツール

• BabelでCommonJSに変換

関連

• JavaScript/オブジェクト指向