it-swarm.asia

Bagaimana cara saya memasukkan file JavaScript ke file JavaScript lain?

Apakah ada sesuatu dalam JavaScript yang mirip dengan @import di CSS yang memungkinkan Anda untuk memasukkan file JavaScript ke dalam file JavaScript lain?

4481
Alec Smart

Versi lama JavaScript tidak mengimpor, memasukkan, atau mengharuskan, begitu banyak pendekatan berbeda untuk masalah ini telah dikembangkan.

Tetapi sejak 2015 (ES6), JavaScript telah memiliki standar modul ES6 untuk mengimpor modul di Node.js, yang juga didukung oleh sebagian besar peramban modern .

Untuk kompatibilitas dengan browser yang lebih lama, alat build dan/atau transpilation dapat digunakan.

Modul ES6

Modul ECMAScript (ES6) telah didukung di Node.js sejak v8.5, dengan flag --experimental-modules. Semua file yang terlibat harus memiliki ekstensi .mjs.

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

Modul ECMAScript di browser

Browser telah mendapat dukungan untuk memuat modul ECMAScript secara langsung (tidak diperlukan alat seperti Webpack) sejak Safari 10.1, Chrome 61, Firefox 60, dan Edge 16. Periksa dukungan saat ini di caniuse .

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

Baca lebih lanjut di https://jakearchibald.com/2017/es-modules-in-browsers/

Impor dinamis di browser

Impor dinamis membiarkan skrip memuat skrip lain sesuai kebutuhan:

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

Baca selengkapnya di https://developers.google.com/web/updates/2017/11/dynamic-import

Node.js membutuhkan

Gaya lama mengimpor modul, masih banyak digunakan di Node.js, adalah module.exports/membutuhkan sistem.

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

Ada cara lain untuk JavaScript untuk memasukkan konten JavaScript eksternal di browser yang tidak memerlukan preprocessing.

Memuat AJAX

Anda dapat memuat skrip tambahan dengan panggilan AJAX dan kemudian menggunakan eval untuk menjalankannya. Ini adalah cara yang paling mudah, tetapi terbatas pada domain Anda karena model keamanan JavaScript sandbox. Menggunakan eval juga membuka pintu untuk masalah bug, peretasan, dan keamanan.

Ambil Memuat

Seperti Impor Dinamis, Anda dapat memuat satu atau banyak skrip dengan panggilan fetch menggunakan janji untuk mengontrol urutan eksekusi untuk dependensi skrip menggunakan perpustakaan Fetch Inject :=:

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 Sedang Memuat

Pustaka jQuery menyediakan fungsionalitas pemuatan dalam satu baris :

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

Memuat Script Dinamis

Anda dapat menambahkan tag skrip dengan URL skrip ke dalam HTML. Untuk menghindari overhead jQuery, ini adalah solusi ideal.

Skrip bahkan dapat berada di server yang berbeda. Selanjutnya, browser mengevaluasi kode. Tag <script> dapat disuntikkan ke halaman web <head>, atau disisipkan tepat sebelum tag </body> penutup.

Berikut adalah contoh bagaimana ini bisa bekerja:

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

Fungsi ini akan menambahkan tag <script> baru ke akhir bagian kepala halaman, di mana atribut src diatur ke URL yang diberikan ke fungsi sebagai parameter pertama.

Kedua solusi ini dibahas dan diilustrasikan dalam JavaScript Madness: Dynamic Script Loading .

Mendeteksi ketika skrip telah dieksekusi

Sekarang, ada masalah besar yang harus Anda ketahui. Melakukan hal itu menyiratkan bahwa Anda memuat kode dari jarak jauh . Browser web modern akan memuat file dan terus mengeksekusi skrip Anda saat ini karena mereka memuat semuanya secara tidak sinkron untuk meningkatkan kinerja. (Ini berlaku untuk metode jQuery dan metode pemuatan skrip dinamis manual.)

Ini berarti bahwa jika Anda menggunakan trik ini secara langsung, Anda tidak akan dapat menggunakan kode yang baru Anda muatkan pada baris berikutnya setelah Anda memintanya untuk dimuat , karena masih akan tetap pemuatan.

Misalnya: my_lovely_script.js berisi 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

Kemudian Anda memuat kembali halaman yang sedang dipukul F5. Dan itu berhasil! Membingungkan ...

Jadi apa yang harus dilakukan?

Nah, Anda dapat menggunakan retasan yang disarankan penulis di tautan yang saya berikan kepada Anda. Singkatnya, untuk orang-orang yang terburu-buru, dia menggunakan acara untuk menjalankan fungsi panggilan balik ketika skrip dimuat. Jadi Anda bisa meletakkan semua kode menggunakan pustaka jarak jauh di fungsi panggilan balik. Sebagai contoh:

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

Kemudian Anda menulis kode yang ingin Anda gunakan SETELAH skrip dimuat dalam fungsi lambda :

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

Kemudian Anda jalankan semua itu:

loadScript("my_lovely_script.js", myPrettyCode);

Perhatikan bahwa skrip dapat dijalankan setelah DOM dimuat, atau sebelumnya, tergantung pada browser dan apakah Anda menyertakan baris script.async = false;. Ada artikel hebat tentang pemuatan Javascript secara umum yang membahas hal ini.

Penggabungan/Pemrosesan Kode Sumber

Seperti disebutkan di bagian atas jawaban ini, banyak pengembang menggunakan alat build/transpilation (s) seperti Parcel, Webpack, atau Babel dalam proyek mereka, memungkinkan mereka untuk menggunakan sintaks JavaScript yang akan datang, memberikan kompatibilitas ke belakang untuk browser lama, menggabungkan file, memperkecil, melakukan pemecahan kode dll.

