JavaScriptファイルを別のJavaScriptファイルに含めるにはどうすればよいですか?


5194

@importCSSに似たJavaScriptで、JavaScriptファイルを別のJavaScriptファイル内に含めることができるものはありますか?



82
@ダニエル、私はAJAX呼び出しを使いたくありません。
Alec Smart

13
単に順序付けられたscriptタグを使用して、インポートされたファイルを、それを必要とする他のファイルの前に宣言してみませんか?
ファルサレッラ

6
@Claudiuこれは何もインポートするのに役立ちませんが、同様に機能するはずです。別のJSファイルに依存するJSファイルがある場合は、最初に依存関係ファイルのスクリプトタグを宣言するだけで、後者はすでに依存関係をロードしています。それが可能なアプローチではない状況がある場合は、ここでの回答が役に立ちます。
ファルサレラ

1
これを行うことの実際的な利点は何ですか?どちらの方法でも、JavaScriptファイルに依存するコードベースが読み込まれず、いずれの場合でも読み込まれません。
Ciasto piekarz 2017年

回答:


4472

古いバージョンのJavaScriptにはインポート、インクルード、または要求がなかったため、この問題に対するさまざまなアプローチが開発されてきました。

しかし、2015年(ES6)以降、JavaScriptには、Node.jsにモジュールをインポートするES6モジュール標準があり、ほとんどの最新のブラウザーでもサポートされています。

古いブラウザとの互換性のために、WebpackRollupなどのビルドツールやBabelなどのトランスパイレーションツールを使用できます。

ES6モジュール

ECMAScript(ES6)モジュールは、v8.5以降、フラグあり、および少なくともNode.js v13.8.0以降、フラグなしでNode.jsでサポートされています--experimental-modules。"ESM"(vs. Node.jsの以前のCommonJSスタイルのモジュールシステム["CJS"])を有効にするには、で使用"type": "module"するpackage.jsonか、ファイルに拡張子を付け.mjsます。(同様に、.cjsデフォルトがESMの場合、Node.jsの以前のCJSモジュールで作成されたモジュールに名前を付けることができます。)

使用package.json

{
    "type": "module"
}

次にmodule.js

export function hello() {
  return "Hello";
}

次にmain.js

import { hello } from './module.js';
let val = hello();  // val is "Hello";

を使用すると.mjs、次のようになりますmodule.mjs

export function hello() {
  return "Hello";
}

次にmain.mjs

import { hello } from './module.mjs';
let val = hello();  // val is "Hello";

ブラウザーのECMAScriptモジュール

ブラウザは Safari 10.1、Chrome 61、Firefox 60、およびEdge 16 以降、 ECMAScriptモジュールの直接ロードをサポートしています(Webpackなどのツールは不要)。caniuseで現在のサポートを確認してください。Node.jsの.mjs拡張機能を使用する必要はありません。ブラウザはモジュール/スクリプトのファイル拡張子を完全に無視します。

<script type="module">
  import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
  hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

続きを読む https://jakearchibald.com/2017/es-modules-in-browsers/をご覧ください

ブラウザーでの動的インポート

動的インポートにより、スクリプトは必要に応じて他のスクリプトをロードできます。

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

続きを読む https://developers.google.com/web/updates/2017/11/dynamic-importをご覧ください。

Node.jsが必要

Node.jsでまだ広く使用されている古いCJSモジュールスタイルはmodule.exports/requireシステムです。

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"   

JavaScriptが、前処理を必要としないブラウザーに外部JavaScriptコンテンツを組み込む他の方法があります。

AJAXロード

AJAX呼び出しで追加のスクリプトをロードし、それを使用evalしてそれを実行できます。これは最も簡単な方法ですが、JavaScriptサンドボックスセキュリティモデルのため、ドメインに限定されます。を使用evalすると、バグ、ハッキング、セキュリティの問題への扉も開きます。

フェッチロード

ダイナミックインポートと同様にfetchFetch Injectライブラリを使用してスクリプトの依存関係の実行順序を制御するpromiseを使用して、1つまたは複数のスクリプトを呼び出しでロードできます。

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

jQueryの読み込み

jQueryのライブラリの読み込み機能を提供します1行に

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

動的スクリプトの読み込み

スクリプトURLを含むスクリプトタグをHTMLに追加できます。jQueryのオーバーヘッドを回避するために、これは理想的なソリューションです。

スクリプトは別のサーバーに置くこともできます。さらに、ブラウザはコードを評価します。<script>タグは、Webページのいずれかに注入することができる<head>、あるいは単に閉じる前に挿入</body>タグ。

これがどのように機能するかの例を次に示します。

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");  // create a script DOM node
    script.src = url;  // set its src to the provided URL

    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

この関数は<script>、ページのヘッドセクションの最後に新しいタグを追加します。ここで、src属性は、最初のパラメーターとして関数に指定されたURLに設定されます。

これらのソリューションは両方とも、「JavaScriptマッドネス:動的スクリプトロード」で説明および説明されています

スクリプトがいつ実行されたかを検出する

今、あなたが知っておくべき大きな問題があります。これは、コードをリモートでロードすることを意味します。最新のWebブラウザーはすべてを非同期でロードしてパフォーマンスを向上させるため、ファイルをロードして現在のスクリプトを実行し続けます。(これは、jQueryメソッドと手動の動的スクリプトロードメソッドの両方に適用されます。)

つまり、これらのトリックを直接使用する場合、新しくロードされたコードは、ロードするように要求した後、次の行を使用できなくなります

次に例を示しmy_lovely_script.jsますMySuperObject

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

次に、ページヒットをリロードします F5。そしてそれはうまくいきます!混乱しています...

それでそれについて何をすべきか?

まあ、あなたが私があなたに与えたリンクで著者が提案するハックを使うことができます。要約すると、急いでいる人のために、彼はスクリプトが読み込まれたときにイベントを使用してコールバック関数を実行します。したがって、リモートライブラリを使用するすべてのコードをコールバック関数に配置できます。例えば:

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

次に、スクリプトがラムダ関数に読み込まれた後で、使用するコードを記述します。

var myPrettyCode = function() {
   // Here, do whatever you want
};

