javascript - কিভাবে আমি অন্য জাভাস্ক্রিপ্ট ফাইল একটি জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করবেন?




file import (20)

জাভাস্ক্রিপ্টে কি এমন কিছু আছে যা সিএসএসের @import মতো যা আপনাকে অন্য জাভাস্ক্রিপ্ট ফাইলের ভিতরে একটি জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করতে দেয়?


আপনার জন্য একটি ভাল খবর আছে। খুব শীঘ্রই আপনি সহজেই জাভাস্ক্রিপ্ট কোড লোড করতে পারবেন। এটি জাভাস্ক্রিপ্ট কোডের মডিউল আমদানি করার একটি আদর্শ উপায় হয়ে ওঠে এবং এটি মূল জাভাস্ক্রিপ্টের অংশ হতে পারে।

আপনি কেবল import cond from 'cond.js'; লিখতে হবে import cond from 'cond.js'; cond.js একটি ফাইল থেকে cond নামে একটি ম্যাক্রো লোড করতে।

তাই আপনাকে কোনও জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের উপর নির্ভর করতে হবে না এবং আপনাকে স্পষ্টভাবে Ajax কল করতে হবে না।

নির্দেশ করে:


আপনি 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

আমি শুধু এই জাভাস্ক্রিপ্ট কোড লিখেছি ( DOM ম্যানিপুলেশন জন্য Prototype ব্যবহার করে):

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


আরেকটি উপায়, আমার মতামত অনেক ক্লিনার, একটি <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 শিরোনাম সেট করতে হবে।


এখানে দেখানো সমাধান অধিকাংশ গতিশীল লোডিং বোঝায়। আমি পরিবর্তে একটি কম্পাইলারের জন্য অনুসন্ধান করছিলাম যা সমস্ত নির্ভরযোগ্য ফাইলগুলিকে একক আউটপুট ফাইলে যুক্ত করে। Less / Sass @import সিএসএস @import -এ- @import সাথে চুক্তি করে। যেহেতু আমি এই ধরণের কিছু শালীন খুঁজে পাইনি, তাই আমি এই সমস্যার সমাধান করার জন্য একটি সহজ সরঞ্জাম লিখেছি।

তাই এখানে কম্পাইলার, https://github.com/dsheiko/jsic , যা অনুরোধ করা ফাইল সামগ্রী নিরাপদভাবে $import("file-path") প্রতিস্থাপন করে। এখানে সংশ্লিষ্ট Grunt প্লাগইনটি রয়েছে: https://github.com/dsheiko/grunt-jsic

JQuery মাস্টার শাখায়, তারা সহজেই intro.js দিয়ে শুরু করে এবং 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(){}
    }
};

গতিশীলভাবে জাভাস্ক্রিপ্ট ট্যাগ জেনারেট করা এবং এটি 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");

জাভাস্ক্রিপ্টের পুরানো সংস্করণগুলিতে কোনও আমদানি, অন্তর্ভুক্তি বা প্রয়োজন ছিল না, এই সমস্যাটির অনেকগুলি ভিন্ন পদ্ধতি তৈরি করা হয়েছে।

কিন্তু ২015 সাল থেকে (ES6), জাভাস্ক্রিপ্টটি নোড.জেসে মডিউলগুলি আমদানি করতে ES6 মডিউল স্ট্যান্ডার্ডগুলি রয়েছে, যা বেশিরভাগ আধুনিক ব্রাউজারগুলির দ্বারা সমর্থিত।

পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্যের জন্য, build এবং / অথবা transpilation সরঞ্জামগুলি ব্যবহার করা যেতে পারে।

ES6 মডিউল

ECMAScript (ES6) মডিউলগুলি v8.5 থেকে Node.js -এ সমর্থিত হয়েছে --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 মডিউল

