a

Câu hỏi Làm cách nào để đưa tệp JavaScript vào một tệp JavaScript khác?


Có điều gì đó trong JavaScript tương tự như @import trong CSS cho phép bạn bao gồm tệp JavaScript bên trong một tệp JavaScript khác?


4158
2018-06-04 11:59


gốc


stackoverflow.com/questions/21294/… - Daniel A. White
@ Daniel, tôi không muốn sử dụng một cuộc gọi AJAX. - Alec Smart
Tại sao không khai báo tệp đã nhập trước tệp khác yêu cầu tệp, chỉ cần sử dụng đơn đặt hàng script thẻ? - falsarella
@Claudiu Điều đó sẽ không giúp ích gì nhập khẩu bất cứ điều gì, nhưng nó cũng hoạt động tốt. Nếu bạn có tệp JS phụ thuộc vào tệp JS khác, chỉ cần khai báo các thẻ tập lệnh của các tệp phụ thuộc trước tiên, vì vậy tệp sau sẽ có các phụ thuộc được tải. Nếu bạn có một tình huống mà nó không phải là một cách tiếp cận có thể, câu trả lời ở đây sẽ hữu ích. - falsarella
lợi thế thực tế của việc này là gì? một trong hai cách cơ sở mã phụ thuộc vào tập tin javascript sẽ không tải và bắt đầu làm việc trong mọi trường hợp nó không được nạp! - Ciasto piekarz


Các câu trả lời:


Các phiên bản JavaScript cũ không có nhập, bao gồm hoặc yêu cầu, vì vậy nhiều cách tiếp cận khác nhau cho vấn đề này đã được phát triển.

Nhưng các phiên bản JavaScript gần đây có các tiêu chuẩn như Mô-đun ES6 để nhập mô-đun, mặc dù điều này chưa được hỗ trợ bởi hầu hết các trình duyệt. Nhiều người sử dụng các mô-đun với các ứng dụng trình duyệt sử dụng xây dựng và / hoặc sự chuyển hóa công cụ để làm cho nó thực tế để sử dụng cú pháp mới với các tính năng như mô-đun.

Mô-đun ES6

Lưu ý rằng hiện tại, trình duyệt hỗ trợ cho ES6 Modules không phải là đặc biệt tuyệt vời, nhưng nó đang trên đường. Theo câu trả lời StackOverflow này, chúng được hỗ trợ trong Chrome 61, Firefox 54 (phía sau dom.moduleScripts.enabled thiết lập trong about:config) và MS Edge 16, chỉ với Safari 10.1 cung cấp hỗ trợ không có cờ.

Do đó, bạn sẽ vẫn cần phải sử dụng các công cụ xây dựng và / hoặc transpilation cho JavaScript hợp lệ sẽ chạy mà không cần bất kỳ yêu cầu nào cho người dùng sử dụng các phiên bản trình duyệt đó hoặc cho phép bất kỳ cờ nào.

Một khi mô-đun ES6 là phổ biến, đây là cách bạn sẽ đi về việc sử dụng chúng:

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

Node.js yêu cầu

Node.js hiện đang sử dụng module.exports / require hệ thống. Bạn có thể dùng babel để transpile nếu bạn muốn import cú pháp.

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

Có nhiều cách khác để JavaScript bao gồm nội dung JavaScript bên ngoài trong các trình duyệt không yêu cầu tiền xử lý trước.

AJAX Đang tải

Bạn có thể tải một tập lệnh bổ sung bằng một cuộc gọi AJAX và sau đó sử dụng eval để chạy nó. Đây là cách đơn giản nhất, nhưng nó được giới hạn trong miền của bạn vì mô hình bảo mật sandbox JavaScript. Sử dụng eval cũng mở ra cánh cửa cho các lỗi, hack và các vấn đề an ninh.

Tải jQuery

Các jQuery thư viện cung cấp chức năng tải trong một dòng:

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

Tải tập lệnh động

Bạn có thể thêm thẻ tập lệnh có URL tập lệnh vào HTML. Để tránh chi phí của jQuery, đây là một giải pháp lý tưởng.

Tập lệnh thậm chí có thể nằm trên một máy chủ khác. Hơn nữa, trình duyệt đánh giá mã. Các <script> có thể được chèn vào trang web <head>hoặc được chèn ngay trước khi đóng </body> nhãn.

