क्या जावास्क्रिप्ट में सीएसएस में @import के समान कुछ है जो आपको किसी अन्य जावास्क्रिप्ट फ़ाइल के अंदर एक जावास्क्रिप्ट फ़ाइल शामिल करने की अनुमति देता है?

5847
Alec Smart 4 जून 2009, 15:59

30 जवाब

सबसे बढ़िया उत्तर

जावास्क्रिप्ट के पुराने संस्करणों में कोई आयात, शामिल या आवश्यकता नहीं थी, इसलिए इस समस्या के लिए कई अलग-अलग दृष्टिकोण विकसित किए गए हैं।

लेकिन 2015 (ES6) के बाद से, JavaScript में Node.js में मॉड्यूल आयात करने के लिए ES6 मॉड्यूल मानक हैं। , जो अधिकांश आधुनिक ब्राउज़रों द्वारा भी समर्थित है।

पुराने ब्राउज़र के साथ संगतता के लिए, Webpack और रोलअप और/या ट्रांसपिलेशन टूल जैसे Babel का उपयोग किया जा सकता है।

ES6 मॉड्यूल

ECMAScript (ES6) मॉड्यूल नोड.js में समर्थित के साथ v8.5 के बाद से --experimental-modules ध्वज, और ध्वज के बिना कम से कम Node.js v13.8.0 के बाद से। "ESM" को सक्षम करने के लिए (बनाम Node.js का पिछला कॉमनजेएस-स्टाइल मॉड्यूल सिस्टम ["CJS"]) आप या तो "type": "module" का उपयोग package.json में करते हैं या फाइलों को एक्सटेंशन .mjs देते हैं। (इसी तरह, Node.js के पिछले CJS मॉड्यूल के साथ लिखे गए मॉड्यूल को .cjs नाम दिया जा सकता है यदि आपका डिफ़ॉल्ट ESM है।)

package.json का उपयोग करना:

{
    "type": "module"
}

फिर module.js:

export function hello() {
  return "Hello";
}

फिर main.js:

import { hello } from './module.js';
let val = hello();  // val is "Hello";

.mjs का उपयोग करके, आपके पास module.mjs होगा:

export function hello() {
  return "Hello";
}

फिर main.mjs:

import { hello } from './module.mjs';
let val = hello();  // val is "Hello";

ब्राउज़र में ईसीएमएस्क्रिप्ट मॉड्यूल modules

ब्राउज़रों को सीधे ईसीएमएस्क्रिप्ट मॉड्यूल लोड करने के लिए समर्थन मिला है (वेबपैक जैसे किसी टूल की आवश्यकता नहीं है) से Safari 10.1, Chrome 61, Firefox 60, और Edge 16. caniuse पर मौजूदा समर्थन की जांच करें . Node.js' .mjs एक्सटेंशन का उपयोग करने की कोई आवश्यकता नहीं है; ब्राउज़र मॉड्यूल/स्क्रिप्ट पर फ़ाइल एक्सटेंशन को पूरी तरह से अनदेखा कर देते हैं।

<script type="module">
  import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
  hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

अधिक पढ़ें https://jakearchibald.com/2017/es-modules-in-browsers /

ब्राउज़र में गतिशील आयात

गतिशील आयात स्क्रिप्ट को आवश्यकतानुसार अन्य स्क्रिप्ट लोड करने देता है:

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

https://developers.google.com/web/updates/ पर और पढ़ें 2017/11/गतिशील-आयात

Node.js की आवश्यकता है

पुरानी CJS मॉड्यूल शैली, जो अभी भी Node.js में व्यापक रूप से उपयोग की जाती है, वह है module.exports/require सिस्टम।

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

जावास्क्रिप्ट के लिए ब्राउज़र में बाहरी जावास्क्रिप्ट सामग्री को शामिल करने के अन्य तरीके हैं जिन्हें प्रीप्रोसेसिंग की आवश्यकता नहीं है।

AJAX लोड हो रहा है

आप AJAX कॉल के साथ एक अतिरिक्त स्क्रिप्ट लोड कर सकते हैं और फिर इसे चलाने के लिए eval का उपयोग कर सकते हैं। यह सबसे सीधा तरीका है, लेकिन जावास्क्रिप्ट सैंडबॉक्स सुरक्षा मॉडल के कारण यह आपके डोमेन तक सीमित है। eval का उपयोग करने से बग, हैक और सुरक्षा मुद्दों का भी द्वार खुल जाता है।

फ़ेच लोड हो रहा है

डायनेमिक इंपोर्ट की तरह आप इंजेक्शन प्राप्त करें पुस्तकालय:

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 लोड हो रहा है

jQuery लाइब्रेरी लोडिंग कार्यक्षमता प्रदान करती है एक पंक्ति में:

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

गतिशील स्क्रिप्ट लोड हो रहा है

आप HTML में स्क्रिप्ट URL के साथ एक स्क्रिप्ट टैग जोड़ सकते हैं। JQuery के ऊपरी हिस्से से बचने के लिए, यह एक आदर्श समाधान है।

स्क्रिप्ट एक अलग सर्वर पर भी रह सकती है। इसके अलावा, ब्राउज़र कोड का मूल्यांकन करता है। <script> टैग को वेब पेज <head> में इंजेक्ट किया जा सकता है, या क्लोजिंग </body> टैग से ठीक पहले डाला जा सकता है।

यहां एक उदाहरण दिया गया है कि यह कैसे काम कर सकता है:

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