সাফারি 10.1, ক্রোম 61, ফায়ারফক্স 60, এবং এজ 16 এর since ব্রাউজারগুলি সরাসরি ইসিএমএসস্ক্রিপ্ট মডিউলগুলি লোড করার জন্য (ওয়েবপ্যাকের মতো কোনও সরঞ্জাম প্রয়োজন) লোড করার জন্য সমর্থন করেছে। 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 লোড হচ্ছে

আপনি একটি AJAX কল সহ একটি অতিরিক্ত স্ক্রিপ্ট লোড করতে পারেন এবং এটি চালানোর জন্য eval ব্যবহার করতে পারেন। এটি সবচেয়ে সহজ উপায়, তবে এটি JavaScript এর স্যান্ডবক্স সুরক্ষা মডেলের কারণে আপনার ডোমেইনে সীমিত। eval ব্যবহার করে এছাড়াও বাগ, হ্যাক এবং নিরাপত্তা সমস্যা দরজা খোলে।

jQuery লোড হচ্ছে

jQuery লাইব্রেরি এক লাইনের লোডিং কার্যকারিতা সরবরাহ করে:

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

গতিশীল স্ক্রিপ্ট লোড হচ্ছে

আপনি এইচটিএমএল স্ক্রিপ্ট 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- এ সেট করা হবে যা ফাংশনটিকে প্রথম পরামিতি হিসাবে দেওয়া হয়।

এই সমাধানগুলির উভয়ই জাভাস্ক্রিপ্ট ম্যাডনেস নিয়ে আলোচনা এবং চিত্রিত : ডাইনামিক স্ক্রিপ্ট লোড হচ্ছে

স্ক্রিপ্ট নির্বাহ করা হয় যখন সনাক্ত করা

এখন, আপনি সম্পর্কে জানা আবশ্যক একটি বড় সমস্যা আছে। এটি যে আপনি দূরবর্তী কোড লোড বোঝায়। আধুনিক ওয়েব ব্রাউজারগুলি ফাইলটি লোড করবে এবং আপনার বর্তমান স্ক্রিপ্টটি কার্যকর করবে কারণ কার্যক্ষমতা উন্নত করার জন্য তারা সবকিছু অিনঙ্ক্রান্তভাবে লোড করে। (এটি 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);

মনে রাখবেন যে DOM লোড হওয়ার পরে বা ব্রাউজারের উপর নির্ভর করে স্ক্রিপ্টটি চালানো হতে পারে এবং আপনি লাইন script.async = false; অন্তর্ভুক্ত করেছেন কিনা script.async = false;জাভাস্ক্রিপ্ট লোড হচ্ছে এমন একটি দুর্দান্ত নিবন্ধ যা এতে আলোচনা করে।

উত্স কোড মার্জ / প্রিপোকাসিং

এই উত্তরের শীর্ষে উল্লিখিত, অনেকগুলি বিকাশকারী তাদের প্রকল্পগুলিতে পার্সেল, ওয়েবপ্যাক, বা বাবেলের মতো বিল্ড / ট্র্যাপিলেশন সরঞ্জাম (গুলি) ব্যবহার করে, যা তাদের আসন্ন জাভাস্ক্রিপ্ট সিনট্যাক্স ব্যবহার করতে, পুরানো ব্রাউজারগুলির জন্য সামঞ্জস্যপূর্ণ সামঞ্জস্য প্রদান করে, ফাইলগুলি একত্রিত করে, minify, কোড বিভাজন ইত্যাদি সম্পাদন


বিবৃতি 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;

যদি জাভাস্ক্রিপ্ট ফাইলটি লোড করার আপনার অভিপ্রায় আমদানি / অন্তর্ভুক্ত ফাইল থেকে ফাংশন ব্যবহার করে থাকেন , তবে আপনি একটি বিশ্বব্যাপী বস্তু সংজ্ঞায়িত করতে এবং ফাংশনগুলিকে বস্তু আইটেম হিসাবে সেট করতে পারেন। এই ক্ষেত্রে:

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>