Dưới đây là ví dụ về cách thức hoạt động của tính năng này:

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

Chức năng này sẽ thêm mới <script> để kết thúc phần đầu của trang, trong đó src thuộc tính được đặt thành URL được gán cho hàm làm thông số đầu tiên.

Cả hai giải pháp này đều được thảo luận và minh họa trong JavaScript Madness: Tải tập lệnh động.

Phát hiện khi tập lệnh được thực thi

Bây giờ, có một vấn đề lớn mà bạn phải biết. Làm điều đó ngụ ý rằng bạn tải mã từ xa. Trình duyệt web hiện đại sẽ tải tệp và tiếp tục thực thi tập lệnh hiện tại của bạn vì chúng tải mọi thứ không đồng bộ để cải thiện hiệu suất. (Điều này áp dụng cho cả phương thức jQuery và phương thức tải kịch bản lệnh động.)

Điều đó có nghĩa là nếu bạn sử dụng các thủ thuật này trực tiếp, bạn sẽ không thể sử dụng mã vừa được tải của bạn dòng tiếp theo sau khi bạn yêu cầu nó được tải, bởi vì nó sẽ vẫn đang tải.

Ví dụ: my_lovely_script.js chứa đựng 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

Sau đó, bạn tải lại trang đánh F5. Và nó hoạt động! Gây nhầm lẫn...

Vậy giờ làm gì với nó ?

Vâng, bạn có thể sử dụng hack tác giả gợi ý trong liên kết tôi đã cho bạn. Tóm lại, đối với những người vội vàng, anh ta sử dụng một sự kiện để chạy một chức năng gọi lại khi kịch bản được tải. Vì vậy, bạn có thể đặt tất cả các mã bằng cách sử dụng thư viện từ xa trong chức năng gọi lại. Ví dụ:

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

Sau đó, bạn viết mã bạn muốn sử dụng SAU khi tập lệnh được tải trong hàm lambda:

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

Sau đó, bạn chạy tất cả những điều đó:

loadScript("my_lovely_script.js", myPrettyCode);

Lưu ý rằng tập lệnh có thể thực thi sau khi DOM đã tải hoặc trước đó, tùy thuộc vào trình duyệt và liệu bạn có bao gồm dòng không script.async = false;. Có một bài viết tuyệt vời về tải Javascript nói chung thảo luận về điều này.

Mã nguồn Hợp nhất / Tiền xử lý

Như đã đề cập ở trên cùng của câu trả lời này, nhiều nhà phát triển hiện sử dụng công cụ xây dựng / chuyển đổi như WebPack, Babel hoặc Gulp trong dự án của họ, cho phép họ sử dụng cú pháp mới và mô-đun hỗ trợ tốt hơn, kết hợp tệp, rút ​​gọn, v.v.


3586
2018-06-04 12:13



không phải tất cả các tệp javascript đều được thực thi trong trình duyệt. - Michael Paulukonis
Không, nhưng ai đó sử dụng thứ gì đó tiên tiến như Rhino hay người khác sẽ không hỏi câu hỏi này. - e-satis
Chỉ cần hoàn thành, có một cách thứ ba: Trong các giải pháp nhất định khi bạn kiểm soát cả hai tệp javascript, bạn chỉ có thể tạo 1 tệp javascript khổng lồ kết hợp nội dung của cả hai tệp. - Toad
Không nên "document.createElement (" my_lovely_script.js ");" trong ví dụ là "document.createElement (" script ")"? - Russell Silva
Làm thế nào để eval mở cửa để hack nếu đó là mã của bạn mà bạn đang thực hiện? - Vince Panuccio


Nếu có ai đang tìm kiếm thứ gì đó tiên tiến hơn, hãy thử RequireJS. Bạn sẽ nhận được các lợi ích bổ sung như quản lý phụ thuộc, đồng thời tốt hơn và tránh trùng lặp (nghĩa là, truy xuất tập lệnh nhiều lần).

Bạn có thể viết các tệp JavaScript của mình trong "mô-đun" và sau đó tham chiếu chúng dưới dạng phụ thuộc trong các tập lệnh khác. Hoặc bạn có thể sử dụng RequireJS như một giải pháp "go get this script" đơn giản.

Thí dụ:

Xác định các phụ thuộc như mô-đun:

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 là tệp JavaScript "chính" của bạn phụ thuộc vào some-dependency.js

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

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

Trích từ GitHub README:

RequireJS tải các tệp JavaScript đơn giản cũng như được xác định rõ hơn   mô-đun. Nó được tối ưu hóa để sử dụng trong trình duyệt, bao gồm cả trong một trang Web   Công nhân, nhưng nó có thể được sử dụng trong các môi trường JavaScript khác, như   Tê giác và Node. Nó triển khai API mô-đun không đồng bộ.

RequireJS sử dụng các thẻ script đơn giản để tải các mô-đun / tệp, vì vậy cần   cho phép gỡ lỗi dễ dàng. Nó có thể được sử dụng đơn giản để tải   Các tệp JavaScript, vì vậy bạn có thể thêm nó vào dự án hiện tại của mình mà không cần   phải viết lại các tệp JavaScript của bạn.

...


514
2018-06-07 20:55



+1 để trích dẫn đúng cách để làm điều đó :-) Nó sẽ tốt hơn nếu bạn đưa vào một ví dụ! - Sean Vieira
@Sean theo đề xuất của bạn - Tôi đã thêm một ví dụ ngắn - John Strickler
@aaaidan: Lý do MattDmo cộng với nó dựa vào một thư viện bên ngoài mà ngược lại dựa vào câu trả lời được chấp nhận. - David Mulder
Để khắc phục require.js, phiên bản mới nhất sẽ là js góc cạnh ổn định hơn và dễ sử dụng hơn cùng với các tính năng HTML phong phú và ràng buộc khác. - zeeshan
-1: Những trừu tượng đó - "some_dependency" - thực sự nghèo nàn, với các chỉ mục thêm vào sự nhầm lẫn. Tôi đấu tranh để hiểu một ví dụ mã làm việc trông như thế nào. Nếu tác giả cung cấp ví dụ làm việc, hầu như ai cũng có thể điều chỉnh và tổng quát nó theo nhu cầu của mình. - Tegiri Nenashi


Có thực sự  một cách để tải một tệp JavaScript không phải không đồng bộ, vì vậy bạn có thể sử dụng các hàm được bao gồm trong tệp vừa tải của bạn ngay sau khi tải nó và tôi nghĩ nó hoạt động trong tất cả các trình duyệt.

Bạn cần sử dụng jQuery.append()trên <head> yếu tố của trang của bạn, đó là:

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

Tuy nhiên, phương pháp này cũng có một vấn đề: nếu một lỗi xảy ra trong tệp JavaScript được nhập, Firebug (cũng như Firefox Error Console và Công cụ dành cho nhà phát triển Chrome ) sẽ báo cáo vị trí của nó không chính xác, đó là một vấn đề lớn nếu bạn sử dụng Firebug để theo dõi lỗi JavaScript xuống rất nhiều (tôi làm). Firebug chỉ đơn giản là không biết về các tập tin mới được tải vì lý do nào đó, vì vậy nếu một lỗi xảy ra trong tập tin đó, nó báo cáo rằng nó xảy ra trong chính của bạn HTML và bạn sẽ gặp khó khăn trong việc tìm ra lý do thực sự cho lỗi.

Nhưng nếu đó không phải là một vấn đề cho bạn, thì phương pháp này sẽ hoạt động.

Tôi đã thực sự viết một plugin jQuery được gọi là $ .import_js () trong đó sử dụng phương pháp này:

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

Vì vậy, tất cả những gì bạn cần làm để nhập JavaScript là:

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

Tôi cũng đã làm một bài kiểm tra đơn giản cho điều này tại Thí dụ.

Nó bao gồm một main.js tệp trong HTML chính và sau đó tập lệnh trong main.js sử dụng $.import_js() để nhập tệp bổ sung có tên included.js, xác định hàm này:

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

Và ngay sau khi bao gồm included.js, các hello() chức năng được gọi, và bạn nhận được cảnh báo.

(Câu trả lời này là để đáp lại bình luận của e-satis).


162
2018-04-28 15:25