次に、すべてを実行します。

loadScript("my_lovely_script.js", myPrettyCode);

DOMが読み込まれた後、またはその前に、ブラウザと行を含めたかどうかによって、スクリプトが実行される場合があることに注意してくださいscript.async = false;。これを説明する一般的なJavaScriptの読み込みに関する優れた記事があります。

ソースコードのマージ/前処理

この回答の冒頭で述べたように、多くの開発者はプロジェクトでParcel、Webpack、Babelなどのビルド/トランスパイレーションツールを使用して、今後のJavaScript構文の使用、古いブラウザーの下位互換性の提供、ファイルの結合、縮小、コード分​​割などを実行します


130
いいえ、Rhinoほど高度なものを使用している人は、この質問をしません。
e-satis、

192
完全にするために、3つ目の方法があります。特定のソリューションでは、両方のJavaScriptファイルを制御する場合、両方のファイルのコンテンツを組み合わせた1つの巨大なJavaScriptファイルを作成できます。
ヒキガエル

20
「document.createElement( "my_lovely_script.js");」にすべきではありません 例では "document.createElement(" script ")"ですか?
ラッセルシルバ

14
あなたが実行しているのがあなたのコードである場合、evalはどのようにしてハッキングへの扉を開きますか?
Vince Panuccio 2013年

6
答えには、IE(onreadystatechangeイベントとreadyStateプロパティ)の変更が必要です。また、動的なスクリプトの読み込みは、broswerのプリロードスキャナーの恩恵を受けません。このHTML5Rocksの記事をお勧めします:html5rocks.com/en/tutorials/speed/script-loading
ruhong

570

誰かがより高度なものを探している場合は、RequireJSを試してください。依存関係の管理、同時実行性の向上、重複の回避(スクリプトの複数回の取得)などの追加のメリットが得られます。

JavaScriptファイルを「モジュール」で記述し、他のスクリプトで依存関係として参照できます。または、簡単な「このスクリプトを取得する」ソリューションとしてRequireJSを使用できます。

例:

依存関係をモジュールとして定義します。

some-dependency.js

define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {

     //Your actual script goes here.   
     //The dependent scripts will be fetched if necessary.

     return libraryObject;  //For example, jQuery object
});

implementation.jsは、some-dependency.jsに依存する「メイン」のJavaScriptファイルです

require(['some-dependency'], function(dependency) {

    //Your script goes here
    //some-dependency.js is fetched.   
    //Then your script is executed
});

GitHub README からの抜粋:

RequireJSは、プレーンなJavaScriptファイルとより多くの定義されたモジュールをロードします。Webワーカーを含むブラウザー内での使用に最適化されていますが、RhinoやNodeなどの他のJavaScript環境で使用することもできます。非同期モジュールAPIを実装します。

RequireJSは、プレーンスクリプトタグを使用してモジュール/ファイルをロードするため、簡単にデバッグできるはずです。既存のJavaScriptファイルをロードするためだけに使用できるため、に使用できるため、JavaScriptファイルを書き直すことなく既存のプロジェクトに追加できます。

...


1
@aaaidan:MattDmoの理由に加えて、受け入れられた回答に依存する外部ライブラリに依存しています。
David Mulder、

1
require.jsを克服するための最新のものは、他のバインディングや豊富なHTML機能とともに、より安定していて使いやすいAngular jsです。
Zeeshan 2014年

5
-1:これらの抽象化-「some_dependency」-は非常に貧弱であり、インデックスが混乱を増しています。実際のコード例がどのように見えるかを理解するのに苦労しています。著者が実用的な例を提供した場合、ほとんど誰でも自分のニーズに合わせてそれを調整して一般化することができます。
手ぎりねなし

1
はMVCおよびスクリプトの自動縮小によるバンドルではうまく機能しません
Triynko

1
'追加.. JavaScriptファイルを書き直す必要はありません'; かっこいいですが、正確にはどうですか?Cur。回答は、このような「require」(「requirejs」ではない)をメインスクリプトに追加することを提案します+「依存」をすべての依存ファイルに追加しますか?しかし、それは書き換えなので、何を書き換えないのでしょうか。-RequireJSがea fileに通常どおりグローバル定義を作成させるので、残りのコード?-そうですか?+(忘れましたか?)<script src = " requirejs.org/docs/release/2.2.0/comments/require.js "> </ script>を試してから、 'requirejs([' GoogleDrive.com/host /..',..],function(a,b){mycode }) ':Firebugは、すべての依存関係がロードされたが、mycode&afterで定義されていないそれらの定義を読み込みます。
Destiny Architect

195

実際に、JavaScriptファイル非同期ではなく読み込む方法あるため、新しく読み込んだファイルに含まれている関数を、読み込んだ直後に使用でき、すべてのブラウザーで動作すると思います。

あなたはあなたのページjQuery.append()<head>要素で使用する必要があります、つまり:

$("head").append('<script type="text/javascript" src="' + script + '"></script>');

ただし、この方法には問題もあります。インポートされたJavaScriptファイルでエラーが発生すると、Firebug(およびFirefox Error ConsoleとChrome Developer Toolsも同様)がその場所を誤って報告します。これは、Firebugを使用して追跡する場合は大きな問題ですJavaScriptはかなりダウンします(私はそうします)。Firebugは、何らかの理由で新しくロードされたファイルを知らないだけなので、そのファイルでエラーが発生すると、メインのHTMLで発生したと報告されますファイルれ、エラーの実際の理由を見つけるのが困難になります。

しかし、それがあなたにとって問題でなければ、この方法はうまくいくはずです。

私は実際に呼ばれるjQueryプラグインを書いています このメソッドを使用する$ .import_js()

(function($)
{
    /*
     * $.import_js() helper (for JavaScript importing within JavaScript code).
     */
    var import_js_imported = [];

    $.extend(true,
    {
        import_js : function(script)
        {
            var found = false;
            for (var i = 0; i < import_js_imported.length; i++)
                if (import_js_imported[i] == script) {
                    found = true;
                    break;
                }

            if (found == false) {
                $("head").append('<script type="text/javascript" src="' + script + '"></script>');
                import_js_imported.push(script);
            }
        }
    });

})(jQuery);