সম্ভবত আপনি এই পৃষ্ঠায় পাওয়া এই ফাংশনটি ব্যবহার করতে পারেন কিভাবে আমি একটি জাভাস্ক্রিপ্ট ফাইলে একটি জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করব? :

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

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

    head.appendChild(script)
}

অথবা চালানোর সময় অন্তর্ভুক্ত করার পরিবর্তে, আপলোড করার আগে সংযোজন করার জন্য একটি স্ক্রিপ্ট ব্যবহার করুন।

আমি Sprockets ব্যবহার (আমি অন্যদের আছে জানি না)। আপনি আলাদা ফাইলগুলিতে আপনার জাভাস্ক্রিপ্ট কোডটি তৈরি করেন এবং স্প্রকেটস ইঞ্জিন দ্বারা প্রক্রিয়াকৃত মন্তব্য অন্তর্ভুক্ত করেন। বিকাশের জন্য আপনি ক্রমশ ফাইলগুলি অন্তর্ভুক্ত করতে পারেন, তারপরে উত্পাদনকে একত্রিত করতে ...

আরো দেখুন:


আমার একটি সাধারণ সমস্যা ছিল, কিন্তু আমি এই প্রশ্নের প্রতিক্রিয়া দ্বারা বিরক্ত ছিল।

আমাকে অন্য একটি জাভাস্ক্রিপ্ট ফাইল (main.js) এ একটি জাভাস্ক্রিপ্ট ফাইল (myvariables.js) এ সংজ্ঞায়িত একটি পরিবর্তনশীল (myVar1) ব্যবহার করতে হয়েছিল।

এই জন্য আমি নীচের হিসাবে করেনি:

এইচটিএমএল ফাইলের মধ্যে জাভাস্ক্রিপ্ট কোড লোড করা হয়েছে, সঠিক ক্রমে, 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
    // ...
}
// ...

যেমনটি আপনি দেখেছেন, আমি অন্য জাভাস্ক্রিপ্ট ফাইলের মধ্যে একটি জাভাস্ক্রিপ্ট ফাইলের মধ্যে একটি পরিবর্তনশীল ব্যবহার করেছি, তবে আমাকে একে অপরের অন্তর্ভুক্ত করতে হবে না। প্রথম জাভাস্ক্রিপ্ট ফাইলটি দ্বিতীয় জাভাস্ক্রিপ্ট ফাইলের আগে লোড হওয়া এবং এটি প্রথম JavaScript ফাইলের ভেরিয়েবলগুলি স্বয়ংক্রিয়ভাবে দ্বিতীয় জাভাস্ক্রিপ্ট ফাইলটিতে অ্যাক্সেসযোগ্য তা নিশ্চিত করার জন্য প্রয়োজন।

এই আমার দিন সংরক্ষিত। আশা করি এটা কাজে লাগবে.


আমার স্বাভাবিক পদ্ধতি হল:

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" (বা extensions.js বা আপনি কি আছে) নামে একটি ফাইল সেট আপ করুন। আপনার প্লাগইন ফাইলগুলিকে ঐ এক মাস্টার ফাইলের সাথে একসাথে রাখুন।

  2. plugins.js "pluginNames []" নামক একটি অ্যারে থাকবে যা আমরা প্রতিটি () এর উপর পুনরাবৃত্তি করব, তারপরে প্রতিটি প্লাগইনটির জন্য একটি ট্যাগ যুক্ত করুন

    // সেট অ্যারের আপডেট করা হবে যখন আমরা প্লাগইন ফাইল যোগ বা অপসারণ করব প্লাগইননাম = [["লেখনী", "fittext", "butterjam", ইত্যাদি]]; // প্রতিটি প্লাগইন জন্য এক স্ক্রিপ্ট ট্যাগ $। প্রতিটি (প্লাগইন নাম, ফাংশন () {$ ('হেড')। যোগ করুন ('');});

  3. ম্যানুয়ালি আপনার মাথায় একটি ফাইল কল করুন:
    <script src="js/plugins/plugins.js"></script>

