file - كيف أقوم بتضمين ملف JavaScript في ملف JavaScript آخر؟




import include (25)

هل هناك شيء ما في JavaScript مماثل لـ @import في CSS يسمح لك بتضمين ملف JavaScript داخل ملف JavaScript آخر؟


Answers

ربما يمكنك استخدام هذه الوظيفة التي وجدتها في هذه الصفحة كيف أقوم بتضمين ملف JavaScript في ملف 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)
}

إذا كانت نيتك لتحميل ملف جافا سكريبت تستخدم الدوال من الملف المستورد / المضمن ، يمكنك أيضًا تعريف كائن عمومي وتعيين الوظائف كعناصر الكائن. على سبيل المثال:

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>علامة أخرى :

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

إذا كنت تستخدم Web Workers وترغب في تضمين نصوص برمجية إضافية في نطاق العامل ، headفلن تعمل الإجابات الأخرى المقدمة حول إضافة نصوص إلى العلامة ، وما إلى ذلك.

لحسن الحظ، العمال الويب ديك خاصة بهم importScriptsوظيفة التي هي وظيفة العالمية في نطاق العمال ويب، الأم إلى المتصفح نفسه كما هو جزء من مواصفات .

بدلاً من ذلك ، باعتباره ثاني أعلى إجابة RequireJSتسليط الضوء على سؤالك ، يمكن لـ RequireJS أيضًا التعامل مع تضمين برامج نصية داخل أحد عمال الويب (يُطلق على ذلك على الأرجح importScripts، ولكن مع بعض الميزات المفيدة الأخرى).


معظم الحلول المعروضة هنا تشير إلى التحميل الديناميكي. كنت أبحث بدلاً من ذلك عن مترجم تجميع كل الملفات المعتمد في ملف إخراج واحد. نفس التعامل مع @import - Sass المسبقة مع @import في القاعدة. وبما أنني لم أجد أي شيء لائق من هذا النوع ، كتبت أداة بسيطة لحل المشكلة.

لذلك هنا المترجم ، https://github.com/dsheiko/jsic ، الذي يحل محل $import("file-path") مع محتوى الملف المطلوب بشكل آمن. هنا هو البرنامج المساعد Grunt المقابلة: https://github.com/dsheiko/grunt-jsic .

في الفرع الرئيسي jQuery ، يقومون ببساطة intro.js ملفات المصدر الذرية إلى ملف واحد بدءًا من intro.js وتنتهي بـ outtro.js . هذا لا يناسبني لأنه لا يوفر أي مرونة في تصميم شفرة المصدر. تحقق من كيفية عمله مع jsic:

SRC / main.js

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

SRC / نموذج / الإدخال / Tel.js

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

الآن يمكننا تشغيل المترجم:

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

واحصل على الملف المدمج

بناء / main.js

var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};

الإصدارات القديمة من جافا سكريبت لم يكن لديها أي استيراد أو تضمين أو طلب ، لذلك تم تطوير العديد من الطرق المختلفة لهذه المشكلة.

ولكن منذ عام 2015 (ES6) ، كان لدى جافا سكريبت معيار ES6 القياسي لاستيراد وحدات في Node.js ، والتي تدعمها أيضًا معظم المتصفحات الحديثة .

للتوافق مع المتصفحات القديمة ، يمكن استخدام أدوات build و / أو transpilation .

ES6 وحدات

تم دعم الوحدات النمطية ECMAScript (ES6) في Node.js منذ v8.5 ، مع العلم --experimental-modules . يجب أن تحتوي جميع الملفات المعنية على الامتداد .mjs .

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

وحدات ECMAScript في المتصفحات

حصلت المستعرضات على دعم لتحميل وحدات ECMAScript مباشرة (لا توجد أدوات مثل Webpack مطلوبة) since Safari 10.1 و Chrome 61 و Firefox 60 و Edge 16. تحقق من الدعم الحالي في caniuse .

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

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

هناك طرق أخرى لجافا سكريبت لتضمين محتويات جافا سكريبت خارجية في المتصفحات التي لا تتطلب معالجة مسبقة.

تحميل اجاكس

يمكنك تحميل نص إضافي بمكالمة AJAX ثم استخدام eval لتشغيله. هذه هي الطريقة الأكثر مباشرة ، ولكنها تقتصر على نطاقك بسبب نموذج أمان جافا سكريبت JavaScript. يؤدي استخدام eval أيضًا إلى فتح الباب أمام الأخطاء والأخطاء والمخترقات الأمنية.

jQuery Loading

توفر مكتبة jQuery وظائف التحميل في سطر واحد :

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

ديناميكي سيناريو التحميل