したがって、JavaScriptをインポートするために必要なことは次のとおりです。

$.import_js('/path_to_project/scripts/somefunctions.js');

私はこれについて簡単なテストも行いました

main.jsメインHTMLにファイルが含まれ、次にのスクリプトがをmain.js使用$.import_js()してincluded.js、この関数を定義すると呼ばれる追加ファイルをインポートします。

function hello()
{
    alert("Hello world!");
}

含めた直後 included.jshello()関数が呼び出され、およびアラートを取得しています。

(この回答は、e-satisのコメントに対するものです)。


私はこの方法を試していますが、うまくいきません。要素がヘッドタグに表示されません。
サイト

16
@juanpastas-を使用するjQuery.getScriptと、プラグインの作成について心配する必要がありません...
MattDMo

6
この記事によると、にscript要素を追加すると、特にに設定されていheadない限り、非同期で実行asyncされfalseます。
Flimm

1
スクリプト変数にHTMLエンティティをエンコードしないでください。リンクにが含まれている場合"、コードは壊れます
RedClover

1
@Flimm親愛なる先生、私と私のチームはあなたのコメントに感謝します、そして私たちが直接会ったことがあるならば、私は個人的にあなたにもお金のビールを借りています
Alex

155

もう1つの方法は、私の意見ではよりクリーンで、<script>タグを使用する代わりに同期Ajaxリクエストを作成することです。これは、Node.jsがインクルードを処理する方法でもあります。

jQueryを使用した例を次に示します。

