外部JavaScriptファイルから別の外部JavaScriptファイルをインクルードする方法

JavaScript

まずファイル構成。

/root
├index.html
├a.js
└b.js

index.htmlでa.jsとb.jsの両ファイルをインクルードする方法は

<script type="text/javascript" language="JavaScript" src="a.js"></script>
<script type="text/javascript" language="JavaScript" src="b.js"></script>

が一般的です。

じゃあa.js内でb.jsをインクルードする方法は？

今のところ、JavaScriptにインクルード命令はありません。
しかしdocument.writeでゴリ押しできる模様。

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" language="JavaScript" src="a.js"></script>
</head>
<body>
</body>
</html>
a.js
document.write('<script type="text/javascript" language="JavaScript" src="b.js"></script>');
b.js
alert("b");

ファイル構成が変わるとどうなるか

全てのファイルが同じ階層に場合は問題ありません。
しかしa.jsとb.jsがライブラリとしてパッケージされているとして、以下のファイル構成の場合はどうなってしまうか。

/root
├/html
│└index.html
└/plugin
　└/library
　　├/a
　　│└a.js
　　└/b
　　　└b.js
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" language="JavaScript" src="../plugin/library/a/a.js"></script>
</head>
<body>
</body>
</html>
a.js
document.write('<script type="text/javascript" language="JavaScript" src="../plugin/library/b/b.js"></script>');
                                                                          //↑ここのパスを修正しないといけない


各ファイルを1〜2つ下の階層に落とすだけでa.jsのソースを変更する必要がでてきました。
a.js内のb.jsをインクルードする箇所のパスは、a.jsからb.jsへの相対パスではなく、index.htmlからb.jsへの相対パスです。
a.jsはライブラリにパッケージされているので、これは非常にまずいです。
b.jsは変更する必要はありません。

ではどうすれば良いか

get_globalPath.jsをlibraryディレクトリ内に作成し、以下の様にします。

/root
├/html
│└index.html
└/plugin
　└/library
　　├get_globalPath.js
　　├/a
　　│└a.js
　　└/b
　　　└b.js
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" language="JavaScript" src="../plugin/get_globalPath.js"></script>
<script type="text/javascript" language="JavaScript" src="../plugin/library/a/a.js"></script>
</head>
<body>
</body>
</html>
get_globalPath.js
function get_globalPath()
{
	var hoge = function()
	{
		var f = function(e)
		{
			var name = e.tagName;
			if( !!name && name.toUpperCase() == "SCRIPT" )
			{
				return e;
			}
			var c = e.lastChild;
			return (!!c)?f(c):null;
		};
		var es = f(document);
		if(!es)
		{
			return window.location;
		}
		return es.getAttribute("src") || window.location;
	}
	var path = hoge();

	if( "object" == typeof(path) )
	{
		path = path.href;
	}
	var array = path.split("/");
	array.splice(array.length - 2, 2);

	path = "";
	for(var y = 0, cnt = array.length; y < cnt; y++)
	{
		path+= array[y] + "/";
	}
	return path;
}
a.js
document.write('<script type="text/javascript" language="JavaScript" src="' + get_globalPath() + 'b/b.js"></script>');


これでファイル構成が変わってもindex.htmlファイル意外を修正する必要がなくなり、ライブラリとして独立できます。