এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

HTML আমদানি

ওয়েবের জন্য অন্তর্ভুক্ত করুন

Eric Bidelman

আমদানি কেন?

আপনি কীভাবে ওয়েবে বিভিন্ন ধরণের সংস্থান লোড করেন সে সম্পর্কে চিন্তা করুন। JS এর জন্য, আমাদের আছে <script src> । CSS-এর জন্য, আপনার যেতে সম্ভবত <link rel="stylesheet"> । ছবির জন্য এটি হল <img> । ভিডিওতে <video> আছে। অডিও, <audio> … পয়েন্টে যান! ওয়েবের বেশিরভাগ বিষয়বস্তুতে নিজেকে লোড করার একটি সহজ এবং ঘোষণামূলক উপায় রয়েছে। HTML এর জন্য তাই নয়। এখানে আপনার বিকল্প আছে:

<iframe> - চেষ্টা এবং সত্য কিন্তু ভারী ওজন. একটি iframe এর বিষয়বস্তু সম্পূর্ণরূপে আপনার পৃষ্ঠার থেকে একটি পৃথক প্রসঙ্গে বাস করে। যদিও এটি বেশিরভাগই একটি দুর্দান্ত বৈশিষ্ট্য, এটি অতিরিক্ত চ্যালেঞ্জ তৈরি করে (এর সামগ্রীতে ফ্রেমের আকারকে সঙ্কুচিত করা কঠিন, স্ক্রিপ্টে/আউট করার জন্য অত্যন্ত হতাশাজনক, স্টাইল করা প্রায় অসম্ভব)।
AJAX - আমি xhr.responseType="document" পছন্দ করি , কিন্তু আপনি বলছেন HTML লোড করার জন্য আমার JS দরকার? এটা ঠিক মনে হচ্ছে না।
CrazyHacks™ - স্ট্রিংগুলিতে এম্বেড করা, মন্তব্য হিসাবে লুকানো (যেমন <script type="text/html"> )। ইয়াক!

বিড়ম্বনা দেখেন? ওয়েবের সবচেয়ে মৌলিক বিষয়বস্তু, HTML, এর সাথে কাজ করার জন্য সর্বাধিক পরিশ্রমের প্রয়োজন ৷ সৌভাগ্যবশত, ওয়েব কম্পোনেন্টগুলি আমাদেরকে ট্র্যাকে ফিরিয়ে আনার জন্য এখানে রয়েছে৷

শুরু হচ্ছে

HTML আমদানি , ওয়েব কম্পোনেন্টস কাস্টের অংশ, অন্যান্য HTML নথিতে HTML নথি অন্তর্ভুক্ত করার একটি উপায়। আপনি মার্কআপেও সীমাবদ্ধ নন। একটি আমদানিতে CSS, JavaScript বা .html ফাইল থাকতে পারে এমন কিছু অন্তর্ভুক্ত থাকতে পারে। অন্য কথায়, এটি সম্পর্কিত HTML/CSS/JS লোড করার জন্য আমদানিকে একটি চমত্কার সরঞ্জাম করে তোলে।

বুনিয়াদি

একটি <link rel="import"> ঘোষণা করে আপনার পৃষ্ঠায় একটি আমদানি অন্তর্ভুক্ত করুন :

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

একটি আমদানির URL কে একটি আমদানি অবস্থান বলা হয়। অন্য ডোমেন থেকে সামগ্রী লোড করতে, আমদানি অবস্থানটি CORS-সক্ষম হতে হবে:

<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">

বৈশিষ্ট্য সনাক্তকরণ এবং সমর্থন

সমর্থন সনাক্ত করতে, <link> উপাদানটিতে .import বিদ্যমান কিনা তা পরীক্ষা করুন:

function supportsImports() {
    return 'import' in document.createElement('link');
}

if (supportsImports()) {
    // Good to go!
} else {
    // Use other libraries/require systems to load files.
}

ব্রাউজার সমর্থন প্রাথমিক দিনগুলিতে এখনও আছে। Chrome 31 হল প্রথম ব্রাউজার যা একটি বাস্তবায়ন দেখতে পায় কিন্তু অন্যান্য ব্রাউজার বিক্রেতারা ES মডিউলগুলি কীভাবে খেলতে পারে তা দেখার জন্য অপেক্ষা করছে। যাইহোক, অন্যান্য ব্রাউজারগুলির জন্য webcomponents.js পলিফিল জিনিসগুলি ব্যাপকভাবে সমর্থিত না হওয়া পর্যন্ত দুর্দান্ত কাজ করে।

বান্ডলিং সম্পদ

