2010-01-27 21 views
62

मैं जानना चाहता हूं कि .js फ़ाइल को अन्य .js फ़ाइल में शामिल करना संभव है या नहीं?एक .js फ़ाइल में एक .js फ़ाइल सहित

मेरे लिए ऐसा करने का कारण क्लाइंट को न्यूनतम में रखना है। मेरे पास कई .js फ़ाइलें हैं जो क्लाइंट द्वारा आवश्यक कार्यों के साथ पहले ही लिखी गई हैं। ग्राहक के पास एक HTML फ़ाइल होगी जिसमें वह .js फ़ाइल के साथ प्रबंधित करता है (मेरी .js फ़ाइल)।

मैं इसमें सभी कार्यों के साथ एक नया .js फ़ाइल को फिर से लिख सका, डबल काम कर रही से बचने के लिए, एक तरह से एक .js फ़ाइल है कि अन्य .js फ़ाइलें शामिल लिखने के लिए यह पता लगाने।

+0

मैंने अभी भी एक ही आवश्यकता के लिए एक ग्रंट प्लगइन बनाया है - इसमें केवल उन कार्यों को शामिल किया गया है जो आपके मुख्य अनुप्रयोग में उपयोग किए जाते हैं: https://github.com/mr-moon/grunt-contrib-resolve –

उत्तर

36

मैं मूल रूप से <head>

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

को इस तरह करते हैं, नए तत्व बना सकते हैं और देते हैं कि पर आधारित है तुम भी प्रत्येक के लिए onload घटना का उपयोग कर सकते स्क्रिप्ट जो आप संलग्न करते हैं, लेकिन कृपया इसका परीक्षण करें, मुझे यकीन नहीं है कि यह क्रॉस-ब्राउज़र काम करता है या नहीं।

x.onload=callback_function; 
+5

जैसा कि यह है असीमित, मुझे यकीन नहीं है कि वे आपके द्वारा अपेक्षित क्रम में पहुंचेंगे – Mic

3

एचटीएमएल फाइलों से जावास्क्रिप्ट संदर्भों को कम करने की समस्या से निपटने के लिए एक लोकप्रिय तरीका Sprockets जैसे संगतता उपकरण का उपयोग कर है, जो प्रीप्रोसेसेस और जावास्क्रिप्ट स्रोत फ़ाइलों को एक साथ जोड़ता है।

HTML फ़ाइलों से संदर्भों की संख्या को कम करने के अलावा, यह सर्वर पर हिट की संख्या को भी कम करेगा।

फिर आप इसे कम करने के लिए jsmin जैसे एक लघु उपकरण के माध्यम से परिणामी समामेलन को चलाने के लिए चाहते हैं।

11

आपके ब्राउज़र लोड समय के लिए सबसे अच्छा समाधान सर्वर साइड स्क्रिप्ट का उपयोग उन सभी को एक साथ .js फ़ाइल में शामिल करने के लिए करना होगा। अंतिम संस्करण gzip/minify सुनिश्चित करें। एकल अनुरोध - अच्छा और कॉम्पैक्ट।

वैकल्पिक रूप से, आप <script> टैग बनाने के लिए DOM का उपयोग कर सकते हैं और उस पर src property सेट कर सकते हैं और इसे <head> पर जोड़ दें। यदि आपको उस कार्यक्षमता को लोड करने की प्रतीक्षा करने की आवश्यकता है, तो आप अपनी शेष जावास्क्रिप्ट फ़ाइल को उस स्क्रिप्ट टैग पर load ईवेंट से कॉल कर सकते हैं।

इस समारोह 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(); 
}); 
4

ऐसा करने का कोई सीधा तरीका नहीं है।

आप क्या कर सकते हैं मांग पर स्क्रिप्ट लोड करना है। (फिर से इग्नासिओ के उल्लेख के समान कुछ उपयोग करता है, लेकिन बहुत साफ है)।

चेक ऐसा करने का कई तरीके के लिए इस लिंक बाहर: http://ajaxpatterns.org/On-Demand_Javascript

मेरा पसंदीदा (नहीं लागू हमेशा) है:

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

गूगल के बंद होने के भी इसी तरह की सुविधा प्रदान करता है।

0

मैं उपयोग @ gnarf की विधि, हालांकि मैं document.writeln आईई < 7 के लिए एक <script> टैग ing मैं डोम निर्माण IE6 में मज़बूती से काम करने के लिए (और TBH में काफी प्रयास किया करने के लिए पर्याप्त ध्यान नहीं दिया नहीं मिल सका के रूप में पर वापस गिर यह)। मेरे कोड की मूल है:

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

जहां horus.script.loaded() नोटों कि जावास्क्रिप्ट फ़ाइल भरी हुई है, और किसी भी लंबित अनावश्यक दिनचर्या कॉल (autoloader कोड द्वारा बचाया)।