واردات HTML

شامل برای وب

چرا واردات؟

به نحوه بارگذاری انواع مختلف منابع در وب فکر کنید. برای JS، <script src> داریم. برای CSS، گزینه شما احتمالاً <link rel="stylesheet"> است. برای تصاویر <img> است. ویدیو دارای <video> است. صوتی، <audio> … به اصل مطلب برسید! اکثر محتوای وب روشی ساده و شفاف برای بارگذاری دارند. برای HTML اینطور نیست. در اینجا گزینه های شما وجود دارد:

  1. <iframe> - آزمایش شده و واقعی اما وزن سنگین. محتوای iframe کاملاً در یک زمینه جدا از صفحه شما زندگی می کند. در حالی که این ویژگی بیشتر یک ویژگی عالی است، چالش‌های بیشتری ایجاد می‌کند (کوچک کردن اندازه فریم به محتوای آن سخت است، برای اسکریپت‌نویسی/خارج کردن آن بسیار ناامیدکننده است، سبک کردن تقریباً غیرممکن است).
  2. AJAX - من xhr.responseType="document" را دوست دارم ، اما شما می گویید برای بارگذاری HTML به JS نیاز دارم؟ این درست به نظر نمی رسد.
  3. CrazyHacks™ - در رشته ها تعبیه شده، به عنوان نظرات پنهان می شود (به عنوان مثال <script type="text/html"> ). اوه!

کنایه را می بینید؟ ابتدایی ترین محتوای وب، HTML، به بیشترین تلاش برای کار کردن نیاز دارد . خوشبختانه، کامپوننت های وب اینجا هستند تا ما را به مسیر درست برگردانند.

شروع شدن

واردات HTML ، بخشی از اجزای وب ، راهی برای گنجاندن اسناد HTML در سایر اسناد HTML است. شما محدود به نشانه گذاری نیز نیستید. واردات همچنین می تواند شامل CSS، جاوا اسکریپت یا هر چیز دیگری باشد که یک فایل .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">

شناسایی و پشتیبانی از ویژگی ها

برای شناسایی پشتیبانی، بررسی کنید که آیا .import در عنصر <link> وجود دارد یا خیر:

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 polyfill عالی کار می کند تا زمانی که همه چیز به طور گسترده پشتیبانی شود.

بسته بندی منابع

واردات قراردادی را برای بسته‌بندی HTML/CSS/JS (حتی سایر واردات HTML) در یک تحویل واحد فراهم می‌کند. این یک ویژگی ذاتی است، اما یک ویژگی قدرتمند. اگر یک تم، کتابخانه ایجاد می‌کنید، یا فقط می‌خواهید برنامه خود را به بخش‌های منطقی تقسیم کنید، دادن یک URL به کاربران قانع‌کننده است. هک، شما حتی می توانید یک برنامه کامل را از طریق واردات تحویل دهید. درموردش یک لحظه فکر کن.

یک مثال در دنیای واقعی Bootstrap است. Bootstrap از فایل‌های جداگانه (bootstrap.css، bootstrap.js، فونت‌ها) تشکیل شده است، برای پلاگین‌های خود به JQuery نیاز دارد و نمونه‌های نشانه‌گذاری را ارائه می‌دهد. توسعه دهندگان مانند à la carte انعطاف پذیری. این به آنها اجازه می دهد تا در قسمت هایی از چارچوبی که می خواهند استفاده کنند خرید کنند. با این حال، شرط می‌بندم که JoeDeveloper™ معمولی شما مسیر آسانی را طی می‌کند و تمام Bootstrap را دانلود می‌کند.

واردات برای چیزی مانند Bootstrap بسیار منطقی است. من آینده بارگذاری بوت استرپ را به شما ارائه می کنم:

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

کاربران به سادگی یک لینک واردات HTML را بارگذاری می کنند. آنها نیازی به سر و صدا با پراکندگی فایل ها ندارند. در عوض، کل Bootstrap مدیریت می شود و در یک import، 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! لحظه درک این است که واردات فقط یک سند است. در واقع، محتوای یک واردات، سند واردات نامیده می شود. شما می توانید با استفاده از API های استاندارد DOM، ذات واردات را دستکاری کنید !

لینک.واردات

برای دسترسی به محتوای یک import، از ویژگی .import عنصر پیوند استفاده کنید:

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

link.import تحت شرایط زیر null است:

  • مرورگر از واردات HTML پشتیبانی نمی کند.
  • <link> rel="import" ندارد.
  • <link> به DOM اضافه نشده است.
  • <link> از DOM حذف شده است.
  • منبع با 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>

توجه کنید اینجا چه خبر است. اسکریپت داخل import به سند وارد شده ارجاع می‌دهد ( document.currentScript.ownerDocument )، و بخشی از آن سند را به صفحه واردکننده اضافه می‌کند ( mainDoc.head.appendChild(...) ). اگر از من بپرسید خیلی بد است