আমদানি এইচটিএমএল/সিএসএস/জেএস (এমনকি অন্যান্য এইচটিএমএল আমদানি) একটি একক ডেলিভারেবলে বান্ডিল করার জন্য কনভেনশন প্রদান করে। এটি একটি অন্তর্নিহিত বৈশিষ্ট্য, কিন্তু একটি শক্তিশালী এক. আপনি যদি একটি থিম, লাইব্রেরি তৈরি করেন বা শুধুমাত্র আপনার অ্যাপটিকে লজিক্যাল খণ্ডে ভাগ করতে চান, তাহলে ব্যবহারকারীদের একটি একক URL দেওয়া বাধ্যতামূলক। হেক, আপনি এমনকি একটি আমদানির মাধ্যমে একটি সম্পূর্ণ অ্যাপ সরবরাহ করতে পারেন। এক সেকেন্ডের জন্য যে সম্পর্কে চিন্তা করুন.

একটি বাস্তব-বিশ্বের উদাহরণ হল বুটস্ট্র্যাপ । বুটস্ট্র্যাপ পৃথক ফাইল (bootstrap.css, bootstrap.js, ফন্ট) নিয়ে গঠিত, এর প্লাগইনগুলির জন্য JQuery প্রয়োজন এবং মার্কআপ উদাহরণ প্রদান করে। ডেভেলপাররা à la carte নমনীয়তা পছন্দ করে। এটি তাদের ফ্রেমওয়ার্কের অংশগুলি কিনতে দেয় যা তারা ব্যবহার করতে চায়। এটি বলেছে, আমি আপনার সাধারণ JoeDeveloper™ বাজি ধরতে চাই যে সহজ রুটে যায় এবং সমস্ত বুটস্ট্র্যাপ ডাউনলোড করে।

আমদানি বুটস্ট্র্যাপের মতো কিছুর জন্য অনেক বেশি অর্থ তৈরি করে। আমি আপনার কাছে উপস্থাপন করছি, বুটস্ট্র্যাপ লোড করার ভবিষ্যত:

<head>
    <link rel="import" href="bootstrap.html">
</head>

ব্যবহারকারীরা কেবল একটি HTML আমদানি লিঙ্ক লোড করে। তাদের ফাইলের স্ক্যাটার-শট নিয়ে ঝামেলা করার দরকার নেই। পরিবর্তে, বুটস্ট্র্যাপের সম্পূর্ণতা পরিচালিত হয় এবং একটি আমদানিতে মোড়ানো হয়, bootstrap.html:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
...

<!-- scaffolding markup -->
<template>
    ...
</template>

এই বসতে দিন. এটা উত্তেজনাপূর্ণ জিনিস.

লোড/ত্রুটির ঘটনা

<link> উপাদানটি একটি load ইভেন্ট ফায়ার করে যখন একটি আমদানি সফলভাবে লোড হয় এবং প্রচেষ্টা ব্যর্থ হলে onerror (যেমন যদি সম্পদ 404s)।

আমদানি অবিলম্বে লোড করার চেষ্টা করুন. মাথাব্যথা এড়ানোর একটি সহজ উপায় হল onload / onerror বৈশিষ্ট্যগুলি ব্যবহার করা:

<script>
    function handleLoad(e) {
    console.log('Loaded import: ' + e.target.href);
    }
    function handleError(e) {
    console.log('Error loading import: ' + e.target.href);
    }
</script>

<link rel="import" href="file.html"
        onload="handleLoad(event)" onerror="handleError(event)">

অথবা, আপনি যদি গতিশীলভাবে আমদানি তৈরি করেন:

var link = document.createElement('link');
link.rel = 'import';
// link.setAttribute('async', ''); // make it async!
link.href = 'file.html';
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);

বিষয়বস্তু ব্যবহার করে

একটি পৃষ্ঠায় একটি আমদানি অন্তর্ভুক্ত করার অর্থ এই নয় যে "সেই ফাইলটির সামগ্রী এখানে প্লপ করুন"। এর অর্থ "পার্সার, এই নথিটি আনতে যান যাতে আমি এটি ব্যবহার করতে পারি"। আসলে বিষয়বস্তু ব্যবহার করতে, আপনাকে পদক্ষেপ নিতে হবে এবং স্ক্রিপ্ট লিখতে হবে।

একটি সমালোচনামূলক aha! মুহূর্ত বুঝতে পারে যে একটি আমদানি শুধু একটি নথি। প্রকৃতপক্ষে, একটি আমদানির বিষয়বস্তুকে একটি আমদানি নথি বলা হয়। আপনি স্ট্যান্ডার্ড DOM API ব্যবহার করে একটি আমদানির সাহসিকতা চালাতে সক্ষম!

link.import

একটি আমদানির বিষয়বস্তু অ্যাক্সেস করতে, লিঙ্ক উপাদানের .import বৈশিষ্ট্য ব্যবহার করুন:

var content = document.querySelector('link[rel="import"]').import;

link.import নিম্নলিখিত শর্তে null :

ব্রাউজারটি HTML আমদানি সমর্থন করে না।
<link> এর rel="import" নেই।
<link> DOM এ যোগ করা হয়নি।
DOM থেকে <link> সরানো হয়েছে।
সংস্থানটি CORS-সক্ষম নয়৷

সম্পূর্ণ উদাহরণ

ধরা যাক warnings.html এর মধ্যে রয়েছে:

<div class="warning">
    <style>
    h3 {
        color: red !important;
    }
    </style>
    <h3>Warning!
    <p>This page is under construction
</div>

<div class="outdated">
    <h3>Heads up!
    <p>This content may be out of date
</div>

আমদানিকারকরা এই নথির একটি নির্দিষ্ট অংশ দখল করতে পারেন এবং এটিকে তাদের পৃষ্ঠায় ক্লোন করতে পারেন:

<head>
    <link rel="import" href="warnings.html">
</head>
<body>
    ...
    <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from warning.html's document.
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
    </script>
</body>

আমদানিতে স্ক্রিপ্টিং

আমদানি মূল নথিতে নেই। তারা এটা স্যাটেলাইট করছি. যাইহোক, আপনার আমদানি এখনও মূল পৃষ্ঠায় কাজ করতে পারে যদিও মূল নথিটি সর্বোচ্চ রাজত্ব করে। একটি আমদানি তার নিজস্ব DOM এবং/অথবা পৃষ্ঠার DOM অ্যাক্সেস করতে পারে যা এটি আমদানি করছে:

উদাহরণ - import.html যা মূল পৃষ্ঠায় এর একটি স্টাইলশীট যোগ করে

<link rel="stylesheet" href="http://www.example.com/styles.css">
<link rel="stylesheet" href="http://www.example.com/styles2.css">

<style>
/* Note: <style> in an import apply to the main
    document by default. That is, style tags don't need to be
    explicitly added to the main document. */
#somecontainer {
color: blue;
}
</style>
...

<script>
// importDoc references this import's document
var importDoc = document.currentScript.ownerDocument;

// mainDoc references the main document (the page that's importing us)
var mainDoc = document;

// Grab the first stylesheet from this import, clone it,
// and append it to the importing document.
    var styles = importDoc.querySelector('link[rel="stylesheet"]');
    mainDoc.head.appendChild(styles.cloneNode(true));
</script>

এখানে কি হচ্ছে লক্ষ্য করুন. আমদানির ভিতরের স্ক্রিপ্টটি আমদানি করা নথির উল্লেখ করে ( document.currentScript.ownerDocument ), এবং সেই নথির অংশটি আমদানি পৃষ্ঠায় যুক্ত করে ( mainDoc.head.appendChild(...) )। আপনি যদি আমাকে জিজ্ঞাসা করেন তবে বেশ আঁশটে।

একটি আমদানিতে জাভাস্ক্রিপ্টের নিয়ম:

আমদানিতে স্ক্রিপ্টটি সেই উইন্ডোর প্রেক্ষাপটে কার্যকর করা হয় যেখানে আমদানি document রয়েছে। সুতরাং window.document মূল পৃষ্ঠার নথিকে বোঝায়। এটির দুটি দরকারী ফলাফল রয়েছে:
- একটি আমদানিতে সংজ্ঞায়িত ফাংশন window শেষ হয়।
- আপনাকে কিছু কঠিন করতে হবে না যেমন আমদানির <script> ব্লকগুলি মূল পৃষ্ঠায় যুক্ত করা। আবার, স্ক্রিপ্ট চালানো হয়.
আমদানি মূল পৃষ্ঠার পার্সিং ব্লক করে না। যাইহোক, তাদের ভিতরের স্ক্রিপ্টগুলি ক্রমানুসারে প্রক্রিয়া করা হয়। এর মানে সঠিক স্ক্রিপ্ট অর্ডার বজায় রাখার সময় আপনি ডিফার-এর মতো আচরণ পান। নীচে এই সম্পর্কে আরো.

ওয়েব উপাদান বিতরণ

HTML আমদানির ডিজাইন ওয়েবে পুনরায় ব্যবহারযোগ্য সামগ্রী লোড করার জন্য নিজেকে সুন্দরভাবে ধার দেয়। বিশেষ করে, এটি ওয়েব কম্পোনেন্ট বিতরণ করার একটি আদর্শ উপায়। বেসিক HTML <template> গুলি থেকে শুরু করে শ্যাডো ডম [ 1 , 2 , 3 ] সহ সম্পূর্ণ বিকশিত কাস্টম উপাদান পর্যন্ত। যখন এই প্রযুক্তিগুলি একসাথে ব্যবহার করা হয়, তখন আমদানিগুলি ওয়েব উপাদানগুলির জন্য #include হয়৷