यह फ़ंक्शन पृष्ठ के शीर्ष अनुभाग के अंत में एक नया <script> टैग जोड़ देगा, जहां src विशेषता URL पर सेट है जो फ़ंक्शन को पहले पैरामीटर के रूप में दिया गया है।

इन दोनों समाधानों पर JavaScript Madness: Dynamic Script Loading में चर्चा और चित्रण किया गया है।

यह पता लगाना कि स्क्रिप्ट कब निष्पादित की गई है

अब, एक बड़ा मुद्दा है जिसके बारे में आपको पता होना चाहिए। ऐसा करने का तात्पर्य है कि आप कोड को दूरस्थ रूप से लोड करते हैं। आधुनिक वेब ब्राउज़र फ़ाइल को लोड करेंगे और आपकी वर्तमान स्क्रिप्ट को निष्पादित करते रहेंगे क्योंकि वे प्रदर्शन को बेहतर बनाने के लिए सब कुछ अतुल्यकालिक रूप से लोड करते हैं। (यह jQuery विधि और मैन्युअल गतिशील स्क्रिप्ट लोडिंग विधि दोनों पर लागू होता है।)

इसका अर्थ यह है कि यदि आप सीधे इन तरकीबों का उपयोग करते हैं, तो आपके द्वारा लोड किए जाने के लिए कहने के बाद आप अगली पंक्ति में अपने नए लोड किए गए कोड का उपयोग नहीं कर पाएंगे, क्योंकि यह अभी भी लोड हो रहा होगा।

उदाहरण के लिए: my_lovely_script.js में 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

फिर आप F5 हिट करने वाले पेज को फिर से लोड करें। और यह काम करता है! भ्रमित करने वाला...

तो इसके बारे में क्या करें ?

ठीक है, आप मेरे द्वारा दिए गए लिंक में लेखक द्वारा सुझाए गए हैक का उपयोग कर सकते हैं। संक्षेप में, जल्दी में लोगों के लिए, वह स्क्रिप्ट लोड होने पर कॉलबैक फ़ंक्शन चलाने के लिए एक ईवेंट का उपयोग करता है। तो आप कॉलबैक फ़ंक्शन में रिमोट लाइब्रेरी का उपयोग करके सभी कोड डाल सकते हैं। उदाहरण के लिए:

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

फिर आप उस कोड को लिखते हैं जिसका आप उपयोग करना चाहते हैं जब स्क्रिप्ट एक lambda function में लोड हो जाती है:

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

फिर आप वह सब चलाते हैं:

loadScript("my_lovely_script.js", myPrettyCode);

ध्यान दें कि ब्राउज़र पर निर्भर करते हुए और क्या आपने लाइन script.async = false; शामिल की है, डीओएम लोड होने के बाद या उससे पहले स्क्रिप्ट निष्पादित हो सकती है। एक सामान्य रूप से Javascript लोडिंग पर एक बढ़िया लेख है जो इस पर चर्चा करता है।

सोर्स कोड मर्ज/प्रीप्रोसेसिंग

जैसा कि इस उत्तर के शीर्ष पर उल्लेख किया गया है, कई डेवलपर अपनी परियोजनाओं में पार्सल, वेबपैक, या बेबेल जैसे बिल्ड/ट्रांसपिलेशन टूल का उपयोग करते हैं, जिससे उन्हें आगामी जावास्क्रिप्ट सिंटैक्स का उपयोग करने की अनुमति मिलती है, पुराने ब्राउज़रों के लिए पिछड़ी संगतता प्रदान करती है, फाइलों को जोड़ती है, छोटा करती है, कोड विभाजन आदि करें।

5031
T.J. Crowder 21 मार्च 2020, 12:09
मैंने यूआरएल हैश का उपयोग करके पेज लोडिंग के बिना मेनू पर क्लिक करके गतिशील रूप से div लोड किया है। मेरी समस्या यह है कि जब मैं एक ही पृष्ठ पर 2/3 बार जेएस लोड करता हूं तो 2/3 बार क्लिक करता हूं। इसलिए हर घटना कई बार होती है। मैं उस कोड में जोड़ने से पहले पहले से ही पाद लेख/सिर में लोड जेएस फ़ाइल की जांच करना चाहता हूं: var js = document.createElement("script"); js.type = "पाठ/जावास्क्रिप्ट"; js.src = jsFilePath; document.body.appendChild(js);
 – 
Alien
15 अगस्त 2020, 20:33
आप गुलप (gulpjs.com) जैसी किसी चीज़ का उपयोग कर सकते हैं, ताकि उन्हें एक ही फ़ाइल के रूप में आउटपुट के साथ प्रीप्रोसेस किया जा सके। उदाहरण के लिए: ए) कई जावास्क्रिप्ट फाइलों को एक साथ संयोजित करें, बी) इसे पीछे की ओर संगत बनाने के लिए बेबेल का उपयोग करें, सी) टिप्पणियों, व्हाइटस्पेस इत्यादि को हटाने के लिए छोटा/बदसूरत करें। फिर, आपने न केवल उन फ़ाइलों को व्यवस्थित किया है बल्कि उन्हें अनुकूलित भी किया है साथ ही अन्य फ़ाइल स्वरूपों (जैसे सीएसएस और छवियों) के लिए ऐसा करने की क्षमता के साथ एक पाइपलाइन शुरू करके।
 – 
Steven Ventimiglia
22 फरवरी 2021, 04:48
इनमें से कौन सा समाधान ES3 में इस्तेमाल किया जा सकता है?
 – 
Jordan
9 सितंबर 2021, 01:38