4044
e-satis

Jika ada yang mencari sesuatu yang lebih maju, coba RequireJS . Anda akan mendapatkan manfaat tambahan seperti manajemen dependensi, konkurensi yang lebih baik, dan menghindari duplikasi (yaitu, mengambil skrip lebih dari sekali).

Anda dapat menulis file JavaScript di "modul" dan kemudian merujuknya sebagai dependensi di skrip lain. Atau Anda dapat menggunakan RequireJS sebagai solusi "go get this script" sederhana.

Contoh:

Tentukan dependensi sebagai modul:

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

implementasi.js adalah file JavaScript "utama" Anda yang bergantung pada some-dependency.js

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

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

Kutipan dari GitHub README:

Mengharuskan JS memuat file JavaScript biasa dan juga lebih banyak modul. Ini dioptimalkan untuk penggunaan di dalam browser, termasuk di Web Worker, tetapi dapat digunakan di lingkungan JavaScript lain, seperti Badak dan Node. Ini mengimplementasikan API Modul Asynchronous.

RequireJS menggunakan tag skrip biasa untuk memuat modul/file, jadi seharusnya memungkinkan untuk debugging mudah. Ini dapat digunakan hanya untuk memuat .__ yang ada. File JavaScript, jadi Anda dapat menambahkannya ke proyek yang ada tanpa harus menulis ulang file JavaScript Anda.

... 

533
John Strickler

Sebenarnya adalah cara untuk memuat file JavaScript bukan secara tidak serempak, sehingga Anda dapat menggunakan fungsi-fungsi yang termasuk dalam file yang baru Anda muat setelah memuatnya, dan saya pikir ini berfungsi di semua browser.

Anda perlu menggunakan jQuery.append() pada elemen <head> halaman Anda, yaitu:

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

Namun, metode ini juga memiliki masalah: jika terjadi kesalahan pada file JavaScript yang diimpor, Firebug (dan juga Firefox Error Console dan Tools Developer Chrome juga) akan melaporkan tempatnya secara salah, yang merupakan masalah besar jika Anda menggunakan Firebug untuk melacak kesalahan JavaScript banyak (saya lakukan). Firebug tidak tahu tentang file yang baru dimuat karena suatu alasan, jadi jika terjadi kesalahan pada file itu, ia melaporkan bahwa itu terjadi di file utama HTML Anda, dan Anda akan kesulitan menemukan yang sebenarnya alasan kesalahan.

Tetapi jika itu bukan masalah bagi Anda, maka metode ini akan berhasil.

Saya sebenarnya telah menulis plugin jQuery bernama $ .import_js () yang menggunakan metode ini:

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

Jadi yang perlu Anda lakukan untuk mengimpor JavaScript adalah:

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

Saya juga membuat tes sederhana untuk ini di Contoh .

Ini termasuk file main.js di HTML utama dan kemudian script di main.js menggunakan $.import_js() untuk mengimpor file tambahan yang disebut included.js, yang mendefinisikan fungsi ini:

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

Dan tepat setelah menyertakan included.js, fungsi hello() dipanggil, dan Anda mendapatkan peringatan.

(Jawaban ini sebagai respons terhadap komentar e-satis ').

173
Kipras

Cara lain, yang menurut saya jauh lebih bersih, adalah dengan membuat permintaan Ajax yang sinkron alih-alih menggunakan tag <script>. Yang juga mencakup Node.js handle.

Berikut ini contoh menggunakan 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);
        }
    });
}

Anda kemudian dapat menggunakannya dalam kode Anda karena biasanya Anda akan menggunakan sertakan:

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

Dan dapat memanggil fungsi dari skrip yang diperlukan di baris berikutnya:

subscript.doSomethingCool(); 
138
Ariel

Ada kabar baik untuk Anda. Segera Anda akan dapat memuat kode JavaScript dengan mudah. Ini akan menjadi cara standar untuk mengimpor modul kode JavaScript dan akan menjadi bagian dari inti JavaScript itu sendiri. 

Anda cukup menulis import cond from 'cond.js'; untuk memuat makro bernama cond dari file cond.js.

Jadi Anda tidak harus bergantung pada kerangka JavaScript apa pun juga tidak harus secara eksplisit membuat Ajax panggilan.

Mengacu pada:

90
Imdad

Dimungkinkan untuk secara dinamis menghasilkan tag JavaScript dan menambahkannya ke dokumen HTML dari dalam kode JavaScript lainnya. Ini akan memuat file JavaScript yang ditargetkan.

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

Pernyataan import dalam ECMAScript 6.

Sintaksis

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;
62
draupnie

Mungkin Anda dapat menggunakan fungsi ini yang saya temukan di halaman ini Bagaimana cara saya memasukkan file JavaScript ke file 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)
}

Berikut adalah sinkron versi tanpa 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);
}

Perhatikan bahwa untuk mendapatkan lintas-domain yang berfungsi ini, server perlu mengatur header allow-Origin sebagai responsnya.

47
heinob

Saya baru saja menulis kode JavaScript ini (menggunakan Prototipe untuk DOM manipulasi):

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

Pemakaian:

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

Intisari: http://Gist.github.com/284442 .

43
nornagon

Berikut adalah versi umum tentang cara Facebook melakukannya untuk tombol Suka di mana-mana:

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

Jika itu berfungsi untuk Facebook, itu akan bekerja untuk Anda.

Alasan mengapa kami mencari elemen script pertama alih-alih head atau body adalah karena beberapa browser tidak membuat satu jika hilang, tetapi kami dijamin memiliki elemen script - yang ini. Baca lebih lanjut di http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/ .

36
Dan Dascalescu

Jika Anda ingin menggunakan JavaScript murni, Anda dapat menggunakan document.write.

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