টেমপ্লেট সহ

এইচটিএমএল টেমপ্লেট উপাদানটি এইচটিএমএল আমদানির জন্য একটি প্রাকৃতিক উপযুক্ত। <template> ইম্পোর্টিং অ্যাপের ইচ্ছামতো ব্যবহার করার জন্য মার্কআপের অংশগুলি তৈরি করার জন্য দুর্দান্ত। একটি <template> -এ কন্টেন্ট মোড়ানো আপনাকে ব্যবহার না করা পর্যন্ত কন্টেন্টকে নিষ্ক্রিয় করার অতিরিক্ত সুবিধা দেয়। অর্থাৎ, টেমপ্লেটটি DOM-এ যুক্ত না হওয়া পর্যন্ত স্ক্রিপ্ট চলবে না)। বুম!

import.html

<template>
    <h1>Hello World!</h1>
    <!-- Img is not requested until the <template> goes live. -->
    <img src="world.png">
    <script>alert("Executed when the template is activated.");</script>
</template>

index.html

<head>
    <link rel="import" href="import.html">
</head>
<body>
    <div id="container"></div>
    <script>
    var link = document.querySelector('link[rel="import"]');

    // Clone the <template> in the import.
    var template = link.import.querySelector('template');
    var clone = document.importNode(template.content, true);

    document.querySelector('#container').appendChild(clone);
    </script>
</body>

কাস্টম উপাদান নিবন্ধন

কাস্টম এলিমেন্টস হল আরেকটি ওয়েব কম্পোনেন্ট প্রযুক্তি যা এইচটিএমএল ইম্পোর্টের সাথে অযৌক্তিকভাবে ভাল খেলে। আমদানি স্ক্রিপ্ট চালাতে পারে, তাহলে কেন সংজ্ঞায়িত করবেন না + আপনার কাস্টম উপাদানগুলি নিবন্ধন করুন যাতে ব্যবহারকারীদের করতে না হয়? এটিকে কল করুন..."অটো-রেজিস্ট্রেশন"।

elements.html

<script>
    // Define and register <say-hi>.
    var proto = Object.create(HTMLElement.prototype);

    proto.createdCallback = function() {
    this.innerHTML = 'Hello, <b>' +
                        (this.getAttribute('name') || '?') + '</b>';
    };

    document.registerElement('say-hi', {prototype: proto});
</script>

<template id="t">
    <style>
    ::content > * {
        color: red;
    }
    </style>
    <span>I'm a shadow-element using Shadow DOM!</span>
    <content></content>
</template>

<script>
    (function() {
    var importDoc = document.currentScript.ownerDocument; // importee

    // Define and register <shadow-element>
    // that uses Shadow DOM and a template.
    var proto2 = Object.create(HTMLElement.prototype);

    proto2.createdCallback = function() {
        // get template in import
        var template = importDoc.querySelector('#t');

        // import template into
        var clone = document.importNode(template.content, true);

        var root = this.createShadowRoot();
        root.appendChild(clone);
    };

    document.registerElement('shadow-element', {prototype: proto2});
    })();
</script>

এই আমদানি দুটি উপাদানকে সংজ্ঞায়িত করে (এবং নিবন্ধন করে), <say-hi> এবং <shadow-element> । প্রথমটি একটি মৌলিক কাস্টম উপাদান দেখায় যা আমদানির ভিতরে নিজেকে নিবন্ধন করে। দ্বিতীয় উদাহরণটি দেখায় যে কীভাবে একটি কাস্টম উপাদান প্রয়োগ করতে হয় যা একটি <template> থেকে ছায়া DOM তৈরি করে, তারপর নিজেকে নিবন্ধন করে।

একটি HTML আমদানির মধ্যে কাস্টম উপাদান নিবন্ধন সম্পর্কে সবচেয়ে ভাল অংশ হল যে আমদানিকারক কেবল তাদের পৃষ্ঠায় আপনার উপাদান ঘোষণা করে৷ কোন তারের প্রয়োজন নেই.

index.html

<head>
    <link rel="import" href="elements.html">