अगर कोई कुछ अधिक उन्नत खोज रहा है, तो RequireJS आज़माएं। आपको निर्भरता प्रबंधन, बेहतर संगामिति, और दोहराव से बचने जैसे अतिरिक्त लाभ मिलेंगे (अर्थात, एक से अधिक बार स्क्रिप्ट प्राप्त करना)।

आप अपनी जावास्क्रिप्ट फाइलों को "मॉड्यूल" में लिख सकते हैं और फिर उन्हें अन्य लिपियों में निर्भरता के रूप में संदर्भित कर सकते हैं। या आप RequJS को एक साधारण "जाओ इस स्क्रिप्ट को प्राप्त करें" समाधान के रूप में उपयोग कर सकते हैं।

उदाहरण:

निर्भरता को मॉड्यूल के रूप में परिभाषित करें:

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

कार्यान्वयन.js आपकी "मुख्य" JavaScript फ़ाइल है जो some-dependency.js पर निर्भर करती है

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

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

GitHub README का अंश:

RequJS सादे जावास्क्रिप्ट फ़ाइलों के साथ-साथ अधिक परिभाषित मॉड्यूल लोड करता है। इसे वेब वर्कर सहित इन-ब्राउज़र उपयोग के लिए अनुकूलित किया गया है, लेकिन इसका उपयोग अन्य जावास्क्रिप्ट वातावरणों में किया जा सकता है, जैसे राइनो और नोड। यह एसिंक्रोनस मॉड्यूल एपीआई को लागू करता है।

RequJS मॉड्यूल/फ़ाइलों को लोड करने के लिए सादे स्क्रिप्ट टैग का उपयोग करता है, इसलिए इसे करना चाहिए आसान डिबगिंग के लिए अनुमति दें। इसका उपयोग केवल मौजूदा लोड करने के लिए किया जा सकता है JavaScript फ़ाइलें, इसलिए आप इसे अपने मौजूदा प्रोजेक्ट में बिना जोड़ सकते हैं अपनी JavaScript फ़ाइलों को फिर से लिखना पड़ रहा है।

...

608
Peter Mortensen 28 सितंबर 2013, 17:11

वास्तव में एक जावास्क्रिप्ट फ़ाइल को लोड करने का एक तरीका है नहीं एसिंक्रोनस रूप से, ताकि आप इसे लोड करने के ठीक बाद अपनी नई लोड की गई फ़ाइल में शामिल कार्यों का उपयोग कर सकें, और मुझे लगता है कि यह काम करता है सभी ब्राउज़र।

आपको अपने पृष्ठ के <head> तत्व पर jQuery.append() का उपयोग करना होगा, अर्थात:

$("head").append($("<script></script>").attr("src", url));

/* Note that following line of code is incorrect because it doesn't escape the
 * HTML attribute src correctly and will fail if `url` contains special characters:
 * $("head").append('<script src="' + url + '"></script>');
 */

हालांकि, इस पद्धति में भी एक समस्या है: यदि आयातित जावास्क्रिप्ट फ़ाइल में कोई त्रुटि होती है, तो Firebug< /a> (और Firefox त्रुटि कंसोल और Chrome डेवलपर टूल भी रिपोर्ट करेंगे) इसकी जगह गलत है, जो एक बड़ी समस्या है यदि आप जावास्क्रिप्ट त्रुटियों को ट्रैक करने के लिए फ़ायरबग का उपयोग करते हैं (मैं करता हूं)। फ़ायरबग किसी कारण से नई लोड की गई फ़ाइल के बारे में नहीं जानता है, इसलिए यदि उस फ़ाइल में कोई त्रुटि होती है, तो यह रिपोर्ट करता है कि यह आपके मुख्य HTML फ़ाइल, और आपको त्रुटि के वास्तविक कारण का पता लगाने में परेशानी होगी।

लेकिन अगर यह आपके लिए कोई समस्या नहीं है, तो यह तरीका काम करना चाहिए।

मैंने वास्तव में $.import_js() नामक एक jQuery प्लगइन लिखा है जो इस विधि का उपयोग करता है:

(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></script').attr('src', script));
                import_js_imported.push(script);
            }
        }
    });
    
})(jQuery);

तो जावास्क्रिप्ट आयात करने के लिए आपको बस इतना करना होगा:

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

मैंने इसके लिए उदाहरण पर एक सरल परीक्षण भी किया है।

इसमें मुख्य HTML में एक main.js फ़ाइल शामिल है और फिर main.js में स्क्रिप्ट $.import_js() का उपयोग included.js नामक एक अतिरिक्त फ़ाइल आयात करने के लिए करती है, जो इस फ़ंक्शन को परिभाषित करती है:

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

और included.js को शामिल करने के ठीक बाद, hello() फ़ंक्शन को कॉल किया जाता है, और आपको अलर्ट मिलता है।

(यह उत्तर ई-सैटिस की टिप्पणी के जवाब में है)।

223
Flimm 12 मई 2021, 15:57

आपके लिए एक अच्छी खबर है। बहुत जल्द आप आसानी से जावास्क्रिप्ट कोड लोड करने में सक्षम होंगे। यह जावास्क्रिप्ट कोड के मॉड्यूल आयात करने का एक मानक तरीका बन जाएगा और कोर जावास्क्रिप्ट का ही हिस्सा होगा।

फ़ाइल cond.js से cond नाम का मैक्रो लोड करने के लिए आपको बस import cond from 'cond.js'; लिखना होगा।