function require(script) {
    $.ajax({
        url: script,
        dataType: "script",
        async: false,           // <-- This is the key
        success: function () {
            // all good...
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

通常はインクルードを使用するので、コードで使用できます。

require("/scripts/subscript.js");

そして、次の行で必要なスクリプトから関数を呼び出すことができます:

subscript.doSomethingCool(); 

1
良い解決策、head includeは残念ながら非同期です。ajaxソリューションは機能します。
Matteo Conta

17
他の誰かが述べたように、requirejs.orgはこれを行い、jsファイルをまとめて高速にロードするプリコンパイラーも備えています。ぜひチェックしてみてください。
Ariel

2
Chromeのファイルの最後に次のディレクティブを追加することでデバッグできることがわかりました:// @ sourceURL = view_index.js
Todd Vance

11
残念ながら、async:falseはjQueryで非推奨になりました。将来壊れるかもしれないので避けたいです。
sqram 2013年

3
@katshここではjqXHRオブジェクトを使用していません。あなたの引用は、async: falseおそらく非推奨であると述べている以前のコメントを裏付けていないようです。そうではない!あなたの引用が言うように、jqXHR関連のものだけです。
Zero3 2015

101

良い知らせがあります。まもなく、JavaScriptコードを簡単にロードできるようになります。これは、JavaScriptコードのモジュールをインポートする標準的な方法となり、コアJavaScript自体の一部になります。

ファイルからimport cond from 'cond.js';名前が付けられたマクロをロードするために書き込むだけcondですcond.js

したがって、JavaScriptフレームワークに依存する必要も、Ajax呼び出しを明示的に行う必要もありません。

参照する:


12
jsfileでのrequire / importは、今後非常に長くなりました。(IMO)。
rwheadon 2013

6
@rwheadonええ、これは言語の一部ではないのでぞっとするようです!js人々が何かを成し遂げる方法は私を超えています!
初心者

@ jonny-leeds組み込みのモジュール読み込みがなくても、ブラウザーのJavaScriptは、モジュール管理用にRequireJSのようなライブラリーを実装できるほど柔軟です。
Keen

8
2015年中旬
en

うん、君のいうとおりだ。今、私はこの:(悪い感じ始めてるThouhは、すべてのブラウザに実装されたら、これはJavaScriptに内蔵の大きな特徴となります。。
Imdad

97

JavaScriptタグを動的に生成して、他のJavaScriptコード内からHTMLドキュメントに追加することが可能です。これにより、ターゲットのJavaScriptファイルが読み込まれます。

function includeJs(jsFilePath) {
    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = jsFilePath;

    document.body.appendChild(js);
}

includeJs("/path/to/some/file.js");

8
@ e-satis-実際、これは利点です。同期スクリプトがブロックします。コース用の馬ですが、10回のうち9回は非ブロッキングオプションが必要です。
アナカタ09年

@Svitlana-このように作成されたスクリプト要素は非同期です。現在、これは抜け穴を悪用していると見なすことができるので、将来の証拠にはならない可能性があります。
アナカタ09年

実際、私はそれを取り戻しました。頭ではなく体に追加していることに気づきました。
アナカタ09年

@annakata:違いは何ですか?ところで、yahooは、スクリプトタグを本文の最後に追加することを提案しているので、動的に追加するときに問題はありません。
Svitlana Maksymchuk 2009年

7
@ e-satis非同期は、ページがフリーズしないため、優れています。完了時にコールバックを使用して通知を受けるjs.onload = callback;
Vitim.us '23

74

ステートメント importはECMAScript 6にあります。

構文

import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;

...ただし、リンク先のページの互換性表によると、これまでのブラウザではサポートされていません。
Zero3

6
ES6コードを記述し、Babel.js(babeljs.io)を使用して、任意の現在のモジュールシステム(CommonJS / AMD / UMD)にコンパイルできます:babeljs.io/docs/usage/modules
Jeremy Harris

@ Zero3どうやら新しいIE(Edge)が唯一のものです
Julian Avar

2019年、IEはまだこれをどの形式でもサポートしていません。なぜマイクロソフトはユーザビリティに反対しなければならないのですか?
GreySage

61

このページで見つけたこの関数を使用できますか?JavaScriptファイルをJavaScriptファイルに含めるにはどうすればよいですか?

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}

5
追加すると便利ですscript.onload = callback;
Vitim.us 2013

@SvitlanaMaksymchukなので、を使用しない場合var、変数はグローバルになりますか?
フランシスココラレスモラレス

@FranciscoCorralesはい。
クリストファーチッシュ2014年

これは、VAR :)の有無にかかわらずグローバルで終わる
Vedran Maricevic。


54

ここにjQueryなしの同期バージョンがあります:

function myRequire( url ) {
    var ajax = new XMLHttpRequest();
    ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous
    ajax.onreadystatechange = function () {
        var script = ajax.response || ajax.responseText;
        if (ajax.readyState === 4) {
            switch( ajax.status) {
                case 200:
                    eval.apply( window, [script] );
                    console.log("script loaded: ", url);
                    break;
                default:
                    console.log("ERROR: script not loaded: ", url);
            }
        }
    };
    ajax.send(null);
}

この動作するクロスドメインを取得するには、サーバーがallow-origin応答にヘッダーを設定する必要があることに注意してください。


優れた機能!本文の後に追加のJSが書き込まれる前にJavaScriptをロードします。複数のスクリプトをロードするときに非常に重要です。
tfont 2014

3
@heinob:クロスドメインで機能させるにはどうすればよいですか?(からスクリプトを読み込んでいますhttp://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStuff/userjs/aagmfunctions.js
user2284570

@ user2284570:あなたが外部ドメインの所有者である場合:サーバーの応答に「allow-origin」ヘッダーを設定します。あなたが所有者でない場合:何も。ごめんなさい!それがクロスオリジンポリシーです。
heinob 2014

2
@ user2284570:このようにコメントを理解しました。つまり、あなたはスクリプトのロード元のドメインの所有者ではありません。その場合は、挿入された<script>タグを介してのみスクリプトをロードできますXMLHttpRequest
heinob 2014

2
これらの計画は、Firefoxでこれを使用するには、ファイルの先頭に次の行を追加し、(imacrosのスクリプトのために言って):const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1");
Kwestion

49

私はこのJavaScriptコードを記述しました(DOM操作にPrototypeを使用)。

var require = (function() {
    var _required = {};
    return (function(url, callback) {
        if (typeof url == 'object') {
            // We've (hopefully) got an array: time to chain!
            if (url.length > 1) {
                // Load the nth file as soon as everything up to the
                // n-1th one is done.
                require(url.slice(0, url.length - 1), function() {
                    require(url[url.length - 1], callback);
                });
            } else if (url.length == 1) {
                require(url[0], callback);
            }
            return;
        }
        if (typeof _required[url] == 'undefined') {
            // Haven't loaded this URL yet; gogogo!
            _required[url] = [];

            var script = new Element('script', {
                src: url,
                type: 'text/javascript'
            });
            script.observe('load', function() {
                console.log("script " + url + " loaded.");
                _required[url].each(function(cb) {
                    cb.call(); // TODO: does this execute in the right context?
                });
                _required[url] = true;
            });

            $$('head')[0].insert(script);
        } else if (typeof _required[url] == 'boolean') {
            // We already loaded the thing, so go ahead.
            if (callback) {
                callback.call();
            }
            return;
        }

        if (callback) {
            _required[url].push(callback);
        }
    });
})();

使用法:

<script src="prototype.js"></script>
<script src="require.js"></script>
<script>
    require(['foo.js','bar.js'], function () {
        /* Use foo.js and bar.js here */
    });
</script>

要旨:http : //gist.github.com/284442


7
jrburkeはこれをRequireJSと書きました。Github:requirejs.org/docs/requirements.html
Mike Caron、

これは、読み込まれたスクリプトをrequire()が呼び出されるスコープの外に配置しないのですか?eval()がスコープ内でそれを行う唯一の方法のようです。それとも別の方法がありますか?
trusktr 14年

44

Facebookがユビキタスの[いいね!]ボタンに対してどのように行うかを一般化したバージョンを次に示します。

<script>
  var firstScript = document.getElementsByTagName('script')[0],
      js = document.createElement('script');
  js.src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';
  js.onload = function () {
    // do stuff with your dynamically loaded script
    snowStorm.snowColor = '#99ccff';
  };
  firstScript.parentNode.insertBefore(js, firstScript);
</script>

それがFacebookで機能する場合、それはあなたのために機能します。

またはのscript代わりに最初の要素を探す理由は、一部のブラウザでは見つからない場合に要素を作成しないためですが、要素があることが保証されています-この要素。詳細については、http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/をご覧くださいheadbodyscript


3
すごい!ここでもいくつかの方法が機能しますが、動的な設定の下でこれが最もよく機能します。
tfont

私はdublicateを排除するために、スクリプトを拡張
カミルDąbrowski

39

純粋なJavaScriptを使用する場合は、を使用できますdocument.write

document.write('<script src="myscript.js" type="text/javascript"></script>');

jQueryライブラリを使用する場合は、この$.getScriptメソッドを使用できます。

$.getScript("another_script.js");

8
document.writeは他のすべてを削除しませんか?
Eisa Adil 2014年

30

PHPを使用してスクリプトをアセンブルすることもできます

ファイルmain.js.php

<?php
    header('Content-type:text/javascript; charset=utf-8');
    include_once("foo.js.php");
    include_once("bar.js.php");
?>

// Main JavaScript code goes here

16
ポイントのように聞こえるのは、これをすべてJavaScriptでフロントエンドに保持することです
アリエル

1
これを思い出させてくれてありがとう。また、PHPにHTMLヘッダーに<script>タグを書き込んで、必要なjsファイル(およびそれらのみ)がロードされるようにすることもできます。
Rolf

29

ここに示されているソリューションのほとんどは、動的なロードを意味しています。代わりに、依存するすべてのファイルを1つの出力ファイルにアセンブルするコンパイラを探していました。Less / SassプリプロセッサがCSS @importat-ruleを処理するのと同じです。私はこの種のまともなものを見つけられなかったので、問題を解決する簡単なツールを書きました。

したがって、ここにコンパイラhttps://github.com/dsheiko/jsicがあります。これは$import("file-path")、要求されたファイルコンテンツに安全に置き換えられます。対応するGruntプラグインは、https//github.com/dsheiko/grunt-jsicです。

jQueryマスターブランチでは、アトミックソースファイルを単にで始まり、intro.jsで終わる単一のファイルに連結しouttro.jsます。ソースコードの設計に柔軟性がないため、これは私には適していません。jsicでどのように機能するかを確認してください。

src / main.js

var foo = $import("./Form/Input/Tel");

src / Form / Input / Tel.js

function() {
    return {
          prop: "",
          method: function(){}
    }
}

これでコンパイラを実行できます:

node jsic.js src/main.js build/mail.js

結合されたファイルを取得します

build / main.js

var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};

2
この投稿以来、私ははるかに優れたソリューション-CommonJSモジュールコンパイラ-github.com/dsheiko/cjscを思いついたので、CommonJsまたはNodeJsモジュールを作成し、相互にアクセスしながら、それらを分離されたスコープ内に維持できます。利点:パフォーマンスに影響を与える複数のHTTPリクエストが不要モジュールコードを手動でラップする必要はありません-これはコンパイラーの責任です(ソースコードの読みやすさが向上します)外部ライブラリは必要ありませんUMDと互換性があります-およびNodeJsモジュール(たとえば、jQuery、Backboneを、コードに触れずにモジュールとしてアドレス指定できます)
Dmitry Sheiko

26

JavaScriptファイルをロードする意図が、インポート/インクルードされたファイルの関数を使用している場合場合は、グローバルオブジェクトを定義し、関数をオブジェクトアイテムとして設定することもできます。例えば:

global.js

A = {};

file1.js

A.func1 = function() {
  console.log("func1");
}

file2.js

A.func2 = function() {
  console.log("func2");
}

main.js

A.func1();
A.func2();

HTMLファイルにスクリプトを含める場合は注意が必要です。順序は次のようになります。

<head>
  <script type="text/javascript" src="global.js"></script>
  <script type="text/javascript" src="file1.js"></script>
  <script type="text/javascript" src="file2.js"></script>
  <script type="text/javascript" src="main.js"></script>
</head>

22

これは行う必要があります:

xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);

5
これevalが問題です。Crockfordから、「eval悪です。このeval関数はJavaScriptの最も誤用されている機能です。回避してください。evalエイリアスがあります。Functionコンストラクタを使用しないでください。文字列をsetTimeoutやに渡さないでくださいsetInterval。」彼の「JavaScript:The Good Parts」を読んでいない場合は、今すぐ出かけましょう。あなたはしますそれを後悔していません。
MattDMo 2013年

13
@MattDMo「誰かがそれが悪かったと言った」は本当に議論ではありません。
ケーシー

4
@emodendroket ダグラス・クロックフォードが誰であるかを知らない人だと思います。
MattDMo

13
@MattDMo私は彼が誰であるかを完全に知っていますが、彼は神ではなく人間です。
ケーシー

2
@tggagne:クロスドメインで機能させるにはどうすればよいですか?(からスクリプトを読み込んでいますhttp://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStuff/userjs/aagmfunctions.js
user2284570

21

または、実行時に含めるのではなく、スクリプトを使用してアップロード前に連結します。

私はスプロケットを使用しています(他にあるかどうかはわかりません)。JavaScriptコードを個別のファイルで作成し、Sprocketsエンジンで処理されるコメントをインクルードとして含めます。開発の場合、ファイルを順番にインクルードし、本番の場合はマージすることができます...

以下も参照してください。


BrowserifyはSprocketsよりもはるかに人気があります。
Dan Dascalescu、2015

18

単純な問題がありましたが、この質問への回答に困惑しました。

あるJavaScriptファイル(myvariables.js)で定義された変数(myVar1)を別のJavaScriptファイル(main.js)で使用する必要がありました。

このために私は以下のようにしました:

JavaScriptコードをHTMLファイルに正しい順序でロードします。最初にmyvariables.js、次にmain.jsです。

<html>
    <body onload="bodyReady();" >

        <script src="myvariables.js" > </script>
        <script src="main.js" > </script>

        <!-- Some other code -->
    </body>
</html>

ファイル:myvariables.js

var myVar1 = "I am variable from myvariables.js";

ファイル:main.js

// ...
function bodyReady() {
    // ...
    alert (myVar1);    // This shows "I am variable from myvariables.js", which I needed
    // ...
}
// ...

ご覧のとおり、あるJavaScriptファイルの変数を別のJavaScriptファイルで使用していましたが、別のJavaScriptファイルに含める必要はありませんでした。最初のJavaScriptファイルが2番目のJavaScriptファイルの前に読み込まれ、最初のJavaScriptファイルの変数が2番目のJavaScriptファイルで自動的にアクセスできることを確認する必要があるだけです。

これは私の日を救った。これがお役に立てば幸いです。


この答えの問題は、それがのようなものではないということですimport。あるjsファイルから別のjsファイルにデータを取得するには、HTMLファイルが必要です。
Cannicide

とても本当です。それが他のいくつかの答えがそれを解決策として持っているものです。しかし、私は2つのJSファイルを持っていました。1つは他のJSの変数を使用する必要があります。node.js、next.js、express.jsなどがないため、インポートまたは要求は機能せず、単純な.jsファイルしかありませんでした。
Manohar Reddy Poreddy

しかし理解できるのは、実際には、HTMLファイルを使用して変数にアクセスするだけでなく、別のファイル自体の中にJavaScriptファイルをインポートすることです。たとえば、ボタンの機能を作成していて、クリック処理用、ホバー処理用、他の2つのコールバック用の3つの異なるjsファイルを使用するとします。他の2つのjsを3番目のjs自体にインポートすると、<script>タグが1つだけになると便利です。これは組織化に役立ちます。この答えは単に質問が求めていたものではなく、この文脈では理想的ではありません。
Cannicide

問題の解決策を検索したところ、正しい方法で検索しましたが、Googleはこれが正しいページであると判断したため、ここに移動しました。だから私はここに私の答えを書きました。上記の15の賛成票があるため、私は正しかったように見えます。他の人の時間を無駄にしないために、私は私のシナリオを明確に始めました-HTMLコードを最初に置きました-あなたが返信し、htmlはあなたのシナリオではないと言ったので、助けになったように見えます。それが明らかになることを願っています。
Manohar Reddy Poreddy

はい-実際、一部の人々が少し異なる問題を検索したようですが、これが解決策であり、これを見つけました。これは必ずしもこの質問に対する答えではありませんが、間違いなく、別の同様の質問に対する答えです。そのため、この回答を探していた人を助けるため、ここにこの回答があっても問題ありません。その返信をありがとう、それはそれを明確にした。
Cannicide

16

Webワーカーを使用していて、ワーカーのスコープに追加のスクリプトを含めたい場合、headタグへのスクリプトの追加などについて提供されている他の回答は機能しません。

幸い、Webワーカーには独自のimportScripts機能があります。これはWebワーカーのスコープ内のグローバル関数であり、仕様の一部であるため、ブラウザー自体にネイティブです。

または、質問に対する2番目に投票数の多い回答がハイライトされているためRequireJSはWebワーカー内にスクリプトを含めることも処理できますimportScriptsそれ自体を呼び出す可能性がありますが、他のいくつかの便利な機能があります)。


16

スクリプトが既にロードされているかどうかを確認する最新の言語では、次のようになります。

function loadJs(url){
  return new Promise( (resolve, reject) => {
    if (document.querySelector(`head > script[src="${src}"]`) !== null) return resolve()
    const script = document.createElement("script")
    script.src = url
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  });
}

使用法(非同期/待機):

try { await loadJs("https://.../script.js") } 
catch(error) {console.log(error)}

または

await loadJs("https://.../script.js").catch(err => {})

使用法(約束):

loadJs("https://.../script.js").then(res => {}).catch(err => {})

いいね。良い解決策。
Naftali別名Neal

簡潔で、ES5のみが必要であり、正式にコールバックすることをエレガントに回避します。ドミトリーありがとう!
ユーレカ

うわー、サーバーなしでブラウザで動作します。pi.js =単にvar pi = 3.14。loadJS()関数を呼び出すloadJs("pi.js").then(function(){ console.log(pi); });
zipzit 2017年

14

@importCSSのようなJavaScriptインポートを実現するための構文は、特殊な.mixファイルタイプを介してMixtureなどのツールを使用して可能です(ここを参照)。私は知りませんが、アプリケーションは前述の方法の1つを内部的に使用するだけだと思います。

.mixファイルに関するMixtureドキュメントから:

ミックスファイルは、単純に.jsまたは.cssファイルで、.mixが付いています。ファイル名。ミックスファイルは、通常のスタイルまたはスクリプトファイルの機能を拡張するだけで、インポートおよび結合を可能にします。

.mix複数の.jsファイルを1つに結合するサンプルファイルを次に示します。

// scripts-global.mix.js
// Plugins - Global

@import "global-plugins/headroom.js";
@import "global-plugins/retina-1.1.0.js";
@import "global-plugins/isotope.js";
@import "global-plugins/jquery.fitvids.js";

Mixtureはこれをscripts-global.js縮小バージョン(scripts-global.min.js)として出力します。

注:フロントエンド開発ツールとして使用する以外は、私はMixtureとは一切関係ありません。私は見たときにこの質問に出くわしました.mixは、(Mixtureボイラープレートの1つにある)JavaScriptファイルが動作て、少し混乱していました(「これは可能ですか?」と私は思いました)。それから、それはアプリケーション固有のファイルタイプであることに気付きました(やや残念、同意した)。それにもかかわらず、知識は他の人に役立つかもしれないと考えました。

更新:Mixtureは無料です(オフライン)。

更新:Mixtureは廃止されました。古い混合リリースはまだ利用可能です


これがノードモジュールである場合、これは素晴らしいことです。
b01

@ b01挑戦のように聞こえます;)私に時間があった場合のみ...おそらく誰か他の人がしますか?
Isaac Gregson


13

私の通常の方法は:

var require = function (src, cb) {
    cb = cb || function () {};

    var newScriptTag = document.createElement('script'),
        firstScriptTag = document.getElementsByTagName('script')[0];
    newScriptTag.src = src;
    newScriptTag.async = true;
    newScriptTag.onload = newScriptTag.onreadystatechange = function () {
        (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') && (cb());
    };
    firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag);
}

それはうまく機能し、ページの再読み込みを使用しません。私はAJAXメソッド(他の答えの1つ)を試しましたが、私にはうまく機能しないようです。

好奇心の強い人のためにコードがどのように機能するかを次に説明します。基本的に、URLの(最初のタグの後に)新しいスクリプトタグを作成します。残りのコードをブロックしないように非同期モードに設定しますが、readyState(ロードされるコンテンツの状態)が 'loaded'に変化するとコールバックを呼び出します。


13

これらの答えは素晴らしいですが、スクリプトのロードが存在して以来存在してきた簡単な「解決策」があり、ほとんどの人のユースケースの99.999%をカバーします。必要なスクリプトの前に、必要なスクリプトを含めてください。ほとんどのプロジェクトでは、必要なスクリプトとその順序を決定するのに時間がかかりません。

<!DOCTYPE HTML>
<html>
    <head>
        <script src="script1.js"></script>
        <script src="script2.js"></script>
    </head>
    <body></body>
</html>

script2がscript1を必要とする場合、これは実際にこのようなことをする最も簡単な方法です。ほぼすべてのケースに当てはまる最も明白で単純な答えであるため、誰もこれを取り上げていないことに非常に驚いています。


1
私も含めて多くの人が推測しているように、動的なファイル名が必要です。
Stuart McIntyre

1
その場合は@StuartMcIntyreを実行時にスクリプトタグのsrc属性を設定し、onloadイベントを待ちます(もちろん、この場合は2019の方が優れた解決策があります)。
KthProg

12

JavaScriptでモジュールスクリプトをインポート/インクルードする作業を自動化する簡単なモジュールを書きました。コードの詳細な説明については、ブログ投稿JavaScript require / import / includeモジュールを参照してください。

// ----- USAGE -----

require('ivar.util.string');
require('ivar.net.*');
require('ivar/util/array.js');
require('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');

ready(function(){
    //Do something when required scripts are loaded
});

    //--------------------

var _rmod = _rmod || {}; //Require module namespace
_rmod.LOADED = false;
_rmod.on_ready_fn_stack = [];
_rmod.libpath = '';
_rmod.imported = {};
_rmod.loading = {
    scripts: {},
    length: 0
};

_rmod.findScriptPath = function(script_name) {
    var script_elems = document.getElementsByTagName('script');
    for (var i = 0; i < script_elems.length; i++) {
        if (script_elems[i].src.endsWith(script_name)) {
            var href = window.location.href;
            href = href.substring(0, href.lastIndexOf('/'));
            var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length);
            return url.substring(href.length+1, url.length);
        }
    }
    return '';
};

_rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark
                                                   //the root directory of your library, any library.


_rmod.injectScript = function(script_name, uri, callback, prepare) {

    if(!prepare)
        prepare(script_name, uri);

    var script_elem = document.createElement('script');
    script_elem.type = 'text/javascript';
    script_elem.title = script_name;
    script_elem.src = uri;
    script_elem.async = true;
    script_elem.defer = false;

    if(!callback)
        script_elem.onload = function() {
            callback(script_name, uri);
        };
    document.getElementsByTagName('head')[0].appendChild(script_elem);
};

_rmod.requirePrepare = function(script_name, uri) {
    _rmod.loading.scripts[script_name] = uri;
    _rmod.loading.length++;
};

_rmod.requireCallback = function(script_name, uri) {
    _rmod.loading.length--;
    delete _rmod.loading.scripts[script_name];
    _rmod.imported[script_name] = uri;

    if(_rmod.loading.length == 0)
        _rmod.onReady();
};

_rmod.onReady = function() {
    if (!_rmod.LOADED) {
        for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){
            _rmod.on_ready_fn_stack[i]();
        });
        _rmod.LOADED = true;
    }
};

_.rmod = namespaceToUri = function(script_name, url) {
    var np = script_name.split('.');
    if (np.getLast() === '*') {
        np.pop();
        np.push('_all');
    }

    if(!url)
        url = '';

    script_name = np.join('.');
    return  url + np.join('/')+'.js';
};