আমি দেখলাম যে সমস্ত প্লাগিনগুলি হ্যাক ট্যাগে যেভাবে করা উচিত তা হ্রাস পেয়েছে, এমনকি যখন আপনি পৃষ্ঠাটিতে ক্লিক করেন বা রিফ্রেশ করেন তখন তারা সর্বদা ব্রাউজার দ্বারা চালিত হয় না।

আমি এটি একটি পিএইচপি অন্তর্ভুক্ত স্ক্রিপ্ট ট্যাগ লিখতে আরো নির্ভরযোগ্য পাওয়া যায় নি। আপনি কেবল একবার এটি লিখতে হবে এবং এটি JavaScript এর সাহায্যে প্লাগিনকে কল করার মতোই কাজ।


আমি একটি সহজ মডিউল লিখেছিলাম যা জাভাস্ক্রিপ্টে মডিউল স্ক্রিপ্টগুলি আমদানি / অন্তর্ভুক্ত করার কাজটি স্বয়ংক্রিয় করে। কোডের বিস্তারিত ব্যাখ্যা করার জন্য, ব্লগ পোস্ট জাভাস্ক্রিপ্ট প্রয়োজন / আমদানি / অন্তর্ভুক্ত মডিউল দেখুন

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

এই প্রশ্নের জন্য সম্ভাব্য উত্তর অনেক আছে। আমার উত্তর সম্ভবত তাদের একটি সংখ্যা উপর ভিত্তি করে। এই সব উত্তর দিয়ে পড়ার পরে আমি কি শেষ করেছি।

$.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 সিঙ্ক্রোনাস চালানোর জন্য বা XMLHttpRequest ব্যবহার করতে নির্দিষ্ট করতে পারেন তবে বর্তমান প্রবণতা সিঙ্ক্রোনাস অনুরোধগুলিকে হ্রাস করতে পারে বলে মনে হয়, যাতে আপনি এখন বা ভবিষ্যতে সম্পূর্ণ ব্রাউজার সমর্থন পান না।

আপনি $.whenবিলম্বিত বস্তুর একটি অ্যারে চেক করার জন্য ব্যবহার করার চেষ্টা করতে পারেন , কিন্তু এখন আপনি এটি প্রতিটি ফাইলে করছেন এবং ফাইল 2 লোড করা হবে যত তাড়াতাড়ি $.whenকলব্যাক কার্যকর না হওয়া পর্যন্ত লোড হওয়া হিসাবে গণ্য করা হবে , তাই file1 এখনও ফাইল 3 লোড হওয়ার আগে কার্যকর চলবে । এই সত্যিই এখনও একই সমস্যা আছে।

আমি পরিবর্তে পরিবর্তে পিছনে যেতে সিদ্ধান্ত নিয়েছে। আপনাকে ধন্যবাদ document.writeln। আমি এটা নিষিদ্ধ জানি, কিন্তু যতক্ষণ এটি সঠিকভাবে ব্যবহৃত হয় এটি ভাল কাজ করে। আপনি কোডটি শেষ করেন যা সহজেই ডিবাগ করা যায়, DOM সঠিকভাবে দেখায় এবং নির্ভরতাগুলি সঠিকভাবে লোড করা হয়েছে তা নিশ্চিত করতে পারে।

আপনি অবশ্যই $ ("body") ব্যবহার করতে পারেন। যোগ করুন (), তবে তারপরে আপনি আর সঠিকভাবে ডিবাগ করতে পারবেন না।