Jika Anda menggunakan perpustakaan jQuery, Anda dapat menggunakan metode $.getScript.

$.getScript("another_script.js");
31
Venu immadi

Anda juga dapat merakit skrip Anda menggunakan PHP :

File 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
24
Calmarius

Sebagian besar solusi yang ditampilkan di sini menyiratkan pemuatan dinamis. Saya sedang mencari kompiler yang merakit semua file tergantung ke dalam file output tunggal. Sama seperti Kurang / Sass preprosesor berurusan dengan CSS @import at-rule. Karena saya tidak menemukan sesuatu yang layak seperti ini, saya menulis alat sederhana untuk menyelesaikan masalah ini.

Jadi di sini adalah kompiler, https://github.com/dsheiko/jsic , yang menggantikan $import("file-path") dengan konten file yang diminta dengan aman. Berikut ini adalah Grunt plugin: https://github.com/dsheiko/grunt-jsic .

Pada cabang master jQuery, mereka hanya menggabungkan file sumber atom menjadi satu mulai dengan intro.js dan berakhir dengan outtro.js. Itu tidak cocok untuk saya karena tidak memberikan fleksibilitas pada desain kode sumber. Lihat cara kerjanya dengan jsic:

src/main.js

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

src/Form/Input/Tel.js

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

Sekarang kita dapat menjalankan kompiler:

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

Dan dapatkan file gabungannya

build/main.js

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

Jika niat Anda untuk memuat file JavaScript adalah menggunakan fungsi dari file yang diimpor/disertakan , Anda juga dapat menentukan objek global dan mengatur fungsi sebagai item objek. Contohnya:

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

Anda hanya perlu berhati-hati saat memasukkan skrip ke dalam file HTML. Urutannya harus seperti di bawah ini:

<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>
20
Adem İlhan

Ini harus dilakukan:

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

Atau alih-alih termasuk pada saat dijalankan, gunakan skrip untuk menyatukan sebelum mengunggah.

Saya menggunakan Sprockets (Saya tidak tahu apakah ada orang lain). Anda membuat kode JavaScript dalam file yang terpisah dan memasukkan komentar yang diproses oleh mesin Sprockets sebagai termasuk. Untuk pengembangan Anda dapat memasukkan file secara berurutan, kemudian untuk produksi untuk menggabungkannya ...

Lihat juga:

17
JMawer

Jika Anda menggunakan Pekerja Web dan ingin menyertakan skrip tambahan dalam lingkup pekerja, jawaban lain yang diberikan tentang menambahkan skrip ke tag head, dll. Tidak akan berfungsi untuk Anda.

Untungnya, Pekerja Web memiliki fungsi importScripts mereka sendiri yang merupakan fungsi global dalam lingkup Pekerja Web, asli dari browser itu sendiri karena adalah bagian dari spesifikasi .

Sebagai alternatif, sebagai jawaban pilihan tertinggi kedua untuk pertanyaan Anda menyoroti , RequireJS juga dapat menangani termasuk skrip di dalam Pekerja Web (kemungkinan memanggil importScripts sendiri, tetapi dengan beberapa fitur bermanfaat lainnya).

14
Turnerj

Saya punya masalah sederhana, tetapi saya bingung dengan jawaban atas pertanyaan ini.

Saya harus menggunakan variabel (myVar1) yang didefinisikan dalam satu file JavaScript (myvariables.js) di file JavaScript lain (main.js).

Untuk ini saya lakukan seperti di bawah ini:

Memuat kode JavaScript dalam file HTML, dalam urutan yang benar, myvariables.js terlebih dahulu, kemudian main.js:

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

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

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

File: myvariables.js

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

File: main.js

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

Seperti yang Anda lihat, saya telah menggunakan variabel dalam satu file JavaScript di file JavaScript lain, tapi saya tidak perlu memasukkan satu ke yang lain. Saya hanya perlu memastikan bahwa file JavaScript pertama dimuat sebelum file JavaScript kedua, dan, variabel file JavaScript pertama dapat diakses di file JavaScript kedua, secara otomatis.

Ini menyelamatkan hari saya. Saya harap ini membantu.

13

Sintaks @import untuk mencapai pengimporan JavaScript seperti CSS dimungkinkan menggunakan alat seperti Campuran melalui jenis file .mix khusus mereka (lihat sini ). Saya membayangkan aplikasi hanya menggunakan salah satu metode yang disebutkan di atas secara internal, meskipun saya tidak tahu. 

Dari dokumentasi Campuran pada file .mix

File campuran hanyalah file .js atau .css dengan .mix. dalam nama file. SEBUAH file campuran hanya memperluas fungsionalitas gaya normal atau file skrip dan memungkinkan Anda untuk mengimpor dan menggabungkan.

Berikut adalah contoh file .mix yang menggabungkan beberapa file .js menjadi satu:

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

Campuran menghasilkan ini sebagai scripts-global.js dan juga sebagai versi yang diperkecil (scripts-global.min.js).

Catatan: Saya sama sekali tidak berafiliasi dengan Mixture, selain menggunakannya sebagai alat pengembangan front-end. Saya menemukan pertanyaan ini setelah melihat file JavaScript .mix sedang beraksi (di salah satu pelat boiler) dan agak bingung karenanya ("Anda bisa melakukan ini?" Saya berpikir sendiri). Kemudian saya menyadari bahwa itu adalah tipe file khusus aplikasi (agak mengecewakan, disetujui). Meskipun demikian, pikir pengetahuan itu mungkin bermanfaat bagi orang lain.

PERBARUI: Campuran adalah sekarang gratis (offline).

PERBARUI: Campuran sekarang dihentikan. Rilis campuran lama masih tersedia

12
Isaac Gregson