//You can rename based on your liking. I chose require, but it
//can be called include or anything else that is easy for you
//to remember or write, except "import", because it is reserved
//for future use.
var require = function(script_name) {
    var uri = '';
    if (script_name.indexOf('/') > -1) {
        uri = script_name;
        var lastSlash = uri.lastIndexOf('/');
        script_name = uri.substring(lastSlash+1, uri.length);
    } 
    else {
        uri = _rmod.namespaceToUri(script_name, ivar._private.libpath);
    }

    if (!_rmod.loading.scripts.hasOwnProperty(script_name)
     && !_rmod.imported.hasOwnProperty(script_name)) {
        _rmod.injectScript(script_name, uri,
            _rmod.requireCallback,
                _rmod.requirePrepare);
    }
};

var ready = function(fn) {
    _rmod.on_ready_fn_stack.push(fn);
};

10

このスクリプトは、JavaScriptファイルを他の<script>タグの先頭に追加します。

(function () {
    var li = document.createElement('script'); 
    li.type = 'text/javascript'; 
    li.src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"; 
    li.async=true; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(li, s);
})();

10

Head.jsあります。対処は非常に簡単です。

head.load("js/jquery.min.js",
          "js/jquery.someplugin.js",
          "js/jquery.someplugin.css", function() {
  alert("Everything is ok!");
});

