最終更新:2021-02-26 (金) 13:19:54 (1127d)
JavaScript/モジュール化
Top / JavaScript / モジュール化
選択肢
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 } }();
モダンなやつ
AMD modules
- Asynchronous Module Definition
CommonJS modules
- サーバ向け
- JavaScript/require
- JavaScript/exports?
UMD
ECMAScript Harmony (ES6) modules
例
例
- 全体を匿名関数で囲う
(function(){ var current = null; function init(){...} function change(){...} function verify(){...} })();
require
記法
呼び出す側
const math = require("lib/math");
モジュール側
ツール (ブラウザ対応)
JavaScript/モジュール
- ES6で言語仕様になった
- 対応ブラウザがまだ少ない
記法
呼び出す側
- JavaScript/import
import * as math from "lib/math";