Metode saya yang biasa adalah:

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

Ini berfungsi dengan baik dan tidak menggunakan halaman-reload untuk saya. Saya sudah mencoba metode AJAX (salah satu jawaban lain) tetapi sepertinya tidak berfungsi dengan baik untuk saya.

Berikut adalah penjelasan tentang bagaimana kode bekerja untuk mereka yang penasaran: pada dasarnya, ini membuat tag skrip baru (setelah yang pertama) dari URL. Ini mengaturnya ke mode asinkron sehingga tidak memblokir sisa kode, tetapi memanggil panggilan balik ketika readyState (keadaan konten yang akan dimuat) berubah menjadi 'dimuat'.

11

Saya menulis modul sederhana yang mengotomatiskan pekerjaan mengimpor/termasuk skrip modul dalam JavaScript. Untuk penjelasan rinci tentang kode, lihat posting blog JavaScript memerlukan/impor/termasuk modul.

// ----- 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);
};
11
stamat
var js = document.createElement("script");

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

document.body.appendChild(js);
10
Sam4Code

Dalam bahasa modern akan seperti itu 

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

Ada juga Head.js . Sangat mudah untuk berurusan dengan:

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

Seperti yang Anda lihat, lebih mudah daripada Require.js dan senyaman metode $.getScript jQuery Ini juga memiliki beberapa fitur canggih, seperti pemuatan bersyarat, deteksi fitur dan lebih banyak lagi .

9
Ale

Saya sampai pada pertanyaan ini karena saya sedang mencari cara sederhana untuk memelihara koleksi plugin JavaScript yang berguna. Setelah melihat beberapa solusi di sini, saya datang dengan ini:

  1. Siapkan file yang disebut "plugins.js" (atau extensions.js atau apa pun). Simpan file plugin Anda bersama dengan satu file master itu.

  2. plugins.js akan memiliki larik yang disebut "pluginNames []" yang akan kita iterate atas setiap (), lalu tambahkan tag ke kepala untuk setiap plugin

    // set array yang akan diperbarui ketika kita menambah atau menghapus file plugin var pluginNames = ["lettering", "fittext", "butterjam", dll.]; // satu tag skrip untuk setiap plugin $ .each (pluginNames, function () { $ ('head'). append (''); });

  3. secara manual panggil hanya satu file di kepala Anda:
    <script src="js/plugins/plugins.js"></script>

Saya menemukan bahwa meskipun semua plugin dimasukkan ke tag kepala seperti seharusnya, mereka tidak selalu dijalankan oleh browser ketika Anda mengklik halaman atau menyegarkan.

Saya menemukan itu lebih dapat diandalkan untuk hanya menulis tag skrip di sebuah PHP termasuk. Anda hanya perlu menulisnya sekali dan itu hanya berfungsi seperti memanggil plugin menggunakan JavaScript.

9
rgb_life

Script ini akan menambahkan file JavaScript ke atas tag <script> lainnya:

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

Ada banyak jawaban potensial untuk pertanyaan ini. Jawaban saya jelas berdasarkan sejumlah dari mereka. Inilah yang akhirnya saya baca setelah membaca semua jawaban.

Masalah dengan $.getScript dan benar-benar solusi lain yang memerlukan panggilan balik saat memuat selesai adalah bahwa jika Anda memiliki banyak file yang menggunakannya dan saling bergantung satu sama lain, Anda tidak lagi memiliki cara untuk mengetahui kapan semua skrip telah dimuat (begitu mereka sudah dimuat bersarang dalam banyak file).

Contoh:

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

Anda benar ketika mengatakan bahwa Anda dapat menentukan Ajax untuk berjalan secara sinkron atau menggunakan XMLHttpRequest , tetapi tren saat ini tampaknya untuk menolak permintaan sinkron, sehingga Anda mungkin tidak mendapatkan dukungan browser penuh sekarang atau di masa depan.

Anda dapat mencoba menggunakan $.when untuk memeriksa array objek yang ditangguhkan, tetapi sekarang Anda melakukan ini di setiap file dan file2 akan dianggap dimuat segera setelah $.when dieksekusi bukan ketika callback dijalankan, jadi file1 masih melanjutkan eksekusi sebelum file3 dimuat. Ini benar-benar masih memiliki masalah yang sama.

Saya memutuskan untuk mundur daripada maju. Terima kasih document.writeln. Saya tahu itu hal yang tabu, tetapi selama ini digunakan dengan benar, ini bekerja dengan baik. Anda berakhir dengan kode yang dapat didebug dengan mudah, ditampilkan di DOM dengan benar dan dapat memastikan urutan dependensi dimuat dengan benar.

Anda tentu saja dapat menggunakan $ ("body"). Append (), tetapi kemudian Anda tidak dapat lagi melakukan debug dengan benar.

CATATAN: Anda harus menggunakan ini hanya saat halaman memuat, jika tidak, Anda mendapatkan layar kosong. Dengan kata lain, selalu tempatkan ini sebelum/di luar dokumen. Sudah. Saya belum diuji menggunakan ini setelah halaman dimuat dalam acara klik atau semacamnya, tapi saya cukup yakin itu akan gagal.

Saya menyukai gagasan memperluas jQuery, tapi jelas Anda tidak perlu melakukannya.

Sebelum memanggil document.writeln, ia memeriksa untuk memastikan skrip belum dimuat dengan mengevaluasi semua elemen skrip.

Saya berasumsi bahwa skrip tidak sepenuhnya dieksekusi sampai acara document.ready telah dieksekusi. (Saya tahu menggunakan document.ready tidak diperlukan, tetapi banyak orang menggunakannya, dan menangani ini adalah perlindungan.)

