javascript खोज - मैं एक जावास्क्रिप्ट फ़ाइल को किसी अन्य जावास्क्रिप्ट फ़ाइल में कैसे शामिल करूं?




की भाषा (25)

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

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

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


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

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

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


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

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

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

$.getScript("another_script.js");

var js = document.createElement("script");

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

document.body.appendChild(js);

आधुनिक भाषा में यह होगा

function loadJs( url ){
  return new Promise( resolve => {
    const script = document.createElement( "script" );
    script.src = url;
    script.onload = resolve;
    document.head.appendChild( script );
  });
}

एक और तरीका, मेरी राय में बहुत साफ है, एक <script> टैग का उपयोग करने के बजाय एक तुल्यकालिक अजाक्स अनुरोध करना है। यह भी है कि कैसे Node.js हैंडल शामिल हैं।

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

फिर आप इसे अपने कोड में उपयोग कर सकते हैं क्योंकि आप आम तौर पर इनमें शामिल होते हैं:

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

और अगली पंक्ति में आवश्यक स्क्रिप्ट से फ़ंक्शन कॉल करने में सक्षम हो:

subscript.doSomethingCool(); 

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 शीर्षलेख सेट करने की आवश्यकता होगी।


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

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

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


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

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

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 का एक नया स्क्रिप्ट टैग (पहले के बाद) बनाता है। यह इसे एसिंक्रोनस मोड में सेट करता है, इसलिए यह शेष कोड को अवरुद्ध नहीं करता है, लेकिन जब कॉलस्टेट (सामग्री लोड होने की स्थिति) लोड हो जाती है तो कॉलबैक कॉल करता है।


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

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

  2. plugins.js में "प्लगइन नाम []" नामक एक सरणी होगी जिसे हम प्रत्येक () पर फिर से चालू करेंगे, फिर प्रत्येक प्लगइन के लिए सिर पर एक टैग संलग्न करें

    // सेट सरणी को अद्यतन किया जाना चाहिए जब हम प्लगइन फ़ाइलों को जोड़ते या हटाते हैं var pluginNames = ["lettering", "fittext", "butterjam", आदि]; // प्रत्येक प्लगइन $ .each (प्लगइन नाम, फ़ंक्शन () {$ ('head') के लिए एक स्क्रिप्ट टैग। संलग्न करें ('');});

  3. अपने सिर में केवल एक फ़ाइल को मैन्युअल रूप से कॉल करें:
    <script src="js/plugins/plugins.js"></script>

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

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


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

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

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

    head.appendChild(script)
}

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

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

पुराने ब्राउज़र के साथ संगतता के लिए, build और / या transpilation उपकरण का उपयोग किया जा सकता है।

ईएस 6 मॉड्यूल

ECMAScript (ES6) मॉड्यूल को --experimental-modules बाद --experimental-modules में --experimental-modules ध्वज के साथ समर्थित किया गया है। शामिल सभी फाइलों में .mjs एक्सटेंशन होना चाहिए।

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

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

सफारी 10.1, क्रोम 61, फ़ायरफ़ॉक्स 60 और एज 16 के since ब्राउज़र को ईसीएमएस्क्रिप्ट मॉड्यूल को सीधे लोड करने के लिए समर्थन (वेबपैक की आवश्यकता नहीं है)। कैनियस पर वर्तमान समर्थन की जांच करें

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

यहां और पढ़ें: since

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

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

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

यहां और पढ़ें: https://developers.google.com/web/updates/2017/11/dynamic-import

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

मॉड्यूल आयात करने की पुरानी शैली, अभी भी व्यापक रूप से Node.js में उपयोग की जाती है, module.exports/require सिस्टम की 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 लोड हो रहा है

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

jQuery लोड हो रहा है

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

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

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

आप HTML में स्क्रिप्ट यूआरएल के साथ एक स्क्रिप्ट टैग जोड़ सकते हैं। 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 पर सेट किया गया है जो फ़ंक्शन को पहले पैरामीटर के रूप में दिया गया है।

इन दोनों समाधानों पर जावास्क्रिप्ट पागलपन में चर्चा और सचित्र हैं : गतिशील स्क्रिप्ट लोडिंग

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

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

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

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

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

loadScript("my_lovely_script.js", myPrettyCode);

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

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

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


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

xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);

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

global.js

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>

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

<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-case-of-adding-a-script-element/ पर और पढ़ें।


गतिशील रूप से एक जावास्क्रिप्ट टैग उत्पन्न करना और 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");

मेरे पास एक साधारण मुद्दा था, लेकिन मैं इस सवाल के जवाब से परेशान था।

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

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

HTML फ़ाइल में जावास्क्रिप्ट कोड को सही क्रम में, 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
    // ...
}
// ...

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

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


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