قوانین جاوا اسکریپت در ایمپورت:

  • اسکریپت در import در زمینه پنجره ای که حاوی document وارد کننده است اجرا می شود. بنابراین window.document به سند صفحه اصلی اشاره دارد. این دو نتیجه مفید دارد:
    • توابع تعریف شده در یک import به window ختم می شوند.
    • لازم نیست کار سختی مانند اضافه کردن بلوک‌های <script> import به صفحه اصلی انجام دهید. دوباره، اسکریپت اجرا می شود.
  • واردات، تجزیه صفحه اصلی را مسدود نمی کند. با این حال، اسکریپت های داخل آنها به ترتیب پردازش می شوند. این به این معنی است که شما با حفظ نظم اسکریپت، رفتاری شبیه به تاخیر دریافت می‌کنید. بیشتر در این مورد در زیر.

ارائه کامپوننت های وب

طراحی HTML Imports به خوبی به بارگذاری محتوای قابل استفاده مجدد در وب کمک می کند. به ویژه، این یک راه ایده آل برای توزیع کامپوننت های وب است. همه چیز، از <template> اولیه HTML تا عناصر سفارشی کامل با Shadow DOM [ 1 ، 2 ، 3 ]. هنگامی که این فناوری ها به صورت پشت سر هم استفاده می شوند، واردات به یک #include برای اجزای وب تبدیل می شود.

از جمله قالب ها

عنصر الگوی HTML یک تناسب طبیعی برای واردات HTML است. <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>

ثبت عناصر سفارشی

Custom Elements یکی دیگر از فناوری‌های Web Component است که به طرز عجیبی با واردات HTML خوب بازی می‌کند. Imports می تواند اسکریپت را اجرا کند، پس چرا عناصر سفارشی خود را تعریف و ثبت نکنید تا کاربران مجبور به انجام آن نباشند؟ نام آن را ... "ثبت نام خودکار".

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>

این import دو عنصر <say-hi> و <shadow-element> را تعریف می‌کند (و ثبت می‌کند). اولی یک عنصر سفارشی اولیه را نشان می دهد که خود را در داخل import ثبت می کند. مثال دوم نحوه پیاده‌سازی یک عنصر سفارشی را نشان می‌دهد که Shadow DOM را از یک <template> ایجاد می‌کند و سپس خود را ثبت می‌کند.

بهترین بخش در مورد ثبت عناصر سفارشی در داخل یک واردات 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 Imports را راهی ایده‌آل برای اشتراک‌گذاری کامپوننت‌های وب می‌کند.

مدیریت وابستگی ها و واردات فرعی

واردات فرعی

این می تواند مفید باشد که یک واردات وارد دیگری شود. برای مثال، اگر می‌خواهید از مؤلفه دیگری استفاده مجدد یا گسترش دهید، از یک import برای بارگیری عنصر(های) دیگر استفاده کنید.

در زیر یک نمونه واقعی از پلیمر آورده شده است. این یک جزء برگه جدید ( <paper-tabs> ) است که از یک مولفه طرح‌بندی و انتخاب‌کننده استفاده مجدد می‌کند. وابستگی ها با استفاده از HTML Imports مدیریت می شوند.

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 Imports استفاده کنیم نه! می توان از آنها برای مدیریت وابستگی ها استفاده کرد.

با قرار دادن کتابخانه ها در یک Import HTML، به طور خودکار منابع را حذف می کنید. سند فقط یک بار تجزیه می شود. اسکریپت ها فقط یک بار اجرا می شوند. به عنوان مثال، فرض کنید یک import، 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 در بسیاری از درختان واردات مختلف گنجانده شده است، سند آن فقط یک بار توسط مرورگر واکشی و پردازش می شود. بررسی پنل شبکه این را ثابت می کند:

jquery.html یک بار درخواست می شود
jquery.html یک بار درخواست می شود

ملاحظات عملکرد

واردات HTML کاملاً عالی است، اما مانند هر فناوری جدید وب، باید از آنها عاقلانه استفاده کنید. بهترین شیوه های توسعه وب هنوز هم صادق است. در زیر مواردی وجود دارد که باید در نظر داشته باشید.

الحاق واردات

کاهش درخواست های شبکه همیشه مهم است. اگر پیوندهای واردات سطح بالایی زیادی دارید، آنها را در یک منبع واحد ترکیب کنید و آن فایل را وارد کنید!

Vulcanize یک ابزار ساخت npm از تیم Polymer است که به صورت بازگشتی مجموعه‌ای از واردات HTML را در یک فایل منفرد صاف می‌کند. آن را به عنوان یک مرحله ساخت الحاق برای اجزای وب در نظر بگیرید.

ذخیره سازی اهرمی مرورگر را وارد می کند

بسیاری از مردم فراموش می کنند که پشته شبکه مرورگر در طول سال ها به خوبی تنظیم شده است. واردات (و واردات فرعی) نیز از این منطق بهره می برند. http://cdn.com/bootstrap.html واردات ممکن است منابع فرعی داشته باشد، اما آنها در حافظه پنهان ذخیره می شوند.

محتوا فقط زمانی مفید است که آن را اضافه کنید

تا زمانی که از خدمات آن استفاده نکنید، محتوا را بی اثر در نظر بگیرید. یک stylesheet معمولی و پویا بگیرید:

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