इसलिए आपको किसी जावास्क्रिप्ट ढांचे पर भरोसा करने की आवश्यकता नहीं है और न ही आपको स्पष्ट रूप से Ajax कॉल करने की आवश्यकता है।

को देखें:

112
Peter Mortensen 19 अक्टूबर 2014, 22:05
1
सात साल बाद, यह उत्तर काम नहीं करता है: "सिंटैक्स त्रुटि: आयात घोषणाएं केवल मॉड्यूल के शीर्ष स्तर पर दिखाई दे सकती हैं"।
 – 
David Spector
27 मई 2021, 18:52
अपना कोड साझा करें जो आप करने की कोशिश कर रहे हैं।
 – 
Imdad
31 मई 2021, 15:06
ठीक है, यहां कोड है जो अच्छी तरह से काम करता है: फ़ंक्शन शामिल करें (jsFilePath) { var js = d.createElement ("स्क्रिप्ट"); js.type = "पाठ/जावास्क्रिप्ट"; js.src = jsFilePath; d.body.appendChild(js); } // शामिल
 – 
David Spector
31 मई 2021, 20:04

एक जावास्क्रिप्ट टैग को गतिशील रूप से उत्पन्न करना और इसे अन्य जावास्क्रिप्ट कोड के अंदर से HTML दस्तावेज़ में जोड़ना संभव है। यह लक्षित जावास्क्रिप्ट फ़ाइल लोड करेगा।

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");
115
Peter Mortensen 28 सितंबर 2013, 16:44

स्टेटमेंट import ECMAScript में है 6.

वाक्य - विन्यास

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;
87
Peter Mortensen 11 पद 2016, 12:47

हो सकता है कि आप इस फ़ंक्शन का उपयोग कर सकते हैं जो मुझे इस पृष्ठ पर मिला है मैं एक जावास्क्रिप्ट कैसे शामिल करूं? जावास्क्रिप्ट फ़ाइल में फ़ाइल?:

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}
66
Ajeet Lakhani 15 नवम्बर 2014, 20:01

यहां सिंक्रोनस संस्करण 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);
}

ध्यान दें कि इस कार्यशील क्रॉस-डोमेन को प्राप्त करने के लिए, सर्वर को इसके प्रतिसाद में allow-origin शीर्षलेख सेट करने की आवश्यकता होगी।

59
Flimm 18 जून 2015, 17:44

मैंने अभी यह जावास्क्रिप्ट कोड लिखा है (Prototype का उपयोग करके DOM हेरफेर):

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

उपयोग:

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

सार: http://gist.github.com/284442

54
Talha Awan 26 जून 2017, 00:04

फेसबुक अपने सर्वव्यापी लाइक बटन के लिए इसे कैसे करता है इसका सामान्यीकृत संस्करण यहां दिया गया है:

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

अगर यह फेसबुक के लिए काम करता है, तो यह आपके लिए काम करेगा।

हम head या body के बजाय पहले script तत्व की तलाश क्यों करते हैं, क्योंकि कुछ ब्राउज़र गायब होने पर एक नहीं बनाते हैं, लेकिन हमें एक script तत्व - यह वाला। अधिक पढ़ें http://www.jspatterns.com/the-ridiculous- केस-ऑफ-ऐडिंग-ए-स्क्रिप्ट-एलिमेंट/.

52
Dan Dascalescu 8 जुलाई 2015, 05:48

यदि आप इसे शुद्ध जावास्क्रिप्ट में चाहते हैं, तो आप document.write का उपयोग कर सकते हैं।

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

यदि आप jQuery लाइब्रेरी का उपयोग करते हैं, तो आप $.getScript विधि का उपयोग कर सकते हैं।

$.getScript("another_script.js");
50
Peter Mortensen 3 अक्टूबर 2020, 23:47

आप PHP का उपयोग करके भी अपनी स्क्रिप्ट को असेंबल कर सकते हैं:

फ़ाइल 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
37
Peter Mortensen 28 सितंबर 2013, 16:50

यहां दिखाए गए अधिकांश समाधान गतिशील लोडिंग का संकेत देते हैं। मैं इसके बजाय एक कंपाइलर की खोज कर रहा था जो सभी निर्भर फाइलों को एक आउटपुट फाइल में इकट्ठा करता है। वही Less/Sass प्रीप्रोसेसर नियम के तहत CSS @import से निपटते हैं। चूंकि मुझे इस तरह का कुछ भी अच्छा नहीं लगा, इसलिए मैंने इस मुद्दे को हल करने वाला एक सरल टूल लिखा।

तो यहाँ संकलक है, https://github.com/dsheiko/jsic, जो अनुरोध के साथ $import("file-path") को बदल देता है सामग्री को सुरक्षित रूप से फ़ाइल करें। संबंधित ग्रंट प्लगइन यहां दिया गया है: https:// github.com/dsheiko/grunt-jsic

JQuery मास्टर शाखा पर, वे केवल परमाणु स्रोत फ़ाइलों को intro.js से शुरू होने वाले और outtro.js के साथ समाप्त होने वाले एकल में जोड़ते हैं। यह मुझे शोभा नहीं देता क्योंकि यह स्रोत कोड डिजाइन पर कोई लचीलापन प्रदान नहीं करता है। देखें कि यह jsic के साथ कैसे काम करता है:

src/main.js

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

src/Form/Input/Tel.js

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

अब हम कंपाइलर चला सकते हैं:

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

और संयुक्त फ़ाइल प्राप्त करें

बिल्ड/मेन.जेएस

var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};
32
Peter Mortensen 19 अक्टूबर 2014, 22:13

