Bao gồm tệp .js trong tệp .js

Tôi muốn biết liệu có thể bao gồm tệp .js trong một tệp .js khác không?Bao gồm tệp .js trong tệp .js

Lý do tôi muốn làm điều này là giữ khách hàng ở mức tối thiểu. Tôi có một số tệp tin .js đã được viết với các chức năng cần thiết bởi ứng dụng khách. Khách hàng sẽ có tệp html mà anh/cô ấy quản lý với tệp .js bao gồm (tệp .js của tôi).

Tôi có thể viết lại tệp .js mới với tất cả các chức năng trong đó hoặc để tránh làm việc hai lần, hãy tìm cách viết tệp .js bao gồm các tệp .js khác.

Nguồn

2010-01-27 Yo Momma

Tôi vừa tạo một plugin Grunt cho khá nhiều yêu cầu tương tự - nó chỉ bao gồm các chức năng được sử dụng trong ứng dụng chính của bạn: https://github.com/mr-moon/grunt-contrib-resolve –

tôi về cơ bản làm như thế này, tạo yếu tố mới và cắm chúng đến <head>

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

Bạn cũng có thể sử dụng onload sự kiện để mỗi kịch bản bạn đính kèm, nhưng hãy kiểm tra nó ra, tôi không chắc chắn nó hoạt động qua trình duyệt hay không.

x.onload=callback_function;

Nguồn

2010-01-27 10:10:54 YOU

Vì nó là không đồng bộ, tôi không chắc chắn họ sẽ đến theo thứ tự bạn mong đợi – Mic

Một phương pháp phổ biến để giải quyết vấn đề giảm tham chiếu JavaScript từ tệp HTML là sử dụng công cụ ghép nối như Sprockets, xử lý trước và ghép nối các tệp nguồn JavaScript với nhau.

Ngoài việc giảm số lượng tham chiếu từ tệp HTML, điều này cũng sẽ giảm số lượt truy cập xuống máy chủ.

Sau đó, bạn có thể muốn chạy kết quả nối thông qua một công cụ rút gọn như jsmin để được rút gọn.

Nguồn

2010-01-27 10:06:47

Giải pháp tốt nhất cho thời gian tải trình duyệt của bạn là sử dụng tập lệnh phía máy chủ để nối tất cả chúng lại với nhau thành một tệp .js lớn. Đảm bảo gzip/rút gọn phiên bản cuối cùng. Yêu cầu duy nhất - đẹp và nhỏ gọn.

Ngoài ra, bạn có thể sử dụng DOM để tạo thẻ <script> và đặt thuộc tính src trên thẻ, sau đó gắn nó vào <head>. Nếu bạn cần đợi chức năng đó để tải, bạn có thể làm cho phần còn lại của tệp javascript của bạn được gọi từ sự kiện load trên thẻ tập lệnh đó.

chức năng này được dựa trên các chức năng của jQuery $.getScript()

function loadScript(src, f) { 
    var head = document.getElementsByTagName("head")[0]; 
    var script = document.createElement("script"); 
    script.src = src; 
    var done = false; 
    script.onload = script.onreadystatechange = function() { 
    // attach to both events for cross browser finish detection: 
    if (!done && (!this.readyState || 
     this.readyState == "loaded" || this.readyState == "complete")) { 
     done = true; 
     if (typeof f == 'function') f(); 
     // cleans up a little memory: 
     script.onload = script.onreadystatechange = null; 
     head.removeChild(script); 
    } 
    }; 
    head.appendChild(script); 
} 

// example: 
loadScript('/some-other-script.js', function() { 
    alert('finished loading'); 
    finishSetup(); 
});

Nguồn

2010-01-27 10:09:05 gnarf

Không có cách nào tiến thẳng về việc này.

Việc bạn có thể làm là tải tập lệnh theo yêu cầu. (một lần nữa sử dụng một cái gì đó tương tự như những gì Ignacio đã đề cập, nhưng sạch hơn nhiều).

Kiểm tra liên kết này ra cho nhiều cách để làm điều này: http://ajaxpatterns.org/On-Demand_Javascript

ưa thích của tôi là (không áp dụng luôn): đóng cửa

<script src="dojo.js" type="text/javascript"> 
dojo.require("dojo.aDojoPackage");

của Google cũng cung cấp chức năng tương tự.

Nguồn

2010-01-27 10:17:29 rAm

tôi sử dụng phương pháp @ gnarf của, mặc dù tôi rơi trở lại trên document.writeln ing một thẻ <script> cho IE < 7 như tôi không thể có được DOM tạo để làm việc đáng tin cậy trong IE6 (và TBH không quan tâm đủ để đặt nhiều nỗ lực vào nó). Cốt lõi của mã của tôi là:

if (horus.script.broken) { 
    document.writeln('<script type="text/javascript" src="'+script+'"></script>'); 
    horus.script.loaded(script); 
    } else { 
    var s=document.createElement('script'); 
    s.type='text/javascript'; 
    s.src=script; 
    s.async=true; 

    if (horus.brokenDOM) 
     s.onreadystatechange= 
     function() { 
      if (this.readyState=='loaded' || this.readyState=='complete') 
      horus.script.loaded(script); 

     }; 

    else 
     s.onload=function() { horus.script.loaded(script) }; 

    document.head.appendChild(s); 
    }

nơi horus.script.loaded() ghi chú rằng các tập tin javascript được nạp, và kêu gọi bất kỳ thói quen bôi cấp phát (được lưu theo mã autoloader).

Nguồn

2010-01-27 10:28:53

Bao gồm tệp .js trong tệp .js

Trả lời

Các vấn đề liên quan