Tôi đang thử phương pháp này, nhưng không làm việc cho tôi, phần tử này không xuất hiện trong thẻ head. - juanpastas
@juanpastas - sử dụng jQuery.getScript, bằng cách đó bạn không phải lo lắng về việc viết plugin ... - MattDMo
Kỹ thuật này có thực sự chặn cho đến khi tập lệnh đã nhập được nạp và thực thi không? - Flimm
Hmm, theo bài viết này, phụ thêm script yếu tố để head sẽ khiến nó chạy không đồng bộ, trừ khi async được đặt cụ thể thành false. - Flimm
Không nên biến tập lệnh có các thực thể html được mã hóa? Nếu liên kết chứa ", mã sẽ phá vỡ - Soaku


Một cách khác, theo ý kiến ​​của tôi là sạch hơn nhiều, là tạo một yêu cầu Ajax đồng bộ thay vì sử dụng một <script> nhãn. Đó cũng là cách Node.js xử lý bao gồm.

Đây là một ví dụ sử dụng 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);
        }
    });
}

Sau đó bạn có thể sử dụng nó trong mã của bạn như bạn thường sử dụng bao gồm:

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

Và có thể gọi hàm từ tập lệnh được yêu cầu trong dòng tiếp theo:

subscript.doSomethingCool(); 

134
2017-09-08 18:22



Giải pháp tốt, người đứng đầu bao gồm là không may async, giải pháp ajax hoạt động. - Matteo Conta
Như một người khác đã đề cập, requirejs.org thực hiện điều này và cũng có một trình biên dịch trước đặt các tệp js lại với nhau để chúng tải nhanh hơn. Bạn có thể muốn kiểm tra xem nó ra. - Ariel
Tìm thấy tôi có thể gỡ lỗi bằng cách thêm chỉ thị này ở cuối tệp cho Chrome: // @ sourceURL = view_index.js - Todd Vance
unfortunatelly, async: false hiện không được chấp nhận trong jQuery. Có thể phá vỡ trong tương lai, vì vậy tôi muốn tránh. - sqram
@ katsh Chúng tôi không sử dụng các đối tượng jqXHR ở đây. Trích dẫn của bạn dường như không sao lưu nhận xét trước đó của bạn nói rằng async: false được cho là không được chấp nhận. Không phải vậy! Theo báo giá của bạn, chỉ có các công cụ liên quan đến jqXHR là. - Zero3


Có một tin tốt cho bạn. Rất sớm, bạn sẽ có thể tải mã JavaScript dễ dàng. Nó sẽ trở thành một cách tiêu chuẩn để nhập các mô-đun mã JavaScript và sẽ là một phần của chính JavaScript lõi.

Bạn chỉ cần viết import cond from 'cond.js'; để tải macro có tên cond từ một tập tin cond.js.

Vì vậy, bạn không phải dựa vào bất kỳ khung JavaScript nào cũng như bạn không phải thực hiện một cách rõ ràng Ajax cuộc gọi.

Tham khảo:


86
2017-07-03 13:32