</head>
<body>
    <say-hi name="Eric"></say-hi>
    <shadow-element>
    <div>( I'm in the light dom )</div>
    </shadow-element>
</body>

আমার মতে, এই ওয়ার্কফ্লো একাই HTML ইম্পোর্টকে ওয়েব কম্পোনেন্ট শেয়ার করার একটি আদর্শ উপায় করে তোলে।

নির্ভরতা এবং উপ-আমদানি ব্যবস্থাপনা

উপ-আমদানি

এটি একটি আমদানির জন্য অন্যটি অন্তর্ভুক্ত করার জন্য দরকারী হতে পারে। উদাহরণস্বরূপ, আপনি যদি অন্য উপাদানটি পুনরায় ব্যবহার করতে বা প্রসারিত করতে চান তবে অন্য উপাদান(গুলি) লোড করতে একটি আমদানি ব্যবহার করুন।

নীচে পলিমার থেকে একটি বাস্তব উদাহরণ। এটি একটি নতুন ট্যাব উপাদান ( <paper-tabs> ) যা একটি লেআউট এবং নির্বাচক উপাদান পুনরায় ব্যবহার করে। নির্ভরতাগুলি HTML আমদানি ব্যবহার করে পরিচালিত হয়।

paper-tabs.html (সরলীকৃত):

<link rel="import" href="iron-selector.html">
<link rel="import" href="classes/iron-flex-layout.html">

<dom-module id="paper-tabs">
    <template>
    <style>...</style>
    <iron-selector class="layout horizonta center">
        <content select="*"></content>
    </iron-selector>
    </template>
    <script>...</script>
</dom-module>

অ্যাপ বিকাশকারীরা এই নতুন উপাদানটি ব্যবহার করে আমদানি করতে পারেন:

<link rel="import" href="paper-tabs.html">
<paper-tabs></paper-tabs>

ভবিষ্যতে যখন একটি নতুন, আরও দুর্দান্ত <iron-selector2> আসবে, আপনি <iron-selector> কে অদলবদল করতে পারেন এবং সরাসরি এটি ব্যবহার শুরু করতে পারেন। আমদানি এবং ওয়েব উপাদানগুলির জন্য আপনি আপনার ব্যবহারকারীদের ধন্যবাদ ভাঙ্গবেন না।

নির্ভরতা ব্যবস্থাপনা

আমরা সবাই জানি যে প্রতি পৃষ্ঠায় একাধিকবার JQuery লোড করার ফলে ত্রুটি দেখা দেয়। যখন একাধিক উপাদান একই লাইব্রেরি ব্যবহার করে তখন এটি কি ওয়েব উপাদানগুলির জন্য একটি বিশাল সমস্যা হতে যাচ্ছে না? আমরা যদি HTML আমদানি ব্যবহার করি না! তারা নির্ভরতা পরিচালনা করতে ব্যবহার করা যেতে পারে।

একটি এইচটিএমএল আমদানিতে লাইব্রেরি মোড়ানোর মাধ্যমে, আপনি স্বয়ংক্রিয়ভাবে সম্পদগুলিকে ফাঁকি দেন৷ নথিটি শুধুমাত্র একবার পার্স করা হয়। স্ক্রিপ্ট শুধুমাত্র একবার কার্যকর করা হয়. উদাহরণ হিসাবে, বলুন আপনি একটি আমদানি সংজ্ঞায়িত করেছেন, jquery.html, যা JQuery-এর একটি অনুলিপি লোড করে।

jquery.html

<script src="http://cdn.com/jquery.js"></script>

এই আমদানি পরবর্তী আমদানিতে পুনরায় ব্যবহার করা যেতে পারে যেমন:

import2.html

<link rel="import" href="jquery.html">
<div>Hello, I'm import 2</div>

ajax-element.html

<link rel="import" href="jquery.html">
<link rel="import" href="import2.html">

<script>
    var proto = Object.create(HTMLElement.prototype);

    proto.makeRequest = function(url, done) {
    return $.ajax(url).done(function() {
        done();
    });
    };

    document.registerElement('ajax-element', {prototype: proto});
</script>

এমনকি মূল পৃষ্ঠায় jquery.html অন্তর্ভুক্ত করতে পারে যদি এটির লাইব্রেরির প্রয়োজন হয়:

<head>
    <link rel="import" href="jquery.html">
    <link rel="import" href="ajax-element.html">
</head>
<body>

...

<script>
    $(document).ready(function() {
    var el = document.createElement('ajax-element');
    el.makeRequest('http://example.com');
    });
</script>
</body>

jquery.html বিভিন্ন ইম্পোর্ট ট্রিতে অন্তর্ভুক্ত হওয়া সত্ত্বেও, এটির ডকুমেন্ট ব্রাউজার দ্বারা শুধুমাত্র একবার আনা এবং প্রক্রিয়া করা হয়। নেটওয়ার্ক প্যানেল পরীক্ষা করে এটি প্রমাণ করে:

কর্মক্ষমতা বিবেচনা

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

সংযুক্ত আমদানি

নেটওয়ার্ক অনুরোধ হ্রাস করা সবসময় গুরুত্বপূর্ণ। আপনার যদি অনেক শীর্ষ-স্তরের আমদানি লিঙ্ক থাকে, তবে সেগুলিকে একটি একক সংস্থানে একত্রিত করে সেই ফাইলটি আমদানি করার কথা বিবেচনা করুন!

ভলকানাইজ হল পলিমার টিমের একটি npm বিল্ড টুল যা এইচটিএমএল ইম্পোর্টের একটি সেটকে একটি একক ফাইলে পুনরাবৃত্তভাবে সমতল করে। ওয়েব কম্পোনেন্টগুলির জন্য এটিকে একটি সংমিশ্রণ নির্মাণের পদক্ষেপ হিসাবে ভাবুন।

লিভারেজ ব্রাউজার ক্যাশিং আমদানি করে

অনেক লোক ভুলে যায় যে ব্রাউজারের নেটওয়ার্কিং স্ট্যাকটি বছরের পর বছর ধরে সূক্ষ্মভাবে সুর করা হয়েছে। আমদানি (এবং উপ-আমদানি) এই যুক্তির সুবিধাও নেয়। http://cdn.com/bootstrap.html আমদানিতে উপ-সম্পদ থাকতে পারে, কিন্তু সেগুলি ক্যাশে করা হবে৷

বিষয়বস্তু শুধুমাত্র তখনই উপযোগী হয় যখন আপনি এটি যোগ করেন

বিষয়বস্তুকে জড় হিসাবে মনে করুন যতক্ষণ না আপনি এটির পরিষেবাগুলিকে কল করেন। একটি সাধারণ, গতিশীলভাবে তৈরি স্টাইলশীট নিন:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

DOM-এ link যোগ না করা পর্যন্ত ব্রাউজার styles.css-এর অনুরোধ করবে না:

document.head.appendChild(link); // browser requests styles.css

আরেকটি উদাহরণ হল গতিশীলভাবে তৈরি মার্কআপ:

var h2 = document.createElement('h2');
h2.textContent = 'Booyah!';

আপনি DOM এ যোগ না করা পর্যন্ত h2 অপেক্ষাকৃত অর্থহীন।

একই ধারণা আমদানি নথির জন্য সত্য। যতক্ষণ না আপনি এটির বিষয়বস্তু DOM-এ যুক্ত করেন, এটি একটি নো-অপ। প্রকৃতপক্ষে, একমাত্র জিনিস যা সরাসরি আমদানি নথিতে "চালনা করে" তা হল <script> । আমদানিতে স্ক্রিপ্টিং দেখুন।

অ্যাসিঙ্ক লোডিংয়ের জন্য অপ্টিমাইজ করা হচ্ছে

ব্লক রেন্ডারিং আমদানি করে

মূল পৃষ্ঠার রেন্ডারিং ব্লক আমদানি করে । এটি <link rel="stylesheet"> এর মতই। ব্রাউজার প্রথম স্থানে স্টাইলশীটে রেন্ডারিং ব্লক করার কারণ হল FOUC কম করা। আমদানি একই রকম আচরণ করে কারণ সেগুলিতে স্টাইলশিট থাকতে পারে।

সম্পূর্ণ অ্যাসিঙ্ক্রোনাস হতে এবং পার্সার বা রেন্ডারিং ব্লক না করতে, async অ্যাট্রিবিউট ব্যবহার করুন:

<link rel="import" href="/path/to/import_that_takes_5secs.html" async>

HTML ইম্পোর্টের জন্য async ডিফল্ট না হওয়ার কারণ হল এর জন্য ডেভেলপারদের আরও কাজ করতে হবে। ডিফল্টভাবে সিঙ্ক্রোনাস মানে হল যে HTML আমদানির মধ্যে কাস্টম উপাদান সংজ্ঞা আছে সেগুলি ক্রমানুসারে লোড এবং আপগ্রেড করার নিশ্চয়তা রয়েছে৷ একটি সম্পূর্ণ অ্যাসিঙ্ক বিশ্বে, বিকাশকারীদের সেই নাচটি পরিচালনা করতে হবে এবং সময়গুলিকে আপগ্রেড করতে হবে।

আপনি গতিশীলভাবে একটি অ্যাসিঙ্ক আমদানিও তৈরি করতে পারেন:

var l = document.createElement('link');
l.rel = 'import';
l.href = 'elements.html';
l.setAttribute('async', '');
l.onload = function(e) { ... };

আমদানি পার্সিং ব্লক করে না

আমদানি মূল পৃষ্ঠার পার্সিং ব্লক করে না । আমদানির ভিতরের স্ক্রিপ্টগুলি ক্রমানুসারে প্রক্রিয়া করা হয় তবে আমদানি পৃষ্ঠাটিকে ব্লক করবেন না। এর মানে সঠিক স্ক্রিপ্ট অর্ডার বজায় রাখার সময় আপনি ডিফার-এর মতো আচরণ পান। আপনার আমদানিগুলিকে <head> এ রাখার একটি সুবিধা হল যে এটি পার্সারকে যত তাড়াতাড়ি সম্ভব বিষয়বস্তুতে কাজ শুরু করতে দেয়। এটি বলার সাথে সাথে, এটি মনে রাখা গুরুত্বপূর্ণ যে মূল নথিতে <script> এখনও পৃষ্ঠাটি ব্লক করে চলেছে। আমদানির পর প্রথম <script> পেজ রেন্ডারিং ব্লক করবে। কারণ একটি আমদানির ভিতরে স্ক্রিপ্ট থাকতে পারে যা মূল পৃষ্ঠায় স্ক্রিপ্টের আগে কার্যকর করা দরকার।

<head>
    <link rel="import" href="/path/to/import_that_takes_5secs.html">
    <script>console.log('I block page rendering');</script>
</head>

আপনার অ্যাপের কাঠামো এবং ব্যবহারের ক্ষেত্রে নির্ভর করে, অ্যাসিঙ্ক আচরণ অপ্টিমাইজ করার বিভিন্ন উপায় রয়েছে। নীচের কৌশলগুলি মূল পৃষ্ঠার রেন্ডারিংকে ব্লক করে।

দৃশ্য #1 (পছন্দের): আপনার <head> এ স্ক্রিপ্ট নেই বা <body> এ ইনলাইন করা নেই

<script> রাখার জন্য আমার সুপারিশ হল অবিলম্বে আপনার আমদানি অনুসরণ করা এড়ানো। খেলায় যত দেরী সম্ভব স্ক্রিপ্টগুলি সরান…কিন্তু আপনি ইতিমধ্যেই সেই সেরা অনুশীলনটি করছেন, আপনি তাই না!? ;)