Ketika file tambahan dimuat, panggilan balik document.ready akan dieksekusi dalam urutan yang salah. Untuk mengatasinya ketika skrip benar-benar dimuat, skrip yang mengimpornya diimpor kembali sendiri dan eksekusi dihentikan. Hal ini menyebabkan file yang berasal sekarang memiliki panggilan balik document.ready yang dijalankan setelah salah satu dari skrip yang diimpornya.

Alih-alih pendekatan ini, Anda bisa mencoba memodifikasi jQuery readyList, tetapi ini sepertinya solusi yang lebih buruk.

Larutan:

$.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;
    }
});

Pemakaian:

File3:

var f3obj = "file3";

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

File2:

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

File1:

$.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"
});
8

Saya telah membuat fungsi yang memungkinkan Anda menggunakan kata-kata yang mirip dengan C #/Java untuk memasukkan file JavaScript. Saya telah mengujinya sedikit bahkan dari dalam lain JavaScript file dan tampaknya berfungsi. Memang membutuhkan jQuery meskipun untuk sedikit "sihir" di akhir.

Saya meletakkan kode ini di file di root direktori skrip saya (saya menamakannya global.js, tetapi Anda dapat menggunakan apa pun yang Anda inginkan. Kecuali jika saya salah ini dan jQuery harus menjadi satu-satunya skrip yang diperlukan pada halaman tertentu. Ingatlah ini sebagian besar belum diuji di luar beberapa penggunaan dasar, jadi mungkin ada atau mungkin tidak ada masalah dengan cara saya melakukannya; gunakan dengan risiko Anda sendiri yadda yadda saya tidak bertanggung jawab jika Anda mengacaukan sesuatu 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);
}
7
Wayne Molina

Meskipun jawaban ini bagus, ada "solusi" sederhana yang telah ada sejak pemuatan skrip ada, dan itu akan mencakup 99,999% dari kasus penggunaan kebanyakan orang. Cukup sertakan skrip yang Anda butuhkan sebelum skrip yang membutuhkannya. Untuk sebagian besar proyek, tidak butuh waktu lama untuk menentukan skrip mana yang diperlukan dan dalam urutan apa.

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

Jika script2 membutuhkan script1, ini benar-benar cara termudah untuk melakukan sesuatu seperti ini. Saya sangat terkejut tidak ada yang mengemukakan ini, karena ini adalah jawaban yang paling jelas dan paling sederhana yang akan diterapkan di hampir setiap kasus.

6
KthProg

Ada beberapa cara untuk mengimplementasikan modul dalam Javascript, Berikut adalah 2 yang paling populer:

Modul ES6

Browser belum mendukung sistem moduling ini sehingga agar Anda dapat menggunakan sintaks ini, Anda harus menggunakan bundler seperti webpack. Lagi pula, menggunakan bundler lebih baik karena ini dapat menggabungkan semua file Anda yang berbeda menjadi satu (atau beberapa pasangan) file. Ini akan melayani file-file dari server ke klien lebih cepat karena setiap permintaan HTTP memiliki beberapa overhead terkait yang menyertainya. Jadi dengan mengurangi permintaan HTTP secara keseluruhan, kami meningkatkan kinerjanya. Berikut ini adalah contoh modul 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 (digunakan dalam NodeJS)

Sistem moduling ini digunakan di NodeJS. Anda pada dasarnya menambahkan ekspor Anda ke objek yang disebut module.exports. Anda kemudian dapat mengakses objek ini melalui require('modulePath'). Penting di sini adalah menyadari bahwa modul-modul ini sedang di-cache, jadi jika Anda require() modul tertentu dua kali akan mengembalikan modul yang sudah dibuat.

// 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
6

Berikut ini solusinya untuk browser (bukan Node.js) menggunakan impor HTML.

Pertama, semua kelas dan skrip JavaScript tidak dalam file .js, tetapi dalam file .js.html (.js .html hanya untuk mengenali antara halaman HTML dan menyelesaikan skrip JavaScript/kelas), di dalam tag <script>, seperti ini:

MyClass.js.html:

<script>
   class MyClass {

      // Your code here..

   }

</script>

Maka jika Anda ingin mengimpor kelas Anda, Anda hanya perlu menggunakan impor HTML:

<link rel="import" href="relative/path/to/MyClass.js.html"/>

<script>
   var myClass = new MyClass();
   // Your code here..
</script>

EDIT: Impor HTML akan turun

Impor HTML dan modul ES6 keduanya sudah diterapkan dengan baik di sebagian besar browser di seluruh dunia . Tapi karena impor HTML jelas tidak akan menjadi bagian dari standar, tidak seperti modul ES6, pengembangannya akan dibatalkan, maka Anda harus mulai menggunakan modul ES6.

6
Yairopro

Berikut ini adalah Grunt plugin yang memungkinkan Anda untuk menggunakan sintaks @import "path/to/file.js"; dalam file apa pun termasuk file JavaScript. Itu dapat dipasangkan dengan uglify atau watch atau plugin lainnya.

Ini dapat diinstal dengan instal npm: https://npmjs.org/package/grunt-import

6
Marcin

Lebih baik gunakan cara jQuery . Untuk menunda acara siap, panggil $.holdReady(true)..__ terlebih dahulu. Contoh ( sumber ):

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

Tetap bagus, pendek, sederhana, dan dapat dipelihara! :]

// 3rd party plugins / script (don't forget the full path is necessary)
var FULL_PATH = '', s =
[
    FULL_PATH + 'plugins/script.js'      // Script example
    FULL_PATH + 'plugins/jquery.1.2.js', // jQuery Library 
    FULL_PATH + 'plugins/crypto-js/hmac-sha1.js',      // CryptoJS
    FULL_PATH + 'plugins/crypto-js/enc-base64-min.js'  // CryptoJS
];

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

 // initialize a single load 
