JavaScriptファイルを介してすべてのJavaScriptファイルをディレクトリに含めるにはどうすればよいですか？
https://stackoverflow.com/questions/4175008
-
09-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
ページに含めたいJavaScriptファイルがたくさんありますが、書き続ける必要はありません
<script type="text/javascript" src="js/file.js"></script>
それでは、すべてのファイルをディレクトリ（未知のサイズ）に含める方法はありますか？ようなことをすることができますか...
$.getScript("js/*.js");
...「JS」ディレクトリ内のすべてのJavaScriptファイルを取得するには？ jqueryを使用してこれを行うにはどうすればよいですか？
解決
一般的に、これはおそらく素晴らしいアイデアではありません。なぜなら、HTMLファイルは実際に使用しているJSファイルのみをロードする必要があるからです。とにかく、これはサーバー側のスクリプト言語に関係するのは簡単です。ページをクライアントに提供する前に、スクリプトタグを挿入するだけです。
サーバー側のスクリプトを使用せずにそれを行う場合は、JSファイルをディレクトリのコンテンツのリストを許可するディレクトリにドロップし、XMLHTTPREQUESTを使用してディレクトリのコンテンツを読み取り、ファイル名を解析してロードすることができます。 。
オプション＃3は、getScript（）を使用して他のすべてのファイルをロードする「ローダー」JSファイルを持つことです。すべてのHTMLファイルにスクリプトタグに入れて、新しいスクリプトをアップロードするたびにローダーファイルを更新するだけです。
他のヒント
サーバー側のスクリプトを使用してスクリプトのタグラインを生成するのはどうですか？大まかに、このようなもの（PHP） -
$handle=opendir("scripts/");
while (($file = readdir($handle))!==false) {
echo '<script type="text/javascript" src="$file"></script>';
}
closedir($handle);
100％のクライアントサイドソリューションが必要であることを考えると、理論的にはおそらくこれを行うことができます。
xmlhttprequest経由で、そのディレクトリのディレクトリリストページを取得します（ほとんどのWebサーバーは、ディレクトリにindex.htmlファイルがない場合はファイルのリストを返します）。
そのファイルをJavaScriptで解析し、すべての.jsファイルを引き出します。これはもちろん、Webサーバー / Webホストのディレクトリリストの形式に敏感になります。
このようなもので、スクリプトタグを動的に追加します。
function loadScript (dir, file) {
var scr = document.createElement("script");
scr.src = dir + file;
document.body.appendChild(scr);
}
のようなものを使用できます グラントにはソースが含まれます. 。それはあなたにあなたのHTMLを前処理し、あなたが望むものを含む素晴らしい構文をあなたに与えます。これはまた、ビルドタスクを正しくセットアップすると、これらすべてをDEVモードに含めることができますが、PRODモードではなく、かなりクールです。
プロジェクトにGruntを使用していない場合は、おそらくGulpまたは他のタスクランナーに似たツールがあります。
JSはで実行されるため、JavaScriptでそれを行うことはできません ブラウザ, 、サーバーではないので、ディレクトリやその他のサーバーリソースについて何も知りませんでした。
最良のオプションは、Jellyfishtreeが投稿したようなサーバーサイドスクリプトを使用することです。
@JellyFishTreeディレクトリからすべてのJSファイルを含む1つのPHPファイルを作成し、スクリプトタグを介してこのPHPファイルのみを含める場合、より良いでしょう。ブラウザはサーバーへのリクエストを少なくする必要があるため、これはパフォーマンスが向上します。これを参照してください：
javascripts.php：
<?php
//sets the content type to javascript
header('Content-type: text/javascript');
// includes all js files of the directory
foreach(glob("packages/*.js") as $file) {
readfile($file);
}
?>
index.php：
<script type="text/javascript" src="javascripts.php"></script>
それでおしまい！
楽しむ！ :)
あなたはブラウザからJavaScriptでそれをすることはできません...もし私があなただったら、私は browserify. 。 CommonJSモジュールを使用してコードを記述し、JavaScriptファイルを1つにコンパイルします。
HTMLでコンパイルしたJavaScriptファイルをロードします。
完全にクライアント側を実行できますが、すべてのJavaScriptファイル名を指定する必要があります。たとえば、配列アイテムとして：
function loadScripts(){
var directory = 'script/';
var extension = '.js';
var files = ['model', 'view', 'controller'];
for (var file of files){
var path = directory + file + extension;
var script = document.createElement("script");
script.src = path;
document.body.appendChild(script);
}
}
私はこの質問への答えを探していて、私自身の問題がありました。私はさまざまな場所でいくつかの解決策を見つけて、それらを自分の好みの答えにまとめました。
function exploreFolder(folderURL,options){
/* options: type explaination
**REQUIRED** callback: FUNCTION function to be called on each file. passed the complete filepath
then: FUNCTION function to be called after loading all files in folder. passed the number of files loaded
recursive: BOOLEAN specifies wether or not to travel deep into folders
ignore: REGEX file names matching this regular expression will not be operated on
accept: REGEX if this is present it overrides the `ignore` and only accepts files matching the regex
*/
$.ajax({
url: folderURL,
success: function(data){
var filesLoaded = 0,
fileName = '';
$(data).find("td > a").each(function(){
fileName = $(this).attr("href");
if(fileName === '/')
return; //to account for the (go up a level) link
if(/\/\//.test(folderURL + fileName))
return; //if the url has two consecutive slashes '//'
if(options.accept){
if(!options.accept.test(fileName))
//if accept is present and the href fails, dont callback
return;
}else if(options.ignore)
if(options.ignore.test(fileName))
//if ignore is present and the href passes, dont callback
return;
if(fileName.length > 1 && fileName.substr(fileName.length-1) === "/")
if(options.recursive)
//only recurse if we are told to
exploreFolder(folderURL + fileName, options);
else
return;
filesLoaded++;
options.callback(folderURL + fileName);
//pass the full URL into the callback function
});
if(options.then && filesLoaded > 0) options.then(filesLoaded);
}
});
}
次に、次のように呼ぶことができます。
var loadingConfig = {
callback: function(file) { console.log("Loaded file: " + file); },
then: function(numFiles) { console.log("Finished loading " + numFiles + " files"); },
recursive: true,
ignore: /^NOLOAD/,
};
exploreFolder('/someFolderURL/', loadingConfig);
この例では、指定されたフォルダー内のすべてのファイル/フォルダーのコールバックを呼び出します それ外 始まるもののために NOLOAD. 。ファイルを実際にページにロードしたい場合は、私が開発したこの他のヘルパー関数を使用できます。
function getFileExtension(fname){
if(fname)
return fname.substr((~-fname.lastIndexOf(".") >>> 0) + 2);
console.warn("No file name provided");
}
var loadFile = (function(filename){
var img = new Image();
return function(){
var fileref,
filename = arguments[0],
filetype = getFileExtension(filename).toLowerCase();
switch (filetype) {
case '':
return;
case 'js':
fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
break;
case "css":
fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
break;
case "jpg":
case "jpeg":
case 'png':
case 'gif':
img.src = filename;
break;
default:
console.warn("This file type is not supported: "+filetype);
return;
}
if (typeof fileref !== undefined){
$("head").append(fileref);
console.log('Loaded file: ' + filename);
}
}
})();
この関数はJS |を受け入れますCSS | （Common Image）ファイルとロード。また、JSファイルも実行されます。すべての画像をロードするには、スクリプトで実行する必要がある完全な呼び出し と* スタイルシート と 他のスクリプトは次のようになる可能性があります：
loadingConfig = {
callback: loadfile,
then: function(numFiles) { console.log("Finished loading " + numFiles + " files"); },
recursive: true,
ignore: /^NOLOAD/,
};
exploreFolder('/someFolderURL/', loadingConfig);
驚くほど機能します！
かなり短い別のオプション：
<script type="text/javascript">
$.ajax({
url: "/js/partials",
success: function(data){
$(data).find('a:contains(.js)').each(function(){
// will loop through
var partial= $(this).attr("href");
$.getScript( "/js/partials/" + partial, function( data, textStatus, jqxhr ) {});
});
}
});
</script>