এখানে একটি উদাহরণ:

<head>
    <link rel="import" href="/path/to/import.html">
    <link rel="import" href="/path/to/import2.html">
    <!-- avoid including script -->
</head>
<body>
    <!-- avoid including script -->

    <div id="container"></div>

    <!-- avoid including script -->
    ...

    <script>
    // Other scripts n' stuff.

    // Bring in the import content.
    var link = document.querySelector('link[rel="import"]');
    var post = link.import.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
    </script>
</body>

সবকিছুই তলানিতে।

দৃশ্যকল্প 1.5: আমদানি নিজেই যোগ করে

আরেকটি বিকল্প হল আমদানির নিজস্ব সামগ্রী যোগ করা। যদি আমদানি লেখক অ্যাপ বিকাশকারীকে অনুসরণ করার জন্য একটি চুক্তি স্থাপন করেন, তাহলে আমদানি মূল পৃষ্ঠার একটি এলাকায় নিজেকে যুক্ত করতে পারে:

import.html:

<div id="blog-post">...</div>
<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
</script>

index.html

<head>
    <link rel="import" href="/path/to/import.html">
</head>
<body>
    <!-- no need for script. the import takes care of things -->
</body>

দৃশ্য #2: আপনার <head> এ স্ক্রিপ্ট আছে বা <body> এ ইনলাইন আছে