load('plugins/script.js');

// initialize a full load of scripts
if (s.length > 0)
{
    for (i = 0; i < s.length; i++)
    {
        load(s[i]);
    }
}

Kode ini hanyalah contoh fungsional singkat yang bisa memerlukan fungsionalitas fitur tambahan untuk dukungan penuh pada platform (atau diberikan) apa saja.

5
tfont

Saya pada dasarnya melakukannya seperti berikut ini, membuat elemen baru dan melampirkannya ke kepala:

var x = document.createElement('script');
x.src = 'http://example.com/test.js';
document.getElementsByTagName("head")[0].appendChild(x);

Di jQuery :

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // Script is now loaded and executed.
    // Put your dependent JavaScript code here.
});
5
Rahul Srivastava

Untuk NodeJS saja, Ini bekerja untuk saya yang terbaik!

Saya sudah mencoba sebagian besar solusi di sini, tetapi tidak ada yang membantu saya hanya bisa memuat file lain tanpa mengubah ruang lingkup. Akhirnya saya menggunakan ini. Yang mempertahankan ruang lingkup dan segalanya. Ini sama baiknya dengan kode Anda pada titik itu.

const fs = require('fs');
eval(fs.readFileSync('file.js')+'');
5
rturkek

Ini sangat sederhana. Misalkan Anda ingin mengimpor file A.js dalam file B.js.

Sekarang yakin Anda telah menautkan B.js dalam file HTML, lalu tautkan A.js sebelum B.js dalam file HTML itu. Maka variabel publik A.js akan tersedia di dalam B.js

Ini tidak memerlukan jawaban yang rumit.

4

Saya memiliki persyaratan untuk memuat berbagai file JavaScript secara asinkron dan pada akhirnya membuat panggilan balik. Pada dasarnya pendekatan terbaik saya adalah sebagai berikut:

// Load a JavaScript file from other JavaScript file
function loadScript(urlPack, callback) {
    var url = urlPack.shift();
    var subCallback;

    if (urlPack.length == 0) subCallback = callback;
    else subCallback = function () {
        console.log("Log script: " + new Date().getTime());
        loadScript(urlPack, 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 = subCallback;
    script.onload = subCallback;

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

Contoh:

loadScript(
[
    "js/DataTable/jquery.dataTables.js",
    "js/DataTable/dataTables.bootstrap.js",
    "js/DataTable/dataTables.buttons.min.js",
    "js/DataTable/dataTables.colReorder.min.js",
    "js/DataTable/dataTables.fixedHeader.min.js",
    "js/DataTable/buttons.bootstrap.min.js",
    "js/DataTable/buttons.colVis.min.js",
    "js/DataTable/buttons.html5.min.js"
], function() { gpLoad(params); });

Script kedua tidak akan dimuat sampai yang pertama benar-benar dimuat, dan ...

Hasil:

 Result

4
MiBol

Jika Anda menggunakan Angular, maka modul plugin $ ocLazyLoad dapat membantu Anda melakukannya. 

Berikut beberapa kutipan dari dokumentasinya:

Memuat satu atau lebih modul & komponen dengan banyak file:

$ocLazyLoad.load(['testModule.js', 'testModuleCtrl.js', 'testModuleService.js']);

Muat satu atau lebih modul dengan banyak file dan tentukan jenis yang diperlukan: Catatan: Saat menggunakan pemformatan gaya needJS (dengan js! Di awal misalnya), jangan tentukan ekstensi file. Gunakan satu atau yang lain.

$ocLazyLoad.load([
  'testModule.js',
   {type: 'css', path: 'testModuleCtrl'},
   {type: 'html', path: 'testModuleCtrl.html'},
   {type: 'js', path: 'testModuleCtrl'},
   'js!testModuleService',
   'less!testModuleLessFile'
]);

Anda dapat memuat lib eksternal (tidak bersudut):

$ocLazyLoad.load(['testModule.js', 
   'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js']);

Anda juga dapat memuat file css dan templat:

 $ocLazyLoad.load([
     'bower_components/bootstrap/dist/js/bootstrap.js',
     'bower_components/bootstrap/dist/css/bootstrap.css',
     'partials/template1.html'
 ]);
4
gm2008

Impor dan ekspor modul menggunakan ES6 yang bekerja dengan Node.js

Namai file dengan ekstensi .mjs alih-alih .js

Buat file

touch main.mjs lib.mjs

main.js

import { add } from './lib.mjs';
console.log(add(40, 2));

lib.mjs

export let add = (x,y) => {
  return x + y
}

Menjalankan

node --experimental-modules main.js
3
jasonleonhard

Sekarang, saya mungkin benar-benar salah arah, tetapi inilah yang baru-baru ini saya mulai lakukan ... Mulai dan akhiri file JavaScript Anda dengan carriage return, letakkan di skrip PHP, diikuti oleh satu carriage return . Komentar JavaScript "//" diabaikan oleh PHP sehingga penyertaan tetap terjadi. Tujuan dari pengembalian carriage adalah agar baris pertama dari JavaScript yang Anda masukkan tidak dikomentari.

Secara teknis, Anda tidak perlu komentar, tetapi memposting kesalahan di Dreamweaver yang mengganggu saya. Jika Anda membuat skrip dalam IDE yang tidak memposting kesalahan, Anda seharusnya tidak memerlukan komentar atau carriage kembali.

\n
//<?php require_once("path/to/javascript/dependency.js"); ?>

function myFunction(){
    // stuff
}
\n
3
Duncan
var s=["Hscript.js","checkRobert.js","Hscript.js"];
for(i=0;i<s.length;i++){
  var script=document.createElement("script");
  script.type="text/javascript";
  script.src=s[i];
  document.getElementsByTagName("head")[0].appendChild(script)
};
3
Robert A

Jangan lupa untuk memeriksa LAB.js !

<script type="text/javascript">
       $LAB
       .script("jquery-1.8.3.js").wait()
       .script("scripts/clientscript.js");      
</script>
3
emolaus

Dalam proyek sebelumnya saya cukup sukses menggunakan ajile untuk melakukan impor file JavaScript yang dapat digunakan kembali. Saya selalu berharap ada fitur untuk JavaScript ini.

3
jpierson

Pendekatan lain adalah menggunakan impor HTML. Ini dapat berisi referensi skrip serta referensi stylesheet.

Anda bisa menautkan file HTML seperti

<link rel="import" href="vendorScripts.html"/>

Dalam file vendorScripts.html Anda dapat memasukkan referensi skrip Anda seperti:

<script src="scripts/vendors/jquery.js"></script>
<script src="scripts/vendors/bootstrap.js"></script>
<script src="scripts/vendors/angular.js"></script>
<script src="scripts/vendors/angular-route.js"></script>

Lihat Impor HTML untuk lebih jelasnya.

Sayangnya ini hanya berfungsi di Chrome.

2
gabriel211

Anda tidak dapat mengimpor, tetapi Anda dapat referensi.

PhpShtorm IDE. Untuk referensi, dalam satu file .js ke .js lain, cukup tambahkan ini ke bagian atas file:

<reference path="../js/file.js" />

Tentu saja, Anda harus menggunakan PATH Anda sendiri ke file JavaScript.

Saya tidak tahu apakah itu akan berfungsi di IDE lain. Mungkin ya, coba saja. Ini harus bekerja di Visual Studio juga.

Ya, ada ...

Terus membaca, di ES6, kita dapat export dan import sebagian atau seluruh file javascript menjadi file lain ...

Tapi tunggu, ES6 tidak didukung di semua peramban, jadi yang Anda butuhkan adalah transpile menggunakan babel.js misalnya ...

Jadi Anda membuat kelas seperti di bawah ini:

class Person {
  constructor(name) {
    this.name = name;
  }

  build() {
    return new Person(this);
  }
}

module.exports = Person;

di file JavaScript lain, lakukan impor seperti:

import { Person } from 'Person';

Anda juga dapat meminta file seperti:

const Person = require('./Person');

Jika Anda menggunakan versi JavaScript yang lebih lama, Anda dapat menggunakan Requirejs:

requirejs(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

Jika Anda ingin tetap menggunakan versi barang yang lebih lama, seperti jQuery, Anda juga dapat menggunakan sesuatu seperti getScript:

jQuery.getScript('./another-script.js', function() {
    // Call back after another-script loaded
});

Terakhir tetapi tidak kalah pentingnya, jangan lupa Anda bisa melakukan cara tradisional menyatukan skrip menggunakan tag <script> ...

<script src="./first-script.js"></script>
<script src="./second-script.js"></script>
<script src="./third-script.js"></script>

Ada juga atribut async dan menunda yang harus saya sebutkan di sini ...

Catatan: Ada beberapa cara skrip eksternal dapat dijalankan:

  • Jika ada async: Skrip dijalankan secara tidak sinkron dengan sisa halaman (skrip akan dieksekusi sementara halaman melanjutkan penguraian)
  • Jika async tidak ada dan tunda present: Script dieksekusi ketika halaman telah selesai penguraian
  • Jika async atau defer tidak ada: Skripnya adalah diambil dan dieksekusi segera, sebelum browser melanjutkan parsing halaman
2
Alireza

Ini mungkin cara lain! Di Node.js Anda melakukannya seperti yang berikut! http://requirejs.org/docs/node.html

sub.js

module.exports = {
  log: function(string) {
    if(console) console.log(string);
  }
  mylog: function(){
    console.log('just for log test!');
  }
}

main.js

var mylog =require('./sub');

mylog.log('Hurray, it works! :)');
mylog.mylog();
2
xgqfrms

Saya mencoba masalah ini dengan pendekatan lain,

Pemesanan skrip yang diimpor, tidak berpengaruh di sini.

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Trials</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="main.js"></script>
    <script src="scriptA.js"></script>
</head>

<body>
<h3>testing js in js (check console logs)</h3>
<button onclick="fnClick()">TEST</button>
</body>

</html>

main.js

function fnClick() {
  console.log('From\tAAAAA');
  var pro = myExpo.hello();
  console.log(pro);
}

scriptA.js

myExpo = {
    hello: function () {
        console.log('From\tBBBBB');
        return "Hello";
    }
}

dan hasil adalah

From    AAAAA
From    BBBBB
Hello
1
Milton Ain

Jika Anda menemukan ada 2 atau lebih skrip yang memiliki fungsi yang sama saat dipanggil, maka kami tidak dapat memasukkannya dalam waktu yang sama, kami perlu melakukannya secara dinamis dengan pemilihan pengguna.

Termasuk file lain dalam jQuery menggunakan $.getScript berfungsi sejak script tidak akan di-cache secara default . Jadi kita simpan untuk memanggil skrip lain. Panggilan dapat diatur seperti ini:

HTML

<select class="choice">
  <option value="script1" selected>Script-1</option>
  <option value="script2">Script-2</option>
</select>

JS 

  $(".choice").change(on_change);

    var url = "https://example.com";
    $.url1 = url + "/script1.js";
    $.url2 = url + "/script2.js";

  function on_change() {
    if ($(".choice").val()=="script1") {
        script1();
    } else {
        script2();
    }

    // script1
    function script1() {   
      $.getScript($.url1, function( data, textStatus, jqxhr ) {
          //excecute here
      });  
    }

    // script2
    function script2() {
       $.getScript($.url2, function( data, textStatus, jqxhr ) {
          //excecute here
      });  
    }
0
Chetabahana

Harap perhatikan bahwa kami biasanya menggunakan skrip statis . Jadi kami ingin diambil dari cache sebanyak mungkin . Ini menghemat lalu lintas jaringan dan mempercepat pendaratan.

Penggunaan

$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});

cache: true opsi telah ditambahkan ke metode ajax

0
Adam111p
var xxx = require("../lib/your-library.js")

atau

import xxx from "../lib/your-library.js" //get default export
import {specificPart} from '../lib/your-library.js' //get named export
import * as _name from '../lib/your-library.js'  //get full export to alias _name
0
Mesut Yiğit

Anda dapat menggunakan modul ES saya loadScript untuk memuat file javaScript.

Pemakaian:

Di tag kepala Anda, sertakan kode berikut:

<script src="https://raw.githack.com/anhr/loadScriptNodeJS/master/build/loadScript.js"></script>

atau

<script src="https://raw.githack.com/anhr/loadScriptNodeJS/master/build/loadScript.min.js"></script>

Sekarang Anda dapat menggunakan window.loadScript untuk memuat file JavaScript Anda.

loadScript.async (src, [options])

Memuat file JavaScript asinkron.

src: URL file skrip eksternal atau array nama file skrip.

opsi: opsi yang diikuti tersedia

onload: function () The onload event occurs when a script has been loaded. Default is undefined.

onerror: function ( str, e ) The onerror event occurs when an error has been occured. Default is undefined.

    str: error details

    e: event

appendTo: The node to which the new script will be append. Default is head node.

Sebagai contoh

loadScript.async( "JavaScript.js",
        {
            onload: function () {

                var str = 'file has been loaded successfully';
                console.log( str );

            },
            onerror: function ( str, e ) {

                console.error( str );

            },

        } );

Contoh penggunaan

0
Andrej

Secara dinamis Memuat Banyak Skrip Secara Berurutan

Fungsi di atas berfungsi dengan baik jika Anda hanya memuat satu skrip atau Anda tidak peduli tentang urutan pemuatan beberapa skrip. Jika Anda memiliki beberapa skrip yang tergantung pada yang lain, Anda perlu menggunakan Janji untuk menentukan urutan pemuatan. Alasan di balik ini adalah Javascript memuat sumber daya seperti skrip dan gambar secara serempak. Urutan pemuatan tidak tergantung pada urutan panggilan asinkron, artinya script1 tidak akan dijamin untuk memuat sebelum script2 bahkan jika Anda memanggil dynamicallyLoadScript("scrip1") sebelum memanggil dynamicallyLoadScript("scrip2")

Jadi, inilah versi lain dari DynamicLoadScript yang menjamin pemuatan pesanan:

// Based on: https://javascript.info/promise-basics#example-loadscript
function dynamicallyLoadScript(url) {
        return new Promise(function(resolve, reject) {
        var script = document.createElement("script");
        script.src = url;
        script.onload = resolve;
        script.onerror = () => reject(new Error(`Error when loading ${url}!`));
        document.body.appendChild(script);
    });

Untuk lebih lanjut tentang Janji, lihat halaman luar biasa ini .

PenggunaanLoadScript baru yang dinamis ini sangat sederhana:

dynamicallyLoadScript("script1.js")
.then(() => dynamicallyLoadScript("script2.js"))
.then(() => dynamicallyLoadScript("script3.js"))
.then(() => dynamicallyLoadScript("script4.js"))
.then(() => dynamicallyLoadScript("script5.js"))
//...

Sekarang skrip dimuat dalam urutan script1.js, script2.js, script3.js, dll.

Jalankan kode dependen setelah skrip dimuat

Selain itu, Anda dapat langsung menjalankan kode yang menggunakan skrip setelah dimuat. Cukup tambahkan .then lain setelah memuat skrip:

dynamicallyLoadScript("script1.js")
.then(() => dynamicallyLoadScript("script2.js"))
.then(() => foo()) // foo can be a function defined in either script1, script2
.then(() => dynamicallyLoadScript("script3.js"))
.then(() => {
     if (var1){ // var1 can be a global variable defined in either script1, script2, or script3
          bar(var1); // bar can be a function defined in either script1, script2, or script3
     } else {
          foo(var1);
     }
})
//more .then chains...

Tangani kesalahan pemuatan

Untuk menampilkan penolakan janji yang tidak ditangani (kesalahan saat memuat skrip, dll), letakkan pendengar acara unhandledrejection ini di bagian atas kode Anda:

// Based on: https://javascript.info/promise-error-handling#unhandled-rejections
window.addEventListener('unhandledrejection', function(event) {
     // the event object has two special properties:
     console.error(event.promise);// the promise that generated the error
     console.error(event.reason); // the unhandled error object
});

Sekarang Anda akan diberi tahu tentang kesalahan pemuatan skrip.


Fungsi Jalan Pintas

Jika Anda memuat banyak skrip tanpa mengeksekusi kode segera setelah memuat, fungsi singkatan ini mungkin berguna:

function dynamicallyLoadScripts(urls){
        if (urls.length === 0){
            return;
        }
        let promise = dynamicallyLoadScript(urls[0]);
        urls.slice(1).forEach(url => {
            promise = promise.then(() => dynamicallyLoadScript(url));
        });
    }

Untuk menggunakannya, cukup masukkan array url skrip seperti ini:

const scriptURLs = ["dist/script1.js", "dist/script2.js", "dist/script3.js"];
dynamicallyLoadScripts(scriptURLs);

Script akan dimuat sesuai urutan yang ditampilkan dalam array.

0
AlienKevin