javascript - 関数 - js ファイル テキスト ファイル 読み込み




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

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

しかし、2015年(ES6)以来、JavaScriptは、 最新のブラウザでもサポートされているNode.jsのモジュールをインポートするための標準ES6モジュールを持っていました。

古いブラウザとの互換性のために、 buildツールおよび/またはtranspilationツールを使用できます。

ES6モジュール

ECMAScript(ES6)モジュールはv5.5からNode.jsで--experimental-modulesフラグを使用してサポートされてい--experimental-modules 。 含まれるすべてのファイルは、拡張子が.mjsなければなりません。

// module.mjs
export function hello() {
  return "Hello";
}
// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

ブラウザのECMAScriptモジュール

ブラウザーはsince Safari 10.1、Chrome 61、Firefox 60、およびEdge 16 since ECMAScriptモジュールを直接ロードする機能(Webpackが必要なツールはありません)をサポートしています

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

詳細はsince

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

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

<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で広く使用されており、 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を使用すると、バグ、ハッキング、セキュリティ問題の扉が開かれます。

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>タグをページのheadセクションの最後に追加しますsrc属性は、関数に最初のパラメータとして渡されるURLに設定されます。

これらのソリューションは両方とも、 JavaScript Madness:Dynamic Sc​​ript Loadingで議論され説明されています

スクリプト実行時の検出

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

これは、これらのトリックを直接使用すると、まだロードされているため、 ロードされるように依頼した後で、新しくロードされたコードを次の行に使用できなくなることを意味します。

たとえば、 my_lovely_script.jsmy_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.getElementsByTagName('head')[0];
    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構文の使用、古いブラウザの下位互換性の提供、ファイルの結合、コード分​​割などを行う

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


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

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

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

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

代わりに、 あなたの質問のハイライトに2番目に高い投票結果として 、 RequireJSはWeb Worker内のスクリプトを含むこともできます ( importScripts自体を呼び出す可能性がimportScriptsますが、その他の便利な機能がいくつかあります)。


あなたには良いニュースがあります。 すぐにJavaScriptコードを簡単に読み込むことができます。 JavaScriptコードのモジュールをインポートする標準的な方法になり、JavaScriptのコアの一部になります。

あなたは単にimport cond from 'cond.js';を書く必要がありimport cond from 'cond.js'; cond.jsファイルからcondという名前のマクロをロードします。

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

参照する:


ここでは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の場合は、それはあなたのために動作します。

headbodyはなく最初のscript要素を探す理由は、ブラウザによっては行方不明のものが作成されないことがあるためですが、 script要素があることが保証されていscript 。 詳しくはhttp://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/


これにより、

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

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

私はSprocketsを使用しています(私は他人がいるかどうかわかりません)。 別々のファイルにJavaScriptコードを作成し、Sprocketsエンジンで処理されるコメントをインクルードします。 開発のために、ファイルを順番に含めることができます。次に、プロダクション用にファイルをマージすることができます。

参照:


ステートメントの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;


現代の言語では、

function loadJs( url ){
  return new Promise( resolve => {
    const script = document.createElement( "script" );
    script.src = url;
    script.onload = resolve;
    document.head.appendChild( script );
  });
}

私の通常の方法は:

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'に変更されたときにコールバックを呼び出します。


私は簡単な問題を抱えていましたが、私はこの質問に対する回答に困惑しました。

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

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

HTMLファイルのJavaScriptコードを、正しい順序で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ファイルの前にロードされ、1番目のJavaScriptファイルの変数が2番目のJavaScriptファイルで自動的にアクセスできるようにするだけでした。

これは私の日を救った。 私はこれが役立つことを願っています


純粋なJavaScriptであれば、 document.writeを使うことができdocument.write

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

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

$.getScript("another_script.js");

jQuery使い方をよくする。準備完了イベントを遅らせるには、最初に呼び出します$.holdReady(true)。例(source):

$.holdReady(true);
$.getScript("myplugin.js", function() {
    $.holdReady(false);
});

Head.jsHead.jsます。対処が非常に簡単です:

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

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


JavaScriptファイルをインクルードするためにC#/ Javaに同様の言い回しを使用できるようにする関数を作成しました。私はもう1つの JavaScriptファイルの内部からでも少し試しましたが、うまくいくようです。最後には少し "魔法"のためにjQueryが必要です。

私はこのコードをスクリプトディレクトリのルートにあるファイルに入れます(名前は付けましたglobal.jsが、あなたは何でも構いません)。間違っていない限り、jQueryは指定されたページ上で唯一必要なスクリプトでなければなりません。私がそれをやったやり方に問題があるかもしれないし、そうでないかもしれません;あなた自身のリスクで使用してくださいyadda yaddaあなたがyadda yaddaを何かねじつけるなら私は責任がありません:

/**
* @fileoverview This file stores global functions that are required by other libraries.
*/

if (typeof(jQuery) === 'undefined') {
    throw 'jQuery is required.';
}

/** Defines the base script directory that all .js files are assumed to be organized under. */
var BASE_DIR = 'js/';

/**
* Loads the specified file, outputting it to the <head> HTMLElement.
*
* This method mimics the use of using in C# or import in Java, allowing
* JavaScript files to "load" other JavaScript files that they depend on
* using a familiar syntax.
*
* This method assumes all scripts are under a directory at the root and will
* append the .js file extension automatically.
*
* @param {string} file A file path to load using C#/Java "dot" syntax.
*
* Example Usage:
* imports('core.utils.extensions');
* This will output: <script type="text/javascript" src="/js/core/utils/extensions.js"></script>
*/
function imports(file) {
    var fileName = file.substr(file.lastIndexOf('.') + 1, file.length);

    // Convert PascalCase name to underscore_separated_name
    var regex = new RegExp(/([A-Z])/g);
    if (regex.test(fileName)) {
        var separated = fileName.replace(regex, ",$1").replace(',', '');
        fileName = separated.replace(/[,]/g, '_');
    }

    // Remove the original JavaScript file name to replace with underscore version
    file = file.substr(0, file.lastIndexOf('.'));

    // Convert the dot syntax to directory syntax to actually load the file
    if (file.indexOf('.') > 0) {
        file = file.replace(/[.]/g, '/');
    }

    var src = BASE_DIR + file + '/' + fileName.toLowerCase() + '.js';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;

    $('head').find('script:last').append(script);
}

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

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

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

  1. "plugins.js"(またはextensions.jsまたはあなたのもの)というファイルを設定します。その1つのマスターファイルとともにプラグインファイルを保管してください。

  2. plugins.jsには、each()を繰り返し処理するpluginNames [] "という配列があり、各プラグインの先頭にタグを追加します

    //プラグインファイルを追加または削除するときに配列を更新するように設定するvar pluginNames = ["lettering"、 "fittext"、 "butterjam"など; //プラグインごとに1つのスクリプトタグ$ .each(pluginNames、function(){$( 'head')。append( '');});

  3. 手動であなたの頭の中の1つのファイルを呼び出す:
    <script src="js/plugins/plugins.js"></script>

私は、プラグインのすべてが頭のタグに落ちてしまったにもかかわらず、あなたがページをクリックしたり、リフレッシュしたりするときにブラウザによって常に実行されているとは限らないことに気付きました。

PHPのインクルードにスクリプトタグを書くだけで、より信頼できることがわかりました。JavaScriptを使用してプラグインを呼び出すのと同じくらい多くの作業が必要です。


私は、JavaScriptでモジュールスクリプトをインポート/実行する作業を自動化するシンプルなモジュールを作成しました。コードの詳細については、JavaScript post / JavaScript / require / 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);
};




include