यदि JavaScript फ़ाइल लोड करने का आपका इरादा आयातित/शामिल फ़ाइल से फ़ंक्शन का उपयोग करना है, तो आप एक वैश्विक ऑब्जेक्ट को भी परिभाषित कर सकते हैं और फ़ंक्शन को ऑब्जेक्ट आइटम के रूप में सेट कर सकते हैं। उदाहरण के लिए:

वैश्विक.जेएस

A = {};

File1.js

A.func1 = function() {
  console.log("func1");
}

File2.js

A.func2 = function() {
  console.log("func2");
}

Main.js

A.func1();
A.func2();

जब आप किसी HTML फ़ाइल में स्क्रिप्ट शामिल कर रहे हों तो आपको केवल सावधान रहने की आवश्यकता है। आदेश नीचे जैसा होना चाहिए:

<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>
29
Peter Mortensen 11 पद 2016, 12:42
यह एक अच्छा विचार नहीं है जब आपके पास बहुत सी अलग फ़ाइलें हों; आप जितनी अधिक फाइलें बनाएंगे, क्लाइंट से उतने ही अधिक अनुरोध भेजे जाएंगे, जो लोडिंग को लंबा बनाता है और पेज एसईओ को भी प्रभावित कर सकता है।
 – 
YektaDev
12 अप्रैल 2021, 11:00

यह करना चाहिए:

xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
25
Peter Mortensen 2 नवम्बर 2014, 16:50

या रन टाइम में शामिल करने के बजाय, अपलोड करने से पहले एक स्क्रिप्ट का उपयोग करें।

मैं Sprockets का उपयोग करता हूं (मुझे नहीं पता कि अन्य हैं या नहीं)। आप अपने जावास्क्रिप्ट कोड को अलग-अलग फाइलों में बनाते हैं और उन टिप्पणियों को शामिल करते हैं जिन्हें स्प्राकेट्स इंजन द्वारा संसाधित किया जाता है। विकास के लिए आप क्रमिक रूप से फाइलों को शामिल कर सकते हैं, फिर उत्पादन के लिए उन्हें मर्ज कर सकते हैं ...

यह सभी देखें:

25
Peter Mortensen 19 अक्टूबर 2014, 22:02

मेरे पास एक साधारण समस्या थी, लेकिन मैं इस प्रश्न के उत्तर से चकित था।

मुझे एक जावास्क्रिप्ट फ़ाइल (myvariables.js) में परिभाषित एक चर (myVar1) का उपयोग किसी अन्य जावास्क्रिप्ट फ़ाइल (main.js) में करना था।

इसके लिए मैंने नीचे जैसा किया:

HTML फ़ाइल में JavaScript कोड को सही क्रम में लोड किया, पहले myvariables.js, फिर main.js:

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

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

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

फ़ाइल: myvariables.js

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

फ़ाइल: main.js

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

जैसा कि आपने देखा, मैंने एक जावास्क्रिप्ट फ़ाइल में एक अन्य जावास्क्रिप्ट फ़ाइल में एक चर का उपयोग किया था, लेकिन मुझे एक को दूसरे में शामिल करने की आवश्यकता नहीं थी। मुझे बस यह सुनिश्चित करने की ज़रूरत है कि पहली जावास्क्रिप्ट फ़ाइल दूसरी जावास्क्रिप्ट फ़ाइल से पहले लोड हो गई है, और पहली जावास्क्रिप्ट फ़ाइल के चर दूसरी जावास्क्रिप्ट फ़ाइल में स्वचालित रूप से पहुंच योग्य हैं।

इससे मेरा दिन बच गया। आशा है कि ये आपकी मदद करेगा।

23
Peter Mortensen 11 पद 2016, 12:45

यदि आप वेब वर्कर्स का उपयोग कर रहे हैं और इसमें शामिल करना चाहते हैं कार्यकर्ता के दायरे में अतिरिक्त स्क्रिप्ट, head टैग, आदि में स्क्रिप्ट जोड़ने के बारे में दिए गए अन्य उत्तर आपके काम नहीं आएंगे।

सौभाग्य से, वेब वर्कर्स का अपना importScripts फ़ंक्शन है जो वेब वर्कर के दायरे में एक वैश्विक कार्य है, जो स्वयं ब्राउज़र का मूल निवासी है क्योंकि यह विनिर्देश का हिस्सा है

वैकल्पिक रूप से, आपके प्रश्न के दूसरे सबसे अधिक वोट वाले उत्तर के रूप में, RequJS एक वेब वर्कर के अंदर स्क्रिप्ट सहित (संभवतः importScripts को ही कॉल कर सकता है, लेकिन कुछ अन्य उपयोगी सुविधाओं के साथ) भी संभाल सकता है।

18
Community 23 मई 2017, 15:34

CSS जैसी जावास्क्रिप्ट को आयात करने के लिए @import सिंटैक्स उनके विशेष .mix फ़ाइल प्रकार के माध्यम से मिक्सचर जैसे टूल का उपयोग करके संभव है (देखें यहां)। मुझे लगता है कि एप्लिकेशन उपर्युक्त विधियों में से एक के माध्यम से ऐसा करता है।

.mix फाइलों पर मिक्सचर डॉक्यूमेंटेशन से:

मिक्स फ़ाइलें केवल .js या .css फ़ाइलें होती हैं जिनमें .mix होता है। फ़ाइल नाम में। एक मिक्स फ़ाइल सामान्य शैली या स्क्रिप्ट फ़ाइल की कार्यक्षमता का विस्तार करती है और आपको आयात और संयोजन करने की अनुमति देती है।

