Pertanyaan Bagaimana saya memasukkan file JavaScript di file JavaScript lain?


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


4146
2018-06-04 11:59


asal


Jawaban:


Versi lama JavaScript tidak memiliki impor, termasuk, atau membutuhkan, begitu banyak pendekatan yang berbeda untuk masalah ini telah dikembangkan.

Tetapi JavaScript versi terbaru memiliki standar seperti Modul ES6 untuk mengimpor modul, meskipun ini belum didukung oleh sebagian besar browser. Banyak orang menggunakan modul dengan aplikasi browser yang digunakan membangun dan / atau transpilasi alat untuk membuatnya praktis menggunakan sintaks baru dengan fitur seperti modul.

Modul ES6

Perhatikan bahwa saat ini, dukungan browser untuk ES6 Modul tidak terlalu bagus, tetapi sedang dalam perjalanan. Menurut jawaban StackOverflow ini, mereka didukung di Chrome 61, Firefox 54 (di belakang dom.moduleScripts.enabled pengaturan about:config) dan MS Edge 16, dengan hanya Safari 10.1 yang menyediakan dukungan tanpa bendera.

Dengan demikian, saat ini Anda masih perlu menggunakan alat build dan / atau transpilation untuk memvalidasi JavaScript yang akan berjalan tanpa persyaratan apa pun bagi pengguna untuk menggunakan versi browser tersebut atau mengaktifkan bendera apa pun.

Setelah ES6 Modul adalah biasa, berikut ini bagaimana Anda akan menggunakannya:

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

Node.js membutuhkan

Node.js saat ini menggunakan module.exports / require sistem. Kamu dapat memakai babel untuk berubah jika Anda menginginkan import sintaksis.

// 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 menyertakan konten JavaScript eksternal di browser yang tidak memerlukan pra-proses.

Pemuatan AJAX

Anda bisa memuat skrip tambahan dengan panggilan AJAX dan kemudian menggunakannya eval untuk menjalankannya. Ini adalah cara yang paling mudah, tetapi terbatas untuk domain Anda karena model keamanan kotak pasir JavaScript. Menggunakan eval juga membuka pintu untuk bug, hacks dan masalah keamanan.

jQuery Loading

Itu jQuery perpustakaan menyediakan fungsionalitas pemuatan dalam satu baris:

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

Pemuatan Naskah Dinamis

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

Skripnya bahkan dapat berada di server yang berbeda. Selanjutnya, browser mengevaluasi kode. Itu <script> tag dapat disuntikkan ke halaman web <head>, atau dimasukkan tepat sebelum penutupan </body> menandai.

Berikut ini contoh cara kerjanya:

function dynamicallyLoadScript(url) {
    var script = document.createElement("script"); // Make a script DOM node
    script.src = url; // Set it's 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 yang baru <script> tag untuk mengakhiri bagian kepala halaman, di mana src atribut diatur ke URL yang diberikan ke fungsi sebagai parameter pertama.

Kedua solusi ini dibahas dan diilustrasikan JavaScript Madness: Pemuatan Naskah Dinamis.

Mendeteksi kapan skrip telah dieksekusi

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

Itu berarti bahwa jika Anda menggunakan trik ini secara langsung, Anda tidak akan dapat menggunakan kode baru Anda yang dimuat ke baris berikutnya setelah Anda memintanya untuk dimuat, karena masih akan dimuat.

Sebagai contoh: my_lovely_script.js mengandung 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 ulang halaman tersebut F5. Dan itu berhasil! Membingungkan ...

Jadi apa yang harus dilakukan?

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

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

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

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

Kemudian Anda menjalankan 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 bagus tentang pemuatan Javascript secara umum yang membahas ini.

Source Code Merge / Preprocessing

Seperti disebutkan di bagian atas jawaban ini, banyak pengembang sekarang menggunakan alat build / transpilation seperti WebPack, Babel, atau Gulp dalam proyek mereka, memungkinkan mereka untuk menggunakan sintaks dan modul dukungan baru yang lebih baik, menggabungkan file, memperkecil, dll.


3579
2018-06-04 12:13



Jika ada yang mencari sesuatu yang lebih maju, cobalah RequireJS. Anda akan mendapatkan manfaat tambahan seperti manajemen ketergantungan, konkurensi yang lebih baik, dan menghindari duplikasi (yaitu, mengambil naskah lebih dari satu kali).

Anda dapat menulis file JavaScript Anda di "modules" dan kemudian mereferensikannya sebagai dependensi dalam 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
});

Implementation.js adalah file JavaScript "utama" Anda yang bergantung padanya 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 BACA AKU:

RequireJS memuat file-file JavaScript biasa serta lebih jelas   modul. Ini dioptimalkan untuk penggunaan di browser, termasuk di Web   Pekerja, tetapi dapat digunakan di lingkungan JavaScript lainnya, seperti   Badak dan Node. Ini mengimplementasikan API Modul Asynchronous.

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

...


513
2018-06-07 20:55



Sebenarnya ada aku s cara memuat file JavaScript tidak asynchronously, sehingga Anda bisa menggunakan fungsi-fungsi yang termasuk dalam file yang baru dimuat setelah memuatnya, dan saya pikir itu berfungsi di semua browser.

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

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

Namun, metode ini juga memiliki masalah: jika kesalahan terjadi di file JavaScript yang diimpor, Pembakar (dan juga Firefox Error Console dan Alat Pengembang Chrome juga) akan melaporkan tempatnya secara salah, yang merupakan masalah besar jika Anda menggunakan Firebug untuk melacak kesalahan JavaScript turun banyak (saya lakukan). Firebug hanya tidak tahu tentang file yang baru dimuat untuk beberapa alasan, jadi jika kesalahan terjadi di file itu, itu melaporkan bahwa itu terjadi di utama Anda HTML file, dan Anda akan kesulitan mencari tahu alasan sebenarnya untuk kesalahan tersebut.

Tetapi jika itu bukan masalah bagi Anda, maka metode ini harus bekerja.

Saya sebenarnya telah menulis sebuah plugin jQuery yang disebut $ .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 semua yang perlu Anda lakukan untuk mengimpor JavaScript adalah:

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

Saya juga membuat tes sederhana untuk ini Contoh.

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

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

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

(Jawaban ini adalah tanggapan atas komentar e-satis).


162
2018-04-28 15:25



Cara lain, yang menurut saya jauh lebih bersih, adalah membuat permintaan Ajax yang sinkron alih-alih menggunakan <script> menandai. Yang juga bagaimana Node.js menangani termasuk.

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 menggunakan include:

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

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

subscript.doSomethingCool(); 

133
2017-09-08 18:22



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 JavaScript inti itu sendiri.

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

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

Mengacu pada:


86
2017-07-03 13:32



Dimungkinkan untuk menghasilkan tag JavaScript secara dinamis 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");

72
2018-06-04 12:02



Pernyataan import ada di 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;

58
2018-04-17 01:56