আপনার যদি এমন কোনো আমদানি থাকে যা লোড হতে অনেক সময় নেয়, তাহলে প্রথম <script> যেটি পৃষ্ঠায় এটি অনুসরণ করে তা রেন্ডারিং থেকে পৃষ্ঠাটিকে ব্লক করবে। উদাহরণস্বরূপ, Google Analytics <head> -এ ট্র্যাকিং কোড রাখার সুপারিশ করে, আপনি যদি <head> -এ <script> রাখা এড়াতে না পারেন, গতিশীলভাবে আমদানি যোগ করলে পৃষ্ঠাটিকে ব্লক করা প্রতিরোধ করা হবে:

<head>
    <script>
    function addImportLink(url) {
        var link = document.createElement('link');
        link.rel = 'import';
        link.href = url;
        link.onload = function(e) {
        var post = this.import.querySelector('#blog-post');

        var container = document.querySelector('#container');
        container.appendChild(post.cloneNode(true));
        };
        document.head.appendChild(link);
    }

    addImportLink('/path/to/import.html'); // Import is added early :)
    </script>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...
</body>

বিকল্পভাবে, <body> এর শেষের কাছে আমদানি যোগ করুন :

<head>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...

    <script>
    function addImportLink(url) { ... }

    addImportLink('/path/to/import.html'); // Import is added very late :(
    </script>
</body>

মনে রাখার বিষয়

