2017年9月13日水曜日

Require.js によるモジュール管理

Require.js を利用して JavaScript ファイルをまとめて管理してみます。

フォルダとファイルの構成は以下のとおりです。



index.html

ここでは jQuery と require.js を参照します。
jQuery を参照した後に、require.js への参照を加えます。require.js の script タグ内に、data-main 属性を加えて、require.js が管理する JavaScript のエントリポイントを指定します。ここでは js フォルダ配下の main.js をエントリポイントにしますので "js/main" と記載します。

index.html の実装内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="js/jquery.js" type="text/javascript"></script>
    <script data-main="js/main" src="js/require.min.js" type="text/javascript"></script>
</head>
<body>
    <input id="btn1" type="button" value="get jQuery closed issues"/>
    <ul id="issueList"></ul>
</body>
</html>


js/main.js
require.js で読み込まれるエントリポイントです。この中に処理の実装と読み込む JavaScript ファイルを追加していきます。JavaScript の追加方法は、require メソッドの第一引数に配列で指定していきます。ここでは、'jquery' と 'github/api' の2つが配列要素として指定されています。これら配列要素は .js の拡張子を除いた名前で指定しています。
require メソッドの第二引数には、第一引数で読み込んだ JavaScript ファイルのスクリプトにアクセスすることができます。

js/main.js の実装内容
//require.js の require メソッドを使い、jquery.js ファイル、github フォルダの api.js ファイルをロード
require(['jquery', 'github/api'], function ($, api){
    $(document).ready(function(){

        $("#btn1").click(function(){

            //github/api.js の issues メソッドを呼び出し、github の jQuery の closed issues をダウンロード
            api.issues()
            .done(function(issues){
                
                //ダウンロード結果を出力
                var ul = $("#issueList").empty();
                var array = [];

                for(var i = 0; i < issues.length; i++){
                    array.push($("<li>" + issues[i].id + ": " + issues[i].title + ", " + new Date(issues[i].updated_at) + "</li>"))
                }
                ul.append(array);
            });
        })
    });
});


github/api.js
github にある jQuery の 既に閉じられた issue のコレクションを取得しています。データ取得部分のため、main.js とは別途ファイルを分けて実装しています。

github/api.js の実装内容
define(['jquery'], function($){
    return {
        issues: function(){
            //github の jQuery の closed issues を取得
            return $.getJSON("https://api.github.com/repos/jquery/jquery/issues?state=closed");
        }
    }
});

実行結果:
index.html には main.js のみを参照していますが、require.js が他の JavaScript ファイルも読み込んでくれているので、データ取得やデータ出力も行われました。


0 件のコメント:

コメントを投稿