يمكنك إضافة علامة نصي مع URL البرنامج النصي إلى 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 المعطى للوظيفة كمعامل أول.

تتم مناقشة كل من هذه الحلول وتوضيحها في JavaScript Madness: Dynamic Script Loading .

اكتشاف متى تم تنفيذ النص البرمجي

الآن ، هناك مشكلة كبيرة يجب معرفتها. يعني ذلك أن تقوم بتحميل الرمز عن بعد . ستقوم متصفحات الويب الحديثة بتحميل الملف والحفاظ على تنفيذ البرنامج النصي الحالي الخاص بك لأنه يتم تحميل كل شيء بشكل غير متزامن لتحسين الأداء. (ينطبق هذا على كل من طريقة jQuery وأسلوب تحميل البرنامج النصي الديناميكي اليدوي.)

ويعني ذلك أنك إذا استخدمت هذه الحيل مباشرةً ، فلن تتمكن من استخدام الشفرة المحملة حديثًا في السطر التالي بعد أن تطلب تحميلها ، لأنه سيظل التحميل.

على سبيل المثال: يحتوي MySuperObject على 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);
}

ثم تكتب الرمز الذي تريد استخدامه بعد أن يتم تحميل البرنامج النصي في وظيفة lambda :

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

ثم تقوم بتشغيل كل ذلك:

loadScript("my_lovely_script.js", myPrettyCode);

لاحظ أن البرنامج النصي قد يتم تنفيذه بعد تحميل DOM ، أو قبل ذلك ، وفقًا للمتصفح وما إذا كنت قد قمت بتضمين script.async = false; . هناك مقالة رائعة حول تحميل جافا سكريبت بشكل عام والتي تناقش هذا.

كود المصدر دمج / تجهيز مسبق

كما ذكرنا في الجزء العلوي من هذه الإجابة ، يستخدم العديد من المطورين أداة (أدوات) البناء / التحويل مثل Parcel ، Webpack ، أو Babel في مشاريعهم ، مما يسمح لهم باستخدام بنية JavaScript القادمة ، وتوفير التوافق مع الإصدارات القديمة للمتصفحات القديمة ، دمج الملفات ، تصغير تنفيذ تقسيم الشفرة الخ


إذا كان أي شخص يبحث عن شيء أكثر تقدمًا ، جرّب RequireJS . ستحصل على فوائد إضافية مثل إدارة التبعية ، والتزام أفضل ، وتجنب الازدواجية (أي ، استرداد برنامج نصي أكثر من مرة واحدة).

يمكنك كتابة ملفات جافا سكريبت في "الوحدات النمطية" ثم الرجوع إليها كتركيبات في النصوص الأخرى. أو يمكنك استخدام RequireJS كحل بسيط "go get get".

مثال:

تعريف التبعيات كوحدات:

بعض-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 هو ملف جافا سكريبت "الرئيسي" الذي يعتمد على بعض dependency.js

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

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

مقتطفات من GitHub README:

RequireJS يقوم بتحميل ملفات JavaScript بسيطة بالإضافة إلى وحدات أكثر تحديدًا. تم تحسينه للاستخدام داخل المتصفح ، بما في ذلك في Web Worker ، ولكن يمكن استخدامه في بيئات JavaScript أخرى ، مثل Rhino و Node. إنها تطبق API الوحدة النمطية المتزامنة.

يستخدم RequireJS علامات برنامج نصي بسيط لتحميل الوحدات / الملفات ، لذلك يجب أن يسمح لتصحيح الأخطاء بسهولة. يمكن استخدامه ببساطة لتحميل ملفات JavaScript الموجودة ، حتى يمكنك إضافتها إلى مشروعك الحالي دون الحاجة إلى إعادة كتابة ملفات JavaScript.

...


لقد أتيت إلى هذا السؤال لأنني كنت أبحث عن طريقة بسيطة للحفاظ على مجموعة من مكونات جافا سكريبت المفيدة. بعد رؤية بعض الحلول هنا ، توصلت إلى هذا:

  1. قم بإعداد ملف يسمى "plugins.js" (أو extensions.js أو ماذا لديك). احتفظ بملفات المكونات الإضافية مع هذا الملف الرئيسي.

  2. سيكون لدى plugins.js مصفوفة تسمى "pluginNames []" والتي سنقوم بتكرارها فوق كل () ، ثم نلحق علامة على الرأس لكل ملحق

    // set array to be updated when add or remove remove plug files var pluginNames = ["lettering"، "fittext"، "butterjam"، etc.]؛ // علامة نصية واحدة لكل ملحق $ .each (pluginNames، function () {$ ('head'). إلحاق ('')؛})؛

  3. اتصل يدويًا بملف واحد فقط في رأسك:
    <script src="js/plugins/plugins.js"></script>