একটি আমদানির মাইমেটাইপ হল text/html ।
অন্যান্য উত্সের সংস্থানগুলিকে CORS-সক্ষম হতে হবে৷
একই URL থেকে আমদানি একবার পুনরুদ্ধার এবং পার্স করা হয়। তার মানে একটি আমদানিতে স্ক্রিপ্ট শুধুমাত্র প্রথমবার আমদানি দেখা হলেই কার্যকর করা হয়।
একটি আমদানিতে স্ক্রিপ্টগুলি ক্রমানুসারে প্রক্রিয়া করা হয়, কিন্তু মূল নথি পার্সিং ব্লক করে না।
একটি আমদানি লিঙ্ক মানে "#এখানে সামগ্রী অন্তর্ভুক্ত করুন" নয়। এর অর্থ "পার্সার, এই নথিটি আনতে যান যাতে আমি পরে এটি ব্যবহার করতে পারি"। যখন স্ক্রিপ্টগুলি আমদানির সময় কার্যকর হয়, স্টাইলশীট, মার্কআপ এবং অন্যান্য সংস্থানগুলি স্পষ্টভাবে মূল পৃষ্ঠায় যোগ করা প্রয়োজন৷ দ্রষ্টব্য, <style> স্পষ্টভাবে যোগ করার প্রয়োজন নেই। এটি HTML আমদানি এবং <iframe> এর মধ্যে একটি প্রধান পার্থক্য, যা বলে "এই সামগ্রীটি এখানে লোড করুন এবং রেন্ডার করুন"।

উপসংহার

HTML আমদানি একটি একক সম্পদ হিসাবে HTML/CSS/JS বান্ডিল করার অনুমতি দেয়। নিজেদের দ্বারা কার্যকর হলেও, এই ধারণাটি ওয়েব কম্পোনেন্টের জগতে অত্যন্ত শক্তিশালী হয়ে ওঠে। বিকাশকারীরা অন্যদের ব্যবহার করার জন্য পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করতে পারে এবং তাদের নিজস্ব অ্যাপে আনতে পারে, সবই <link rel="import"> এর মাধ্যমে বিতরণ করা হয়।

HTML আমদানি একটি সাধারণ ধারণা, কিন্তু প্ল্যাটফর্মের জন্য বেশ কয়েকটি আকর্ষণীয় ব্যবহারের ক্ষেত্রে সক্ষম করে।

কেস ব্যবহার করুন

একটি একক বান্ডেল হিসাবে সম্পর্কিত HTML/CSS/JS বিতরণ করুন । তাত্ত্বিকভাবে, আপনি একটি সম্পূর্ণ ওয়েব অ্যাপ অন্যটিতে আমদানি করতে পারেন।
কোড অর্গানাইজেশন - লজিক্যালি বিভিন্ন ফাইলে ধারণাকে সেগমেন্ট করে, মডুলারিটি এবং পুনঃব্যবহারযোগ্যতাকে উৎসাহিত করে**।
এক বা একাধিক কাস্টম উপাদান সংজ্ঞা প্রদান করুন । একটি আমদানি নিবন্ধন করতে এবং একটি অ্যাপে অন্তর্ভুক্ত করতে ব্যবহার করা যেতে পারে৷ এটি ভাল সফ্টওয়্যার প্যাটার্ন অনুশীলন করে, উপাদানের ইন্টারফেস/সংজ্ঞাকে কীভাবে ব্যবহার করা হয় তা থেকে আলাদা রাখে।
নির্ভরতা পরিচালনা করুন - সংস্থানগুলি স্বয়ংক্রিয়ভাবে প্রতারিত হয়।
খণ্ড স্ক্রিপ্ট - আমদানির আগে, একটি বড় আকারের JS লাইব্রেরি চালানো শুরু করার জন্য তার ফাইলটিকে সম্পূর্ণভাবে পার্স করা হবে, যা ধীরগতির ছিল। আমদানির সাথে, খণ্ড A পার্স হওয়ার সাথে সাথে লাইব্রেরি কাজ শুরু করতে পারে। কম বিলম্ব!

// TODO: DevSite - Code sample removed as it used inline event handlers

এইচটিএমএল পার্সিংকে সমান্তরাল করে - প্রথমবার ব্রাউজার দুটি (বা তার বেশি) এইচটিএমএল পার্সারকে সমান্তরালভাবে চালাতে সক্ষম হয়েছে৷
শুধুমাত্র আমদানি লক্ষ্যমাত্রা পরিবর্তন করে একটি অ্যাপে ডিবাগ এবং নন-ডিবাগ মোডগুলির মধ্যে স্যুইচিং সক্ষম করে ৷ আপনার অ্যাপ্লিকেশানটি জানতে হবে না যে আমদানি লক্ষ্যটি একটি বান্ডিল/সংকলিত সংস্থান বা একটি আমদানি গাছ।