দ্রষ্টব্য: পৃষ্ঠাটি লোড করার সময় আপনাকে অবশ্যই এটি ব্যবহার করতে হবে, অন্যথায় আপনি একটি ফাঁকা পর্দা পাবেন। অন্য কথায়, সর্বদা এই আগে / নথির বাইরে রাখুন । পৃষ্ঠাটিকে ক্লিক ইভেন্টে বা তার যেকোনো কিছুতে লোড হওয়ার পরে আমি এটি ব্যবহার করে পরীক্ষা করি নি, তবে আমি নিশ্চিত যে এটি ব্যর্থ হবে।

আমি jQuery প্রসারিত ধারণা পছন্দ, কিন্তু সম্ভবত আপনি প্রয়োজন হয় না।

কল করার আগে document.writeln, স্ক্রিপ্টটি সমস্ত স্ক্রিপ্ট উপাদানের মূল্যায়ন করে ইতিমধ্যে লোড হচ্ছে না তা নিশ্চিত করার জন্য চেক করে।

আমি অনুমান করা হয় যে একটি স্ক্রিপ্ট সম্পূর্ণরূপে তার document.readyইভেন্ট মৃত্যুদন্ড কার্যকর না হওয়া পর্যন্ত মৃত্যুদন্ড কার্যকর করা হয়। (আমি ব্যবহার করে জানি document.readyনা প্রয়োজন, কিন্তু অনেক মানুষ এটি ব্যবহার করে, এবং এই পরিচালনা একটি নিরাপদ।)

অতিরিক্ত ফাইল লোড হয় যখন document.readyকলব্যাক ভুল আদেশ কার্যকর করা হবে। যখন একটি স্ক্রিপ্ট প্রকৃতপক্ষে লোড হয় তখন এটি ঠিক করার জন্য, এটি যে আমদানি করা স্ক্রিপ্টটি পুনরায় আমদানি হয় এবং কার্য সম্পাদন স্থগিত হয়। এর ফলে উৎপন্ন ফাইলটি এখন document.readyযেকোনো স্ক্রিপ্ট থেকে এটির পরে তার কলব্যাকটি কার্যকর করে।

এই পদ্ধতির পরিবর্তে আপনি জাভাস্ক্রিপ্ট পরিবর্তন করার চেষ্টা করতে পারেন 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"
});

এই স্ক্রিপ্টটি অন্য কোনও <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);
})();

যদি আপনি ওয়েব ওয়ার্কার ব্যবহার করেন এবং কর্মীর সুযোগে অতিরিক্ত স্ক্রিপ্ট অন্তর্ভুক্ত করতে চান তবে headট্যাগটিতে স্ক্রিপ্টগুলি যোগ করার বিষয়ে দেওয়া অন্যান্য উত্তরগুলি আপনার জন্য কাজ করবে না।

সৌভাগ্যবশত, ওয়েব ওয়ার্কারদের নিজস্ব importScriptsকাজ রয়েছে যা ওয়েব ওয়ার্কারের সুযোগে একটি বিশ্বব্যাপী ফাংশন যা ব্রাউজারের নিজেই নিজেই স্পেসিফিকেশনের অংশ

অন্যথায়, আপনার প্রশ্নের হাইলাইটের দ্বিতীয় সর্বোচ্চ ভোটের উত্তর হিসাবে , আবশ্যক RequireJS ওয়েব ওয়ার্কারের ভিতরে স্ক্রিপ্টগুলি সহ সম্ভবত হ্যান্ডেল করতে পারে (সম্ভবত importScriptsনিজেকে কল করা, তবে কিছু অন্যান্য দরকারী বৈশিষ্ট্য সহ)।


রয়েছে Head.js । এটা মোকাবেলা করা খুব সহজ:

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

আপনি যেমন দেখেন, এটি প্রয়োজনীয়। Js এর চেয়ে সহজ এবং jQuery এর $.getScriptপদ্ধতির মতো সুবিধাজনক । এতে কিছু উন্নত বৈশিষ্ট্য রয়েছে, যেমন শর্তযুক্ত লোডিং, বৈশিষ্ট্য সনাক্তকরণ এবং আরও অনেক কিছু






include