لقد اكتشفت أنه على الرغم من أن جميع المكونات الإضافية تم إسقاطها في علامة الرأس بالطريقة التي يجب عليها ، إلا أنه لم يتم تشغيلها دائمًا من قبل المتصفح عند النقر على الصفحة أو تحديثها.

لقد وجدت أنه أكثر موثوقية لمجرد كتابة العلامات النصي في تضمين PHP. ما عليك سوى كتابته مرة واحدة ، وهذا مجرد عمل كبير مثل استدعاء المكون الإضافي باستخدام جافا سكريبت.


أفضل استخدام طريقة jQuery . لتأجيل الحدث الجاهز ، قم أولاً بالاتصال $.holdReady(true). مثال ( source ):

$.holdReady(true);
$.getScript("myplugin.js", function() {
    $.holdReady(false);
});

هناك اخبار جيدة بالنسبة لك. قريبا جدا سوف تكون قادرا على تحميل شفرة جافا سكريبت بسهولة. وستصبح طريقة قياسية لاستيراد وحدات من شفرة جافا سكريبت وستكون جزءًا من جافا سكريبت الأساسي نفسه.

عليك ببساطة أن تكتب import cond from 'cond.js'; لتحميل ماكرو يسمى cond من ملف cond.js

لذلك لا تضطر إلى الاعتماد على أي إطار عمل JavaScript ولا يلزمك إجراء مكالمات Ajax صراحة.

تشير إلى:


لقد كتبت شفرة جافا سكريبت هذه (باستخدام 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 .


يمكن استخدام @importبناء الجملة لتحقيق استيراد جافا سكريبت مثل CSS باستخدام أداة مثل Mixture عبر .mixنوع الملف الخاص (انظر here ). أتخيل التطبيق يستخدم ببساطة واحدة من الأساليب المذكورة أعلاه بينيا ، على الرغم من أنني لا أعرف.

من وثائق Mixture على .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).

ملاحظة: أنا لست في أي شكل من الأشكال مع Mixture ، بخلاف استخدامه كأداة تطوير للجهة الأمامية. جئت عبر هذا السؤال عند رؤية .mixملف جافا سكريبت في العمل (في واحدة من mixler boilerplates) ويجري الخلط قليلا من قبل ذلك ("يمكنك القيام بذلك؟" فكرت في نفسي). ثم أدركت أنه كان نوع ملف خاص بالتطبيق (مخيب للآمال إلى حد ما ، متفق عليه). ومع ذلك ، فقد برزت المعرفة قد تكون مفيدة للآخرين.

استكمال : الخليط هو الآن مجانا (حاليا).

استكمال : يتم الآن إيقاف الخليط. لا تزال إصدارات الخليط القديمة متوفرة


في اللغة الحديثة سيكون

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

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;

هناك بالفعل طريقة لتحميل ملف جافا سكريبت بشكل غير متزامن ، بحيث يمكنك استخدام الوظائف المضمنة في الملف الذي تم تحميله حديثًا بعد تحميله مباشرة ، وأعتقد أنه يعمل في جميع المتصفحات.

تحتاج إلى استخدام jQuery.append() على عنصر <head> الخاص jQuery.append() ، وهذا هو:

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

ومع ذلك ، فإن هذه الطريقة بها أيضًا مشكلة: إذا حدث خطأ في ملف جافا سكريبت المستورد ، فإن Firebug (وكذلك وحدة تحكم في فايرفوكس للخطأ وأدوات مطوري Chrome أيضًا) سيبلغ عن مكانه بشكل غير صحيح ، وهو ما يمثل مشكلة كبيرة إذا كنت تستخدم Firebug لتتبع أخطاء جافا سكريبت كثيرا (أفعل). لا يعرف Firebug ببساطة عن الملف الذي تم تحميله حديثًا لسبب ما ، لذلك إذا حدث خطأ في ذلك الملف ، فإنه يشير إلى أنه حدث في ملف HTML الرئيسي ، وستجد صعوبة في معرفة السبب الحقيقي لهذا الخطأ.

ولكن إذا لم تكن هذه مشكلة بالنسبة لك ، فيجب أن تنجح هذه الطريقة.

لقد قمت بالفعل بكتابة ملحق jQuery يسمى $ .import_js () والذي يستخدم هذه الطريقة:

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

إذن كل ما عليك القيام به لاستيراد JavaScript هو:

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

أنا أيضا قدمت اختبار بسيط لهذا في Example .

يتضمن ملف main.js في HTML الرئيسي ، ثم يستخدم البرنامج النصي main.js $.import_js() لاستيراد ملف إضافي باسم included.js ، والذي يحدد هذه الوظيفة:

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

