フォルダとファイルの構成は以下のとおりです。
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' の２つが配列要素として指定されています。これら配列要素は .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 件のコメント:
コメントを投稿