web-dev-qa-db-ja.com

JavaScriptファイル経由でディレクトリにすべてのJavaScriptファイルを含めるにはどうすればよいですか？

ページに含めたいJavaScriptファイルがたくさんありますが、書き続ける必要はありません。

<script type="text/javascript" src="js/file.js"></script>

それで、ディレクトリにすべてのファイルを含める方法はありますか（不明なサイズ）？次のようなことができますか...

$.getScript("js/*.js");

...「js」ディレクトリ内のすべてのJavaScriptファイルを取得するには？ jQueryを使用してこれを行うにはどうすればよいですか？

javascriptjquerygetscript
39
Hristo

一般に、これはおそらく素晴らしいアイデアではありません。htmlファイルは、実際に使用するJSファイルのみをロードする必要があるためです。いずれにせよ、これはサーバー側のスクリプト言語で行うのは簡単です。クライアントにページを提供する前に、スクリプトタグを挿入するだけです。

サーバー側のスクリプトを使用せずに実行したい場合は、JSファイルをディレクトリの内容を一覧表示できるディレクトリにドロップし、XMLHttpRequestを使用してディレクトリの内容を読み取り、ファイル名を解析してロードします。 。

オプション＃3は、getScript（）を使用して他のすべてのファイルをロードする「ローダー」JSファイルを持つことです。それをすべてのhtmlファイルのスクリプトタグに入れると、新しいスクリプトをアップロードするたびにローダーファイルを更新するだけで済みます。

25
Mark Bessey

サーバー側のスクリプトを使用してスクリプトのタグ行を生成するのはどうですか？ひどく、このようなもの（PHP）-

$handle=opendir("scripts/");

while (($file = readdir($handle))!==false) {
echo '<script type="text/javascript" src="$file"></script>';
}

closedir($handle);
23
jellyfishtree

100％のクライアント側のソリューションが必要な場合、理論上はおそらくこれを行うことができます。

XmlHttpRequestを介して、そのディレクトリのディレクトリリストページを取得します（ディレクトリにindex.htmlファイルがない場合、ほとんどのWebサーバーはファイルのリストを返します）。

そのファイルをjavascriptで解析し、すべての.jsファイルを引き出します。もちろん、これはあなたのウェブサーバー/ウェブホストのディレクトリリストのフォーマットに敏感です。

次のようなスクリプトタグを動的に追加します。

function loadScript (dir, file) {
 var scr = document.createElement("script");
 scr.src = dir + file;
 document.body.appendChild(scr);
 }
14
rob

Grunt Include Source のようなものを使用できます。 HTMLを前処理するニース構文を提供し、必要なものを含めます。これは、ビルドタスクを正しく設定すれば、これらすべてをdevモードで使用できるが、prodモードでは使用できないことを意味します。

プロジェクトにGruntを使用していない場合、おそらくGulpや他のタスクランナー向けの同様のツールがあります。

3
bwest87

JavaScriptはサーバーではなくbrowserで実行されるため、JavaScriptではできません。したがって、ディレクトリやその他のサーバーリソースについては何も知りませんでした。

最良のオプションは、jellyfishtreeが投稿したようなサーバー側スクリプトを使用することです。

2
Alberto Martinez

ブラウザからJavascriptでそれを行うことはできません...もし私があなたなら、 browserify のようなものを使用します。 commonjsモジュールを使用してコードを記述し、javascriptファイルを1つにコンパイルします。

Htmlで、コンパイルしたjavascriptファイルをロードします。

1
Loïc Faure-Lacroix

@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>

それでおしまい！
楽しむ！ :)

1
Pascal

完全にクライアント側で実行できますが、すべての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);
   } 
 }
1
yurin

かなり短い別のオプション：

<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>
0
Alan

私はこの質問に対する答えを探していましたが、自分の問題がありました。さまざまな場所でいくつかの解決策を見つけて、それらを自分の好みの答えにまとめました。

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);

この例は、指定されたフォルダー内のすべてのファイル/フォルダーでそのコールバックを呼び出しますexceptNOLOADで始まるものに対して。ファイルを実際にページにロードする場合は、私が開発したこの他のヘルパー関数を使用できます。

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 | （共通画像）ファイルをロードします。 JSファイルも実行します。すべての画像を読み込むためにスクリプトで実行する必要がある完全な呼び出しand *スタイルシートand他のスクリプトは次のようになります。

loadingConfig = {
    callback: loadfile,
    then: function(numFiles) { console.log("Finished loading " + numFiles + " files"); },
    recursive: true,
    ignore: /^NOLOAD/,
};
exploreFolder('/someFolderURL/', loadingConfig);

驚くほどうまくいきます！

0
Frozenfrank