यहाँ एक उदाहरण .mix फ़ाइल है जो अनेक .js फ़ाइलों को एक में जोड़ती है:

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

मिश्रण इसे scripts-global.js के रूप में आउटपुट करता है और एक छोटा संस्करण (scripts-global.min.js) के रूप में भी।

नोट: मैं किसी भी तरह से मिक्सचर से संबद्ध नहीं हूं, सिवाय इसे फ्रंट-एंड डेवलपमेंट टूल के रूप में उपयोग करने के। एक .mix जावास्क्रिप्ट फ़ाइल को क्रिया में (मिक्स्चर बॉयलरप्लेट्स में से एक में) देखकर और इससे थोड़ा भ्रमित होने पर ("आप यह कर सकते हैं?" मैंने अपने आप को सोचा)। तब मुझे एहसास हुआ कि यह एक एप्लिकेशन-विशिष्ट फ़ाइल प्रकार था (कुछ हद तक निराशाजनक, सहमत)। फिर भी, लगा कि ज्ञान दूसरों के लिए मददगार हो सकता है।

नोट: मिक्सचर को 2016/07/26 को बंद कर दिया गया था (2015/04/12 को ओपन सोर्स किए जाने के बाद)।

19
Isaac Gregson 5 अक्टूबर 2020, 20:34
"अपडेट" (मेटा जानकारी जो इस पोस्ट के संशोधन इतिहास से संबंधित है) से बचना बेहतर है। इसके बजाय इसे सामग्री पर लागू करें (इस पोस्ट पर नहीं), उदा। "मिक्स्चर 2015-04-12 को ओपन सोर्स किया गया था, और इसे 2016-07-26 को बंद कर दिया गया था।"
 – 
Peter Mortensen
3 अक्टूबर 2020, 23:50

मेरी सामान्य विधि है:

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

यह बहुत अच्छा काम करता है और मेरे लिए पेज-रीलोड का उपयोग नहीं करता है। मैंने AJAX विधि (अन्य उत्तरों में से एक) की कोशिश की है लेकिन ऐसा लगता है कि यह मेरे लिए अच्छी तरह से काम नहीं कर रहा है।

यहां एक स्पष्टीकरण दिया गया है कि कोड उन लोगों के लिए कैसे काम करता है जो उत्सुक हैं: अनिवार्य रूप से, यह URL का एक नया स्क्रिप्ट टैग (पहले वाले के बाद) बनाता है। यह इसे एसिंक्रोनस मोड पर सेट करता है, इसलिए यह बाकी कोड को ब्लॉक नहीं करता है, लेकिन जब रेडीस्टेट (लोड की जाने वाली सामग्री की स्थिति) 'लोड' में बदल जाता है, तो कॉलबैक कॉल करता है।

14
Christopher Dumas 26 अगस्त 2017, 20:02
var js = document.createElement("script");

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

document.body.appendChild(js);
16
Spudley 22 अगस्त 2012, 10:44

मैंने एक साधारण मॉड्यूल लिखा है जो जावास्क्रिप्ट में मॉड्यूल स्क्रिप्ट को आयात/सहित करने के काम को स्वचालित करता है। कोड की विस्तृत व्याख्या के लिए, ब्लॉग पोस्ट देखें जावास्क्रिप्ट को मॉड्यूल की आवश्यकता/आयात/शामिल हैं

// ----- 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);
};
13
Peter Mortensen 19 अक्टूबर 2014, 22:26

हालांकि ये उत्तर बहुत अच्छे हैं, एक सरल "समाधान" है जो स्क्रिप्ट लोड होने के बाद से मौजूद है, और यह अधिकांश लोगों के उपयोग के मामलों के 99.999% को कवर करेगा। बस उस स्क्रिप्ट को शामिल करें जिसकी आपको उस स्क्रिप्ट से पहले आवश्यकता है जिसके लिए इसकी आवश्यकता है। अधिकांश परियोजनाओं के लिए यह निर्धारित करने में देर नहीं लगती कि किन लिपियों की आवश्यकता है और किस क्रम में।

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

यदि स्क्रिप्ट 2 को स्क्रिप्ट 1 की आवश्यकता है, तो यह वास्तव में ऐसा कुछ करने का सबसे आसान तरीका है। मुझे बहुत आश्चर्य है कि किसी ने भी इसे नहीं लाया है, क्योंकि यह सबसे स्पष्ट और सरल उत्तर है जो लगभग हर एक मामले में लागू होगा।

16
KthProg 12 अप्रैल 2018, 22:38
यह एक अच्छा जवाब है। हो सकता है कि यह छूट गया हो क्योंकि यह सीधे प्रश्न का उत्तर नहीं देता है, लेकिन यह समझना भी महत्वपूर्ण है कि 'आपको आमतौर पर ऐसा करने की आवश्यकता नहीं होती है'। खासकर जब से अन्य समाधान इतने गड़बड़ हैं।
 – 
Nathan Kovner
27 जुलाई 2020, 21:44
लेकिन यह केवल एक वेब ब्राउज़र में काम करता है? ऑफ़लाइन इकाई परीक्षण (जैसे, Node.js के अंतर्गत) के बारे में क्या?
 – 
Peter Mortensen
3 अक्टूबर 2020, 23:31
यह उत्तर यहां विस्तृत 2015 उत्तर के समान है - stackoverflow.com/a/31552759/984471
 – 
Manohar Reddy Poreddy
24 सितंबर 2021, 05:45