मैंने इस कोड को अपनी स्क्रिप्ट निर्देशिका की जड़ पर एक फ़ाइल में रखा है (मैंने इसे नाम दिया है global.js, लेकिन आप जो कुछ भी चाहते हैं उसका उपयोग कर सकते हैं। जब तक मैं इसे गलत नहीं करता हूं और jQuery किसी दिए गए पृष्ठ पर एकमात्र आवश्यक स्क्रिप्ट होना चाहिए। इसे ध्यान में रखें कुछ मूलभूत उपयोगों से काफी हद तक अनचाहे है, इसलिए मैंने इसे किए गए तरीके से कोई समस्या नहीं हो सकती है या नहीं हो सकता है; अपने जोखिम पर उपयोग करें yadda yadda अगर आप yadda yadda को कुछ भी पेंच करते हैं तो मैं ज़िम्मेदार नहीं हूं:

/**
* @fileoverview This file stores global functions that are required by other libraries.
*/

if (typeof(jQuery) === 'undefined') {
    throw 'jQuery is required.';
}

/** Defines the base script directory that all .js files are assumed to be organized under. */
var BASE_DIR = 'js/';

/**
* Loads the specified file, outputting it to the <head> HTMLElement.
*
* This method mimics the use of using in C# or import in Java, allowing
* JavaScript files to "load" other JavaScript files that they depend on
* using a familiar syntax.
*
* This method assumes all scripts are under a directory at the root and will
* append the .js file extension automatically.
*
* @param {string} file A file path to load using C#/Java "dot" syntax.
*
* Example Usage:
* imports('core.utils.extensions');
* This will output: <script type="text/javascript" src="/js/core/utils/extensions.js"></script>
*/
function imports(file) {
    var fileName = file.substr(file.lastIndexOf('.') + 1, file.length);

    // Convert PascalCase name to underscore_separated_name
    var regex = new RegExp(/([A-Z])/g);
    if (regex.test(fileName)) {
        var separated = fileName.replace(regex, ",$1").replace(',', '');
        fileName = separated.replace(/[,]/g, '_');
    }

    // Remove the original JavaScript file name to replace with underscore version
    file = file.substr(0, file.lastIndexOf('.'));

    // Convert the dot syntax to directory syntax to actually load the file
    if (file.indexOf('.') > 0) {
        file = file.replace(/[.]/g, '/');
    }

    var src = BASE_DIR + file + '/' + fileName.toLowerCase() + '.js';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;

    $('head').find('script:last').append(script);
}

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

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

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

हालांकि, इस विधि में भी एक समस्या है: यदि आयातित जावास्क्रिप्ट फ़ाइल में कोई त्रुटि होती है, तो Firebug (और फ़ायरफ़ॉक्स त्रुटि कंसोल और क्रोम डेवलपर टूल्स भी) गलत तरीके से इसकी जगह रिपोर्ट करेंगे, यदि आप ट्रैक करने के लिए फ़ायरबग का उपयोग करते हैं तो यह एक बड़ी समस्या है जावास्क्रिप्ट त्रुटियों को बहुत नीचे (मैं करता हूं)। फ़ायरबग बस किसी कारण से नई लोड की गई फ़ाइल के बारे में नहीं जानता है, इसलिए यदि उस फ़ाइल में कोई त्रुटि होती है, तो यह रिपोर्ट करता है कि यह आपकी मुख्य 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 type="text/javascript" src="' + script + '"></script>');
                import_js_imported.push(script);
            }
        }
    });

})(jQuery);

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

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

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

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

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

और शामिल.जेएस सहित, hello() फ़ंक्शन को कॉल किया जाता है, और आपको अलर्ट मिल जाता है।

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


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

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

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

को देखें:


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

.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जावास्क्रिप्ट फ़ाइल को क्रिया (एक मिश्रण बॉयलरप्लेट्स में) देखकर और थोड़ा उलझन में देख रहा था ("आप यह कर सकते हैं?" मैंने खुद को सोचा था)। तब मुझे एहसास हुआ कि यह एक एप्लिकेशन-विशिष्ट फ़ाइल प्रकार था (कुछ हद तक निराशाजनक, सहमत)। फिर भी, यह समझ लिया कि ज्ञान दूसरों के लिए सहायक हो सकता है।

अद्यतन : मिश्रण अब मुफ्त (ऑफ़लाइन) है।

अद्यतन : मिश्रण अब बंद कर दिया गया है। पुराने मिश्रण रिलीज अभी भी उपलब्ध हैं


स्टेटमेंट import ईसीएमएस्क्रिप्ट 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;

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

समस्या $.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को कॉलबैक निष्पादित नहीं होने पर निष्पादित होने पर लोड किया जाएगा , इसलिए फ़ाइल 1 लोड होने से पहले फ़ाइल 1 अभी भी निष्पादन जारी है । यह वास्तव में अभी भी एक ही समस्या है।

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

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

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

मुझे 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;
    }
});

उपयोग:

file3:

var f3obj = "file3";

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

करें 2:

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

file1:

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

आप appendTo फ़ंक्शन का उपयोग करना चाह सकते हैं (जो तत्व के अंत में जोड़ता है):

$("#source").appendTo("#destination");

वैकल्पिक रूप से आप prependTo फ़ंक्शन का उपयोग कर सकते हैं (जो तत्व की शुरुआत में जोड़ता है):

$("#source").prependTo("#destination");

उदाहरण:

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});
#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>





javascript file import include