مرورگر styles.css را درخواست نخواهد کرد تا زمانی که link به DOM اضافه شود:

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

مثال دیگر نشانه گذاری پویا ایجاد شده است:

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

h2 تا زمانی که آن را به DOM اضافه نکنید، نسبتاً بی معنی است.

همین مفهوم برای سند واردات نیز صادق است. مگر اینکه محتوای آن را به DOM ضمیمه کنید، بدون عملیات است. در واقع، تنها چیزی که در سند واردات مستقیماً "اجرا می شود" <script> است. اسکریپت را در واردات ببینید.

بهینه سازی برای بارگذاری ناهمگام

رندر بلوک را وارد می کند

رندر صفحه اصلی را مسدود می کند . این شبیه کاری است که <link rel="stylesheet"> انجام می دهد. دلیل اینکه مرورگر در وهله اول رندر را در شیوه نامه ها مسدود می کند، به حداقل رساندن FOUC است. واردات مشابه رفتار می‌کند، زیرا می‌تواند حاوی صفحات سبک باشد.

برای اینکه کاملاً ناهمزمان باشید و تجزیه کننده یا رندر را مسدود نکنید، از ویژگی async استفاده کنید:

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

دلیل اینکه async پیش‌فرض برای واردات HTML نیست این است که به توسعه‌دهندگان نیاز دارد تا کار بیشتری انجام دهند. همزمان به طور پیش‌فرض به این معنی است که واردات HTML که دارای تعاریف عناصر سفارشی در داخل آنها هستند، تضمین می‌شوند که به ترتیب بارگذاری و ارتقا داده شوند. در یک دنیای کاملاً ناهمگام، توسعه‌دهندگان باید خودشان آن رقص را مدیریت کرده و زمان‌بندی را ارتقا دهند.

همچنین می‌توانید یک واردات غیرهمگام، به صورت پویا ایجاد کنید:

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

واردات، تجزیه را مسدود نمی کند

واردات، تجزیه صفحه اصلی را مسدود نمی کند . اسکریپت های داخل واردات به ترتیب پردازش می شوند اما صفحه وارد کردن را مسدود نمی کنند. این به این معنی است که شما با حفظ نظم اسکریپت، رفتاری شبیه به تاخیر دریافت می‌کنید. یکی از مزایای قرار دادن واردات خود در <head> این است که به تجزیه کننده اجازه می دهد تا در اسرع وقت روی محتوا شروع به کار کند. با این گفته، بسیار مهم است که <script> در سند اصلی به خاطر بسپارید که همچنان صفحه را مسدود می کند. اولین <script> پس از وارد کردن، رندر صفحه را مسدود می کند. دلیلش این است که یک import می‌تواند اسکریپتی در داخل داشته باشد که باید قبل از اسکریپت در صفحه اصلی اجرا شود.

<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 محتوای خود را اضافه کند. اگر نویسنده واردات قراردادی را برای توسعه‌دهنده برنامه منعقد کند که آن را دنبال کند، واردات می‌تواند خود را به قسمتی از صفحه اصلی اضافه کند:

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> که آن را در صفحه دنبال می‌کند، صفحه را از رندر کردن مسدود می‌کند. به عنوان مثال، گوگل آنالیتیکس قرار دادن کد ردیابی را در <head> توصیه می کند، اگر نمی توانید از قرار دادن <script> در <head> اجتناب کنید، افزودن پویا وارد کردن از مسدود شدن صفحه جلوگیری می کند:

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

چیز هایی برای به یاد آوردن

  • نوع mime یک import text/html است.

  • منابع از منابع دیگر باید با CORS فعال شوند.

  • واردات از همان URL یک بار بازیابی و تجزیه می شود. این بدان معناست که اسکریپت در یک import فقط اولین باری که واردات مشاهده می شود اجرا می شود.

  • اسکریپت‌های وارد شده به ترتیب پردازش می‌شوند، اما تجزیه سند اصلی را مسدود نمی‌کنند.

  • پیوند وارد کردن به معنای "#درج محتوا در اینجا" نیست. این به معنای "تجزیه کننده، از واکشی این سند خارج شوید تا بتوانم بعداً از آن استفاده کنم". در حالی که اسکریپت ها در زمان واردات اجرا می شوند، شیوه نامه ها، نشانه گذاری، و منابع دیگر باید به طور صریح به صفحه اصلی اضافه شوند. توجه داشته باشید، <style> نیازی به افزودن صریح ندارد. این یک تفاوت عمده بین HTML Imports و <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

  • تجزیه HTML را موازی می کند - اولین باری است که مرورگر می تواند دو (یا بیشتر) تجزیه کننده HTML را به صورت موازی اجرا کند.

  • جابجایی بین حالت‌های اشکال‌زدایی و غیراشکال‌زدایی را در یک برنامه فعال می‌کند ، فقط با تغییر خود هدف واردات. برنامه شما نیازی به دانستن اینکه هدف واردات یک منبع همراه/کامپایل شده است یا درخت واردات نیست.