外部jsの中で更に外部jsを読み込む方法

簡単なテストとしてfunction test()をapp.jsの中で呼び出すのには、下記のような構成＆scriptでは呼び出せないのですが
何処が間違っているのかがわかりません。ご教示頂けませんでしょうか？

html
1// index.html
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="utf-8">
6  <title>test</title>
7<style>
8#testDiv{
9  width: 100px;
10  height: 100px;
11  background: #CCCCCC;
12}
13</style>
14</head>
15<body>
16<div id="testDiv">test</div>
17<script src="jquery-2.1.4.min.js"></script>
18<script type="text/javascript" src="js/app.js"></script>
19</body>
20</html>
21

javascript
1// js/app.js
2$(function(){
3	var root;
4	var scripts = document.getElementsByTagName("script");
5	var i = scripts.length;
6	while (i--) {
7		var match = scripts[i].src.match(/(^|.*\/)app\.js$/);
8		if (match) {
9			root = match[1];
10			break;
11		}
12	}
13	var xhr = null;
14	if (window.XMLHttpRequest){
15		xhr = new XMLHttpRequest();
16	}else if(window.ActiveXObject){
17		try{
18			xhr = new ActiveXObject("Msxml2.XMLHTTP");
19		}catch(e){
20			xhr = new ActiveXObject("Microsoft.XMLHTTP");
21		}
22	}
23	
24	xhr.open("GET", root + "group.js", false);
25	xhr.send("");
26	eval(xhr.responseText);
27
28	$('#testDiv').click(function(){
29		test();
30	});
31
32});

javascript
1// js/group.js
2// js/app.jsの中で呼び出したいjsファイル
3$(function(){
4	var defaults = {
5		'view': 'test'
6	};
7	
8	function test(){
9		var x = console.log(defaults);
10		return x;
11	};
12});

行動規範の内容に同意します

回答2件

ベストアンサー

ActiveXObject() とは懐かしいコードですね。
コード的に IE6 対応を踏まえていると思われますが、その場合は DOM - Script 間の循環参照バグがあるのでスコープ周りをもう少ししっかりと書いた方がいいと思います。
原因は hyper-drums-ko さんの仰るようにスコープの問題だと思いますが、循環参照バグを踏まえてコードを書き直してみました。

JavaScript
1// js/app.js
2jQuery(function(){
3  function getScriptDir () {  // DOM要素へのスコープが xhr から参照されないようにスコープを別にします
4    var scripts = document.getElementsByTagName('script');
5    var i = scripts.length;
6
7    while (i--) {
8      var match = scripts[i].src.match(/(^|.*\/)app\.js$/);
9
10      if (match) {
11        return match[1];
12      }
13    }
14
15    return null;
16  }
17
18  function getXHR () {
19    if (window.XMLHttpRequest){
20      return new XMLHttpRequest();
21    } else if (window.ActiveXObject) {
22      try {
23        return new ActiveXObject('Msxml2.XMLHTTP.6.0'); // "Msxml2.XMLHTTP", "Microsoft.XMLHTTP" は既にメンテが行われていません
24      } catch (e) {
25        try {
26          return new ActiveXObject('Msxml2.XMLHTTP.3.0');
27        } catch (e2) {}
28      }
29    }
30
31    return null;
32  }
33
34  function handleClick (event) {  // xhr を参照できないようにスコープを別にします
35    console.log(event.data.defaults);
36  }
37
38  function getScript () {
39    var xhr = getXHR();
40
41    if (xhr) {
42      xhr.open('GET', getScriptDir() + 'group.json', false);  // group.json を GET します
43      xhr.send('');
44      jQuery('#testDiv').on('click', {defaults: jQuery.parseJSON(xhr.responseText)}, handleClick);  // event.data で JSON データを渡します
45    }
46  }
47
48  getScript();
49});

group.json (オブジェクトデータを渡すのが目的のように思えたので JSON ファイルにしました)

JavaScript
1{"view": "test"}

Re: KenjiMiyata さん

投稿2015/12/15 05:10

think49

総合スコア18162

スコープの問題じゃないでしょうか。

Javascript
1// js/group.js
2// js/app.jsの中で呼び出したいjsファイル
3var defaults = {
4    'view': 'test'
5};
6
7function test() {
8    var x = console.log(defaults);
9    return x;
10};