ご覧のとおり、これはRequire.jsよりも簡単で、jQueryの$.getScriptメソッドと同じくらい便利です。また、条件付き読み込み、機能検出などの高度な機能も備えています


10

この質問には多くの潜在的な答えがあります。私の答えは明らかにそれらの数に基づいています。これは私がすべての答えを読んだ後に結局得たものです。

$.getScriptロードが完了したときにコールバックを必要とする他のソリューションの問題は、それを使用して互いに依存している複数のファイルがある場合、すべてのスクリプトがいつロードされたかを知る方法がないことです(それらがネストされると)。複数のファイルで)。

例:

file3.js

var f3obj = "file3";

// Define other stuff

file2.js:

var f2obj = "file2";
$.getScript("file3.js", function(){

    alert(f3obj);

    // Use anything defined in file3.
});

file1.js:

$.getScript("file2.js", function(){
    alert(f3obj); //This will probably fail because file3 is only guaranteed to have loaded inside the callback in file2.
    alert(f2obj);

    // Use anything defined in the loaded script...
});

Ajaxを同期して実行するように指定したり、XMLHttpRequestを使用したりできると言ったのはあなたの言うとおりです。が、現在の傾向は同期リクエストを廃止する傾向にあるため、現在または将来、完全なブラウザーサポートが得られない可能性があります。

を使用$.whenして遅延オブジェクトの配列をチェックすることもできますが、これはすべてのファイルでこれを$.when実行しており、コールバックが実行されたときではなくfile2 が実行されるとすぐにfile2がロードされたと見なされるため、file1はfile3がロードされる前に実行を継続します。これにはまだ同じ問題があります。

前進ではなく後退することにしました。ありがとうdocument.writeln。私はそれがタブーであることを知っていますが、それが正しく使用されている限り、これはうまく機能します。簡単にデバッグでき、DOMに正しく表示され、依存関係が正しく読み込まれる順序を確認できるコードが作成されます。

もちろん$( "body")。append()を使用できますが、その後は正しくデバッグできなくなります。

注:これは、ページの読み込み中にのみ使用する必要があります。そうしないと、空白の画面が表示されます。つまり、常にdocument.readyの前/外に配置します。ページがクリックイベントなどで読み込まれた後、これを使用したテストはしていませんが、失敗することはほぼ間違いありません。

私はjQueryを拡張するアイデアが好きでしたが、明らかにそうする必要はありません。

を呼び出す前にdocument.writeln、すべてのスクリプト要素を評価して、スクリプトがまだ読み込まれていないことを確認します。

document.readyイベントが実行されるまで、スクリプトは完全には実行されないと思います。(使用document.readyは必須ではないことはわかっていますが、多くの人が使用しており、これを扱うことは安全策です。)

追加のファイルがロードされると、document.readyコールバックが間違った順序で実行されます。スクリプトが実際にロードされたときにこれに対処するために、スクリプトをインポートしたスクリプト自体が再インポートされ、実行が停止します。これにより、元のファイルは、document.readyインポートするスクリプトからのコールバックが実行されるようになります。

このアプローチの代わりにjQueryを変更することもできますがreadyList、これはより悪い解決策のように見えました。