yêu cầu / nhập khẩu trên jsfile đã được quá lâu trong sắp tới. (IMO). - rwheadon
@rwheadon yeah có vẻ kinh khủng rằng đây không phải là một phần của ngôn ngữ! Làm thế nào js mọi người nhận được bất cứ điều gì được thực hiện là ngoài tôi! Im mới với nó và điều này có vẻ là điều tồi tệ nhất (nhiều) của sự điên rồ - Jonny Leeds
@ jonny-leeds Ngay cả khi không tải sẵn mô-đun, JavaScript trong trình duyệt đủ linh hoạt để chúng tôi có thể triển khai một thư viện như RequireJS để quản lý mô-đun của chúng tôi. - Keen
giữa năm 2015- Vẫn chưa được triển khai ở bất kỳ trình duyệt nào, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - scape
Vâng, bạn đúng. bây giờ tôi bắt đầu cảm thấy xấu cho điều này: (Thouh, một khi được thực hiện trong tất cả các trình duyệt này sẽ là một tính năng tuyệt vời được xây dựng trong javascript. - Imdad


Có thể tạo động một thẻ JavaScript và gắn nó vào tài liệu HTML từ bên trong mã JavaScript khác. Thao tác này sẽ tải tệp JavaScript được nhắm mục tiêu.

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



Nó hoạt động, nhưng có vấn đề nghiêm trọng vì tải không đồng bộ. - e-satis
Um ... chính xác thì sao? - Svitlana Maksymchuk
@ e-satis - Trên thực tế, đây là một lợi thế, một tập lệnh đồng bộ sẽ bị chặn. Ngựa cho các khóa học, nhưng 9 lần trong 10 bạn muốn tùy chọn không chặn. - annakata
@Svitlana - các yếu tố kịch bản được tạo ra như thế này là không đồng bộ. Hiện tại điều này có thể được xem như khai thác lỗ hổng để nó có thể không phải là bằng chứng trong tương lai, tôi đã không thấy bất cứ điều gì trong bất kỳ tiêu chuẩn nào làm rõ điều này. - annakata
@ e-satis không đồng bộ là tốt vì nó sẽ không đóng băng trang của bạn. Sử dụng gọi lại để được thông báo khi hoàn thành js.onload = callback; - Vitim.us


Tuyên bố import có trong ECMAScript 6.

Cú pháp

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



... nhưng không được bất kỳ trình duyệt nào hỗ trợ cho đến nay, theo bảng tương thích trên trang bạn đã liên kết. - Zero3
Bây giờ bạn có thể viết mã ES6 và biên dịch nó bằng Babel.js (babeljs.io) cho bất kỳ hệ thống mô-đun hiện tại nào ưa thích của bạn là (CommonJS / AMD / UMD): babeljs.io/docs/usage/modules - Jeremy Harris
@ Zero3 Dường như IE mới (Edge) là chỉ có một - Julian Avar
có cách nào để làm điều này mà không có ES6? Khả năng tương thích trình duyệt và những người không có ES6 yêu cầu nó. - IamGuest


Có thể bạn có thể sử dụng chức năng này mà tôi tìm thấy trên trang này Làm cách nào để bao gồm tệp JavaScript trong tệp 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)
}

47
2018-06-04 12:04



Nên hữu ích để thêm script.onload = callback; - Vitim.us
@SvitlanaMaksymchuk vì vậy, nếu tôi không sử dụng var, biến sẽ là toàn cầu? - Francisco Corrales Morales
@FranciscoCorrales yes. - Christopher Chiche
Nó kết thúc trong toàn cầu có hoặc không có var :) - Vedran Maricevic.
Điều này không thành công nếu trang không có head. - Dan Dascalescu


Đây là đồng bộ phiên bản không có 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);
}

Lưu ý rằng để có được tên miền chéo hoạt động này, máy chủ sẽ cần phải thiết lập allow-origin tiêu đề trong phản hồi của nó.


46
2017-12-11 11:54



Chức năng tuyệt vời! Tải JavaScript trước khi bất kỳ JS bổ sung nào được viết sau phần thân. Rất quan trọng khi tải nhiều tập lệnh. - tfont
@heinob: Tôi có thể làm gì để làm cho nó hoạt động cho nhiều miền? (tải tập lệnh từ http://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStuff/userjs/aagmfunctions.js) - user2284570
@ user2284570: Nếu bạn là chủ sở hữu của tên miền nước ngoài: đặt tiêu đề `allow-origin 'trong câu trả lời của máy chủ. Nếu bạn không phải là chủ sở hữu: không có gì. Lấy làm tiếc! Đó là chính sách đa nguồn gốc. - heinob
@ user2284570: Tôi hiểu nhận xét của bạn theo cách đó, rằng bạn không phải là chủ sở hữu miền mà bạn muốn tải tập lệnh. Trong trường hợp đó, bạn chỉ có thể tải một tập lệnh thông qua một chèn <script> thẻ, không qua XMLHttpRequest. - heinob
Đối với những người có kế hoạch sử dụng điều này trong Firefox (nói cho imacros scripting), thêm dòng này vào đầu của tập tin: const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1"); - Kwestion


Tôi vừa viết mã JavaScript này (sử dụng Prototype cho DOM Thao tác):

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

Sử dụng:

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

Ý chính: http://gist.github.com/284442.


41
2018-01-23 05:20



jrburke đã viết điều này là RequireJS. Github: requirejs.org/docs/requirements.html - Mike Caron
Không phải là điều này đặt kịch bản được tải bên ngoài phạm vi mà yêu cầu () được gọi là? Có vẻ như eval () là cách duy nhất để làm điều đó trong phạm vi. Hoặc là có một cách khác? - trusktr