وبعد included.js hello() يتم استدعاء الدالة hello() ، وستحصل على التنبيه.

(هذا الجواب ردا على تعليق ساتيس الإلكتروني).


وهناك أيضا Head.js . من السهل التعامل مع:

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

كما ترون ، إنها أسهل من Require.js وملائمة $.getScriptلأسلوب jQuery . كما أن لديها بعض الميزات المتقدمة ، مثل التحميل المشروط ، والكشف عن الميزات وأكثر من ذلك بكثير .


هناك الكثير من الإجابات المحتملة لهذا السؤال. يستند جوابي بوضوح على عدد منهم. هذا ما انتهى به الأمر بعد قراءة جميع الإجابات.

المشكلة مع $.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...
});

أنت على حق عندما تقول أنه يمكنك تحديد Ajax للتشغيل بشكل متزامن أو استخدام XMLHttpRequest ، ولكن يبدو أن الاتجاه الحالي هو إهمال طلبات متزامنة ، لذلك قد لا تحصل على دعم المتصفح الكامل الآن أو في المستقبل.

يمكنك محاولة استخدام $.whenالتحقق من صفيف من الكائنات المؤجلة ، ولكنك الآن تقوم بذلك في كل ملف ، وسيتم اعتبار تحميل الملف 2 بمجرد $.whenتنفيذه وليس عند تنفيذ الاستدعاء ، لذلك يستمر الملف 1 في التنفيذ قبل تحميل الملف 3. . هذا حقا لا يزال لديه نفس المشكلة.

قررت العودة إلى الوراء بدلاً من الأمام. شكرا لك document.writeln. وأنا أعلم أنه من المحرمات ، ولكن طالما يتم استخدامه بشكل صحيح هذا يعمل بشكل جيد. ينتهي بك الأمر مع التعليمات البرمجية التي يمكن تصحيحها بسهولة ، ويظهر في DOM بشكل صحيح ويمكن أن تضمن ترتيب يتم تحميل التبعيات بشكل صحيح.

يمكنك بالطبع استخدام $ ("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";
});

FILE2:

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

إليك الإصدار العام لكيفية استخدام Facebook لهذا الزر "أعجبني" في كل مكان:

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

إذا كان يعمل لصالح Facebook ، فسيعمل من أجلك.

السبب في أننا نبحث عن عنصر script الأول بدلاً من head أو body لأن بعض المتصفحات لا تنشئ واحدة في حال فقدها ، ولكننا نضمن أن يكون لدينا عنصرًا script - هذا العنصر. اقرأ المزيد في http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/ .


هنا نسخة متزامنة دون 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 في استجابته.


أو بدلاً من تضمين وقت التشغيل ، استخدم برنامج نصي لسَلسَلة قبل التحميل.

يمكنني استخدام Sprockets (لا أعرف ما إذا كان هناك آخرون). تقوم بإنشاء تعليمات JavaScript البرمجية في ملفات منفصلة وتضمين التعليقات التي تتم معالجتها بواسطة محرك Sprockets كما هو مضمن. للتطوير ، يمكنك تضمين الملفات بشكل تسلسلي ، ثم لإنتاجها لدمجها ...

أنظر أيضا:


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

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

document.body.appendChild(js);

لقد قمت بإنشاء دالة تسمح لك باستخدام verbiage مشابهة لـ C # / Java لتضمين ملف JavaScript. لقد قمت باختباره قليلاً حتى من داخل ملف JavaScript آخر ويبدو أنه يعمل. لا يتطلب jQuery ولو قليلا من "السحر" في النهاية.

أضع هذا الرمز في ملف في جذر دليل البرنامج النصي الخاص بي (أسميته global.js، ولكن يمكنك استخدام كل ما تريد. وما لم أكن مخطئًا هذا ، يجب أن يكون jQuery النصوص البرمجية المطلوبة فقط في صفحة معينة. لا يتم اختباره إلى حد كبير أكثر من بعض الاستخدامات الأساسية ، لذلك قد يكون أو لا يكون هناك أي مشاكل في الطريقة التي قمت بها ؛ استخدم على مسؤوليتك الخاصة 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);
}

يجب أن يفعل هذا:

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

من الممكن إنشاء علامة JavaScript بشكل ديناميكي وإلحاقها بوثيقة 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");

خيار آخر للقيام بذلك هو:

يمكنك استخدام وظيفة المطابقة ، أي شيء من هذا القبيل:

x = "teststring";

if (x.match("test")) {
     // Code
}

يمكن أن تعمل match () أيضًا مع التعبير العادي:

x = "teststring";

if (x.match(/test/i)) {
     // Code
}




javascript file import include