यह स्क्रिप्ट किसी अन्य <script> टैग के शीर्ष पर एक JavaScript फ़ाइल जोड़ देगी:

(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);
})();
13
Peter Mortensen 3 अक्टूबर 2020, 23:47

एक Head.js भी है। इससे निपटना बहुत आसान है:

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

जैसा कि आप देख सकते हैं, यह Require.js से आसान है और jQuery की $.getScript विधि जितना सुविधाजनक है। इसमें कुछ उन्नत सुविधाएं भी हैं, जैसे सशर्त लोडिंग, सुविधा का पता लगाना और और भी बहुत कुछ

10
Peter Mortensen 19 अक्टूबर 2014, 22:18

इस प्रश्न के कई संभावित उत्तर हैं। मेरा उत्तर स्पष्ट रूप से उनमें से कई पर आधारित है। सभी उत्तरों को पढ़ने के बाद मैंने यही समाप्त किया।

$.getScript के साथ समस्या और वास्तव में कोई अन्य समाधान जिसके लिए लोडिंग पूर्ण होने पर कॉलबैक की आवश्यकता होती है, यह है कि यदि आपके पास कई फाइलें हैं जो इसका उपयोग करती हैं और एक दूसरे पर निर्भर हैं तो आपके पास यह जानने का कोई तरीका नहीं है कि सभी स्क्रिप्ट कब लोड हो गई हैं (एक बार वे कई फाइलों में नेस्टेड हैं)।

उदाहरण:

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

आप सही हैं जब आप कहते हैं कि आप अजाक्स को समकालिक रूप से चलाने के लिए निर्दिष्ट कर सकते हैं या XMLHttpRequest का उपयोग कर सकते हैं, लेकिन ऐसा प्रतीत होता है कि वर्तमान प्रवृत्ति सिंक्रोनस अनुरोधों का बहिष्कार करने की है, इसलिए हो सकता है कि आपको अभी या भविष्य में पूर्ण ब्राउज़र समर्थन न मिले।

आप आस्थगित वस्तुओं की एक सरणी की जांच करने के लिए $.when का उपयोग करने का प्रयास कर सकते हैं, लेकिन अब आप इसे प्रत्येक फ़ाइल में कर रहे हैं और फ़ाइल 2 को जैसे ही $.when निष्पादित किया जाएगा, तब लोड माना जाएगा जब कॉलबैक निष्पादित नहीं किया जाता है , इसलिए file3 लोड होने से पहले file1 अभी भी निष्पादन जारी रखता है। यह वास्तव में अभी भी वही समस्या है।

मैंने आगे की बजाय पीछे की ओर जाने का फैसला किया। धन्यवाद document.writeln। मुझे पता है कि यह वर्जित है, लेकिन जब तक इसका सही तरीके से उपयोग किया जाता है, यह अच्छी तरह से काम करता है। आप कोड के साथ समाप्त होते हैं जिसे आसानी से डीबग किया जा सकता है, डीओएम में सही ढंग से दिखाता है और यह सुनिश्चित कर सकता है कि निर्भरताओं को सही ढंग से लोड किया गया है।

आप निश्चित रूप से $ ("बॉडी") का उपयोग कर सकते हैं। संलग्न करें (), लेकिन फिर आप अब और सही ढंग से डीबग नहीं कर सकते हैं।

नोट: आपको इसका उपयोग तभी करना चाहिए जब पेज लोड हो रहा हो, अन्यथा आपको एक खाली स्क्रीन मिलती है। दूसरे शब्दों में, इसे हमेशा document.ready के पहले/बाहर रखें। एक क्लिक ईवेंट या उसके जैसा कुछ भी पृष्ठ लोड होने के बाद मैंने इसका उपयोग करके परीक्षण नहीं किया है, लेकिन मुझे पूरा यकीन है कि यह असफल हो जाएगा।

मुझे jQuery का विस्तार करने का विचार पसंद आया, लेकिन जाहिर है कि आपको इसकी आवश्यकता नहीं है।

document.writeln को कॉल करने से पहले, यह यह सुनिश्चित करने के लिए जांच करता है कि स्क्रिप्ट पहले से ही सभी स्क्रिप्ट तत्वों का मूल्यांकन करके लोड नहीं हो रही है।

मुझे लगता है कि एक स्क्रिप्ट पूरी तरह से तब तक निष्पादित नहीं होती है जब तक कि उसके document.ready ईवेंट को निष्पादित नहीं किया जाता है। (मुझे पता है कि document.ready का उपयोग करना आवश्यक नहीं है, लेकिन बहुत से लोग इसका उपयोग करते हैं, और इसे संभालना एक सुरक्षा उपाय है।)

जब अतिरिक्त फ़ाइलें लोड की जाती हैं तो document.ready कॉलबैक गलत क्रम में निष्पादित हो जाएंगे। इसे संबोधित करने के लिए जब एक स्क्रिप्ट वास्तव में लोड की जाती है, तो जिस स्क्रिप्ट को आयात किया जाता है उसे फिर से आयात किया जाता है और निष्पादन रोक दिया जाता है। यह मूल फ़ाइल को अब इसके document.ready कॉलबैक को किसी भी स्क्रिप्ट से आयात करने के बाद निष्पादित करता है।

इस दृष्टिकोण के बजाय आप jQuery readyList को संशोधित करने का प्रयास कर सकते हैं, लेकिन यह एक बदतर समाधान की तरह लग रहा था।

समाधान:

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

उपयोग:

फ़ाइल3:

var f3obj = "file3";

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

फ़ाइल2:

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

फ़ाइल1:

$.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"
});
10
Community 20 जून 2020, 12:12

जावास्क्रिप्ट में मॉड्यूल को लागू करने के कई तरीके हैं। यहाँ दो सबसे लोकप्रिय हैं:

ES6 मॉड्यूल

ब्राउज़र अभी तक इस मॉड्यूलिंग सिस्टम का समर्थन नहीं करते हैं, इसलिए इस सिंटैक्स का उपयोग करने के लिए आपको जैसे बंडलर का उपयोग करना चाहिए। वेबपैक. बंडलर का उपयोग करना वैसे भी बेहतर है क्योंकि यह आपकी सभी अलग-अलग फाइलों को एक (या कुछ संबंधित) फाइलों में जोड़ सकता है। यह सर्वर से क्लाइंट तक फाइलों को तेजी से सेवा देगा क्योंकि प्रत्येक HTTP अनुरोध में इसके साथ कुछ संबद्ध ओवरहेड होता है। इस प्रकार समग्र HTTP अनुरोध को कम करके हम प्रदर्शन में सुधार करते हैं। यहाँ 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 (Node.js में प्रयुक्त)

इस मॉड्यूलिंग सिस्टम का उपयोग Node.js में किया जाता है। आप मूल रूप से अपने निर्यात को एक वस्तु में जोड़ते हैं जिसे module.exports कहा जाता है। फिर आप इस ऑब्जेक्ट को require('modulePath') के माध्यम से एक्सेस कर सकते हैं। यहां महत्वपूर्ण यह महसूस करना है कि इन मॉड्यूल को कैश किया जा रहा है, इसलिए यदि आप require() एक निश्चित मॉड्यूल को दो बार दोहराते हैं तो यह पहले से बनाए गए मॉड्यूल को वापस कर देगा।

// 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
12
Peter Mortensen 3 अक्टूबर 2020, 23:17

मैं इस प्रश्न पर आया क्योंकि मैं उपयोगी जावास्क्रिप्ट प्लगइन्स के संग्रह को बनाए रखने का एक आसान तरीका ढूंढ रहा था। यहां कुछ समाधान देखने के बाद, मैं इसके साथ आया:

  1. "plugins.js" (या एक्सटेंशन.जेएस या जो भी आप चाहते हैं) नामक फ़ाइल सेट करें। अपनी प्लगइन फाइलों को उस एक मास्टर फाइल के साथ रखें।

  2. plugins.js में pluginNames[] नामक एक सरणी होगी जिसे हम each() पर पुनरावृति करेंगे, फिर प्रत्येक प्लगइन के लिए सिर पर एक <script> टैग संलग्न करें

//set array to be updated when we add or remove plugin files
var pluginNames = ["lettering", "fittext", "butterjam", etc.];

//one script tag for each plugin
$.each(pluginNames, function(){
    $('head').append('<script src="js/plugins/' + this + '.js"></script>');
});
  1. अपने दिमाग में केवल एक फ़ाइल को मैन्युअल रूप से कॉल करें:
    <script src="js/plugins/plugins.js"></script>

लेकिन:

भले ही सभी प्लगइन्स उसी तरह से हेड टैग में गिर जाते हैं, जिस तरह से उन्हें पेज पर क्लिक करने या रीफ्रेश करने पर हमेशा ब्राउज़र द्वारा नहीं चलाया जाता है।

मैंने पाया है कि PHP में केवल स्क्रिप्ट टैग लिखना अधिक विश्वसनीय है। आपको इसे केवल एक बार लिखना है और यह उतना ही काम है जितना कि जावास्क्रिप्ट का उपयोग करके प्लगइन को कॉल करना।

12
rgb_life 10 जिंदा 2020, 08:03
ध्यान दें कि यदि प्लगइननाम में विशेष वर्ण हैं, तो यह काम नहीं करेगा, और यहां तक ​​कि सुरक्षा भेद्यता भी हो सकती है। आपको यहां उचित एस्केपिंग का उपयोग करने की आवश्यकता है: $('head').append('<script src="js/plugins/' + this + '.js"></script>');
 – 
Flimm
12 मई 2021, 16:01

ES6 मॉड्यूल

हां, स्क्रिप्ट टैग में type="module" का उपयोग करें (समर्थन):

<script type="module" src="script.js"></script>

और एक script.js फ़ाइल में इस तरह की दूसरी फ़ाइल शामिल करें:

import { hello } from './module.js';
...
// alert(hello());

'module.js' में आपको फ़ंक्शन को एक्सपोर्ट करना होगा/ वर्ग जिसे आप आयात करेंगे:

export function hello() {
    return "Hello World";
}

एक कार्यशील उदाहरण यहां है

15
Peter Mortensen 3 अक्टूबर 2020, 23:06

इसे अच्छा, छोटा, सरल और बनाए रखने योग्य रखें! :]

// Third-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]);
    }
}

यह कोड केवल एक छोटा कार्यात्मक उदाहरण है जिसे किसी भी (या दिए गए) प्लेटफॉर्म पर पूर्ण समर्थन के लिए अतिरिक्त सुविधा कार्यक्षमता की आवश्यकता हो सकती है।

13
Peter Mortensen 3 अक्टूबर 2020, 23:55
स्पष्टीकरण क्रम में होगा। उदा. विचार क्या है (संचालन का सिद्धांत) और यह कैसे काम करता है?
 – 
Peter Mortensen
3 अक्टूबर 2020, 23:53