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



javascript include file (20)

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

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

أنظر أيضا:

https://code.i-harness.com

هل هناك شيء ما في JavaScript مماثل لـ @import في CSS يسمح لك بتضمين ملف JavaScript داخل ملف 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.

...


إذا كنت تريد في جافا سكريبت خالص ، يمكنك استخدام document.write .

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

إذا كنت تستخدم مكتبة jQuery ، فيمكنك استخدام طريقة $.getScript .

$.getScript("another_script.js");

إليك الإصدار العام لكيفية استخدام 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/ .


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

طريقة أخرى ، في رأيي هي أنظف بكثير ، هي تقديم طلب Ajax متزامن بدلاً من استخدام علامة <script> . وهو أيضًا كيفية Node.js مقابض 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(); 

معظم الحلول المعروضة هنا تشير إلى التحميل الديناميكي. كنت أبحث بدلاً من ذلك عن مترجم تجميع كل الملفات المعتمد في ملف إخراج واحد. نفس التعامل مع @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(){}
    }
};

من الممكن إنشاء علامة 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");

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

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

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

تشير إلى:


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

تحتاج إلى استخدام 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() ، وستحصل على التنبيه.

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


يمكنك أيضًا تجميع نصوصك البرمجية باستخدام 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

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;

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

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

كانت لدي مشكلة بسيطة ، لكنني شعرت بالحيرة من ردود على هذا السؤال.

اضطررت إلى استخدام متغير (myVar1) معرف في ملف JavaScript واحد (myvariables.js) في ملف JavaScript آخر (main.js).

لهذا فعلت على النحو التالي:

تم تحميل شفرة جافا سكريبت في ملف 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
    // ...
}
// ...

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

هذا أنقذ يومي آمل أن يساعد هذا.


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

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

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


سيضيف هذا النص النصي ملف جافا سكريبت إلى أعلى أي <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);
})();

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

  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. ما عليك سوى كتابته مرة واحدة ، وهذا مجرد عمل كبير مثل استدعاء المكون الإضافي باستخدام جافا سكريبت.


لقد قمت بإنشاء دالة تسمح لك باستخدام 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);
}

وهناك أيضا 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 . كما أن لديها بعض الميزات المتقدمة ، مثل التحميل المشروط ، والكشف عن الميزات وأكثر من ذلك بكثير .


يمكن استخدام @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) ويجري الخلط قليلا من قبل ذلك ("يمكنك القيام بذلك؟" فكرت في نفسي). ثم أدركت أنه كان نوع ملف خاص بالتطبيق (مخيب للآمال إلى حد ما ، متفق عليه). ومع ذلك ، فقد برزت المعرفة قد تكون مفيدة للآخرين.

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

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





include