解決:

$.extend(true,
{
    import_js : function(scriptpath, reAddLast)
    {
        if (typeof reAddLast === "undefined" || reAddLast === null)
        {
            reAddLast = true; // Default this value to true. It is not used by the end user, only to facilitate recursion correctly.
        }

        var found = false;
        if (reAddLast == true) // If we are re-adding the originating script we do not care if it has already been added.
        {
            found = $('script').filter(function () {
                return ($(this).attr('src') == scriptpath);
            }).length != 0; // jQuery to check if the script already exists. (replace it with straight JavaScript if you don't like jQuery.
        }

        if (found == false) {

            var callingScriptPath = $('script').last().attr("src"); // Get the script that is currently loading. Again this creates a limitation where this should not be used in a button, and only before document.ready.

            document.writeln("<script type='text/javascript' src='" + scriptpath + "'></script>"); // Add the script to the document using writeln

            if (reAddLast)
            {
                $.import_js(callingScriptPath, false); // Call itself with the originating script to fix the order.
                throw 'Readding script to correct order: ' + scriptpath + ' < ' + callingScriptPath; // This halts execution of the originating script since it is getting reloaded. If you put a try / catch around the call to $.import_js you results will vary.
            }
            return true;
        }
        return false;
    }
});

使用法:

File3:

var f3obj = "file3";

// Define other stuff
$(function(){
    f3obj = "file3docready";
});

ファイル2:

$.import_js('js/file3.js');
var f2obj = "file2";
$(function(){
    f2obj = "file2docready";
});

ファイル1:

$.import_js('js/file2.js');

// Use objects from file2 or file3
alert(f3obj); // "file3"
alert(f2obj); // "file2"

$(function(){
    // Use objects from file2 or file3 some more.
    alert(f3obj); //"file3docready"
    alert(f2obj); //"file2docready"
});

これは、現在受け入れられている答えとまったく同じです。
カンニサイド2017

主な違いは、欠落している依存関係がある場合、依存関係のスクリプトタグが追加され、呼び出しファイルのスクリプトタグも追加され、実行を停止するエラーがスローされることです。これにより、スクリプトが正しい順序で処理および実行され、コールバックの必要がなくなります。したがって、依存スクリプトは、ネストをサポートしながら、呼び出しスクリプトの前に読み込まれて実行されます。
curlyhairedgenius 2017

「現在の傾向は同期リクエストを廃止する傾向にあるようです」に関して、これは多くの開発者がそれらを誤用し、ユーザーを不必要に待たせたためにのみ当てはまります。ただし、リクエストがIncludeステートメントのように自然に同期している場合は、単純な同期Ajaxで十分です。PHPの「サーバー」ファイルを実行して、JavaScriptの一部ではないファイルの読み取りなどの関数を同期的に実行する一般的なJavaScript拡張関数を作成しました。JavaScriptを使用してアプリを作成するときに非常に便利です。そのようなAjaxにはローカルWebサーバーは必要ありません。
David Spector

10

Javascriptでモジュールを実装する方法はいくつかあります。最も一般的なものを2つ示します。

ES6モジュール

ブラウザーはまだこの変調システムをサポートしていないため、この構文を使用するには、webpackなどのバンドラーを使用する必要があります。いずれにしても、バンドラーを使用する方が優れています。これにより、すべての異なるファイルを1つの(または関連する)ファイルに結合できるからです。これにより、各HTTPリクエストに付随するオーバーヘッドが伴うため、サーバーからクライアントへのファイルの配信が速くなります。したがって、全体的なHTTPリクエストを減らすことで、パフォーマンスが向上します。ES6モジュールの例を次に示します。

// main.js file

export function add (a, b) {
  return a + b;
}

export default function multiply (a, b) {
  return a * b;
}


// test.js file

import {add}, multiply from './main';   // for named exports between curly braces {export1, export2}
                                        // for default exports without {}

console.log(multiply(2, 2));  // logs 4

console.log(add(1, 2));  // logs 3

CommonJS(NodeJSで使用)

この変調システムはNodeJSで使用されます。基本的には、と呼ばれるオブジェクトにエクスポートを追加しますmodule.exports。その後、を介してこのオブジェクトにアクセスできますrequire('modulePath')。ここで重要なのは、これらのモジュールがキャッシュされていることを認識することです。そのためrequire()、特定のモジュールを2回実行すると、すでに作成されたモジュールが返されます。

// main.js file

function add (a, b) {
  return a + b;
}

module.exports = add;  // here we add our add function to the exports object


// test.js file

const add = require('./main'); 

console.log(add(1,2));  // logs 3

9

有用なJavaScriptプラグインのコレクションを維持する簡単な方法を探していたので、この質問に行きました。ここでいくつかの解決策を見た後、私はこれを思いつきました:

  1. 「plugins.js」(またはextensions.jsなどの任意のファイル)というファイルを設定します。プラグインファイルを1つのマスターファイルと一緒に保管します。

  2. plugins.jsには、pluginNames[]繰り返し処理されるというと呼ばれる配列があり、各プラグインのヘッドにタグをeach()追加し<script>ます

//set array to be updated when we add or remove plugin files
var pluginNames = ["lettering", "fittext", "butterjam", etc.];

//one script tag for each plugin
$.each(pluginNames, function(){
    $('head').append('<script src="js/plugins/' + this + '.js"></script>');
});
  1. 頭の中で1つのファイルだけを手動で呼び出します。
    <script src="js/plugins/plugins.js"></script>

だが:

すべてのプラグインが本来の方法でヘッドタグにドロップされますが、ページをクリックしたり更新したりしても、ブラウザによって常に実行されるわけではありません。

PHPインクルードでスクリプトタグを記述する方が信頼性が高いことがわかりました。あなたはそれを一度書くだけでよく、それはJavaScriptを使用してプラグインを呼び出すのと同じくらい多くの仕事です。


@will、あなたの解決策は私のものよりもはるかにきれいに見え、私が.append()を使用しているので、私のものを使用するとエラーが発生するのではないかと心配しています。これを使用するには、含めるプラグインファイルごとにその関数を1回呼び出すだけです。
rgb_life
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.