記法がたくさんあって難しいので調べた。

モジュール化とは

　モジュール化とは、別ファイルに分割することである。

ブラウザでJSをモジュール化する方法一覧

require.jsとは

require.jsとは、モジュール化するためのライブラリである。

requireとは

requireとは、「必要とする」という意味の動詞。

やってみた

以前やってみたが、じつは他にも記法がたくさんある。

require.jsを使ってモジュール化してみる

require.jsの使い方

　公式サイトのAPIリファレンスを参照した。これを読めばマスターできるが、多すぎるので以下に抜粋する。

これさえあればいい

こんなときどう書く？

４．循環依存
５．JSONP受信

プラグイン

コード

構成

index.html
js/
- app.js
- lib/
  - require/
    - require.js
- app/
  - main.js
  - sub.js

　main.jsからsub.jsを呼び出すのが狙い。

ファイル内容

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script data-main="app.js" src="js/lib/require/require.js"></script>
</head>
<body></body>
</html>

app.js

require(['js/app/main.js']);

main.js

define(function(require, exports, module) {
    var sub = require('js/app/sub');
    sub.print("MESSAGE!!");
});

sub.js

define(function() {
    return {
        print: function(msg) {
            alert(msg);
            console.log(msg);
        }
    };
});

index.html

　data-main属性によりエントリポイントを指定している。

index.html

<script data-main="app.js" src="js/lib/require/require.js"></script>

　特殊な記法だが、ほかにもいくつかパターンがある。この方法が最もスマート。

HTMLにおけるconfigとmainの分離パターン

app.js

　requireの設定をするときにmain.jsと分離しておきたいから用意した。たとえば以下のように分離する。

app.js

require.config({
    paths: {
        jquery: "js/lib/jquery/jquery-3.3.1.min.js"
    }
});
require(['js/app/main.js']);

main.js

define(function(require, exports, module) {
    var $ = require('jquery');
    $("body").html("Hello jQuery !!");
});

main.js

　CommonJS方式。

define(function(require, exports, module) {

　引数exports, moduleは使っていないので省略できる。

define(function(require) {

sub.js

define(function() {

　もし他のコードをインポートしたくなったらrequire引数を追加する。

define(function(require) {
    var $ = require('jquery');

　exports, moduleを追加してもいい。

define(function(require, exports, module) {

ES6 class

　ES6のclassが実装されてるなら使うといい。

main.js

define(function(require, exports, module) {
    const Human = require('js/app/Human');
    const h = new Human("Yamada");
    h.Speak();
});

Human.js

define(function() {
    return class Human {
        constructor(name=null){ this._name = name; }
        get Name() { return this._name; }
        set Name(v) { if(v){ this._name = v; } }
        Speak() {
            alert(this._name);
            console.log(this._name);
        }
    };
});

sub.jsをHuman.jsに置き換えた。classをreturnしている。