HTML İçe Aktarma

Web için dahil et

Neden ithalat?

Farklı kaynak türlerini web'e nasıl yüklediğinizi düşünün. JS için elimizde <script src> var. CSS için gideceğiniz adres muhtemelen <link rel="stylesheet">. Resimler için bu süre <img>. Videoda <video> var. Ses, <audio>... Doğrudan konuya girin! Web içeriğinin çoğunluğu, kendini yüklemek için basit ve bildirim temelli bir yönteme sahiptir. HTML için böyle değildir. Seçenekleriniz şunlardır:

  1. <iframe> - Denenmiş ve onaylanmıştır, ancak ağır. Bir iframe'in içeriği, sayfanızdan tamamen ayrı bir bağlamda bulunur. Çoğunlukla güzel bir özellik olsa da bu özellik ek zorluklara neden olur (karenin boyutunu içeriğe doğru küçültmek zor bir iş, aynı anda stilini belirlemek neredeyse imkansız).
  2. AJAX - xhr.responseType="document" sevdim ama HTML'yi yüklemek için JS'ye ihtiyacım olduğunu mu söylüyorsunuz? Doğru görünmüyor.
  3. CrazyHacksTM - dizelerin içine yerleştirilmiş, yorum olarak gizlenmiş (ör. <script type="text/html">). Harika!

İroniyi görüyor musunuz? Web'in en temel içeriği olan HTML, üzerinde çalışmak için en fazla çabayı gerektirir. Neyse ki Web Bileşenleri, sorunu gidermeye yardımcı olmaya hazır.

Başlarken

Web Bileşenleri yayınlamanın bir parçası olan HTML İçe Aktarma, HTML dokümanlarını diğer HTML dokümanlarına eklemenin bir yoludur. İşaretlemeyle de sınırlı değilsiniz. İçe aktarma işlemi, bir .html dosyasının içerebileceği CSS, JavaScript veya diğer tüm öğeleri de içerebilir. Başka bir deyişle bu, içe aktarma işlemini ilgili HTML/CSS/JS'yi yüklemek için harika bir araç haline getirir.

Temel bilgiler

<link rel="import"> belirterek sayfanıza içe aktarma ekleyin:

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

İçe aktarma işleminin URL'sine içe aktarma konumu adı verilir. Başka bir alandan içerik yüklemek için içe aktarma konumunun CORS etkin olması gerekir:

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

Özellik algılama ve destek

Desteği algılamak için <link> öğesinde .import olup olmadığını kontrol edin:

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

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

Tarayıcı desteği henüz yolun başındadır. Chrome 31, bir uygulama görülen ilk tarayıcıydı, ancak diğer tarayıcı satıcıları ES Modüllerinin işleyişini görmek için bekliyor. Ancak, diğer tarayıcılarda webcomponents.js polyfill, özellikler yaygın şekilde desteklenene kadar harika bir şekilde çalışır.

Kaynakları paket haline getirme

İçe aktarma işlemleri, HTML/CSS/JS (diğer HTML İçe Aktarmalarını bile) tek bir teslimatta gruplandırmak için kullanılan bir kural sağlar. Bu işin doğuştan gelen bir özelliği, ama güçlü bir özelliği. Tema veya kitaplık oluşturuyorsanız ya da uygulamanızı mantıksal parçalara ayırmak istiyorsanız, kullanıcılara tek bir URL sunmak cazip bir karar olacaktır. Hatta içe aktarma yoluyla bir uygulamanın tamamını bile yayınlayabilirsiniz. Bir saniye düşün.

Gerçek dünyaya bir örnek olarak Bootstrap verilebilir. Bootstrap ayrı dosyalardan (bootstrap.css, bootstrap.js, yazı tipleri) oluşur, eklentileri için JQuery gerektirir ve işaretleme örnekleri sağlar. Geliştiriciler esneklikten hoşlanırlar. Çerçevenin kullanmak istedikleri kısımları satın almalarına olanak tanır. Bununla birlikte, her zamanki JoeDeveloperTM sayesinde kolay yoldan yararlanabilir ve Tüm Bootstrap'leri indiririm.

İçe aktarma işlemleri Bootstrap gibi bir şey için çok mantıklı. Önyükleme yüklemenin geleceğini sunuyorum:

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

Kullanıcıların yalnızca HTML İçe Aktarma bağlantısını yüklemeleri yeterlidir. Dosyaların dağınık çekimiyle uğraşmaları gerekmiyor. Bunun yerine, Bootstrap'in tamamı yönetilir ve bir import (Bootstrap.html) dosyasında toplanır:

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

Bırak bakalım. Heyecan verici bir konu.

Yükleme/hata etkinlikleri

<link> öğesi, bir içe aktarma işlemi başarıyla yüklendiğinde load etkinliğini, deneme başarısız olduğunda da onerror etkinliğini tetikler (ör. kaynak 404'lerse).

İçe aktarılan öğeler hemen yüklenmeye çalışılır. Sorun yaşamanın kolay bir yolu, onload/onerror özelliklerini kullanmaktır:

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

Veya içe aktarmayı dinamik olarak oluşturuyorsanız:

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

İçeriği kullanma

Bir sayfaya içe aktarma eklemek, "ilgili dosyanın içeriğini buraya yüklemek" anlamına gelmez. "Ayrıştırıcı, kullanabilmem için bu dokümanı getir" anlamına gelir. İçeriği gerçekten kullanmak için harekete geçmeniz ve senaryo yazmanız gerekiyor.

Kritik bir aha! an, içe aktarmanın yalnızca bir doküman olduğunu fark etmektir. İçe aktarma işleminin içeriği, içe aktarma dokümanı olarak adlandırılır. Standart DOM API'lerini kullanarak bir içe aktarma işleminin ayrıntılarını değiştirebilirsiniz.

link.import

İçe aktarma işleminin içeriğine erişmek için bağlantı öğesinin .import özelliğini kullanın:

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

link.import, aşağıdaki koşullarda null:

  • Tarayıcı, HTML İçe Aktarma özelliğini desteklemiyor.
  • <link>, rel="import" içermiyor.
  • <link>, DOM'ye eklenmedi.
  • <link>, DOM'den kaldırıldı.
  • Kaynak, CORS için etkin değil.

Tam örnek

warnings.html öğesinin aşağıdakileri içerdiğini varsayalım:

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

İçe aktarıcılar bu dokümanın belirli bir bölümünü alıp sayfalarına klonlayabilir:

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

İçe aktarma işlemlerinde komut dosyası çalıştırma

İçe aktarma işlemleri ana dokümanda yer almıyor. Uydular. Ancak, ana doküman öncelikli olsa bile içe aktarma işleminiz ana sayfada işlem yapmaya devam edebilir. İçe aktarma işlemi, kendi DOM'una ve/veya onu içe aktaran sayfanın DOM'una erişebilir:

Örnek - stil sayfalarından birini ana sayfaya ekleyen 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>

Burada neler olup bittiğine dikkat edin. İçe aktarma işleminin içindeki komut dosyası, içe aktarılan dokümanı (document.currentScript.ownerDocument) referans alıyor ve söz konusu dokümanın bir bölümünü içe aktarma sayfasına (mainDoc.head.appendChild(...)) ekliyor. Bana sorarsanız gayet net.

İçe aktarma işlemindeki JavaScript kuralları:

  • İçe aktarma işlemindeki komut dosyası, içe aktarma document dosyasını içeren pencerenin bağlamında yürütülür. Bu durumda, window.document ana sayfa dokümanı anlamına gelir. Bunun iki faydalı sonucu vardır:
    • bir içe aktarmada tanımlanan işlevler window tarihinde sona eriyor.
    • içe aktarma işleminin <script> bloklarını ana sayfaya eklemek gibi zor bir işlem yapmanız gerekmez. Komut dosyası da çalıştırılır.
  • İçe aktarma işlemleri, ana sayfanın ayrıştırılmasını engellemez. Ancak içlerindeki komut dosyaları sırayla işlenir. Bu, uygun komut dosyası sırasını korurken erteleme benzeri davranışlara sahip olacağınız anlamına gelir. Bu konuyla ilgili daha fazla bilgiyi aşağıda bulabilirsiniz.

Web Bileşenlerini Sunma

HTML İçe Aktarma tasarımı, web'de yeniden kullanılabilir içerik yüklemeye çok uygundur. Özellikle Web Bileşenleri'nin dağıtımı için ideal bir yöntemdir. Temel HTML <template>'lardan, Gölge DOM içeren tam donanımlı Özel Öğeler'e [1, 2, 3] kadar her şey. Bu teknolojiler birlikte kullanıldığında içe aktarma işlemleri Web Bileşenleri için bir #include haline gelir.

Şablon ekleme

HTML Şablonu öğesi, HTML İçe Aktarma işlemleri için doğal olarak uygundur. <template>, içe aktarma uygulamasının istediği gibi kullanması için işaretleme bölümlerini iskeleye ayırmak açısından idealdir. İçeriği <template> içine sarmalamak, kullanılana kadar içeriği hareketsiz hale getirme ek avantajını da sağlar. Yani komut dosyaları, şablon DOM'ye eklenene kadar çalışmaz). Bam!

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>

Özel öğeleri kaydetme

Custom Elements, HTML İçe Aktarma işlemleriyle absürt bir şekilde iyi performans gösteren başka bir Web Bileşeni teknolojisidir. İçe aktarma işlemleri komut dosyasını yürütebilir. Kullanıcıların yapmasına gerek kalmayacak şekilde özel öğelerinizi tanımlamaya ve kaydetmeye ne dersiniz? Buna "otomatik kayıt" diyoruz.

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>

Bu içe aktarma işlemi, <say-hi> ve <shadow-element> olmak üzere iki öğeyi tanımlar (ve kaydeder). İlk örnekte, kendini içe aktarma işleminin içinde kaydeden temel bir özel öğe gösterilmektedir. İkinci örnek, <template> öğesinden Gölge DOM oluşturan ve ardından kendini kaydeden bir özel öğenin nasıl uygulanacağını gösterir.

Özel öğeleri bir HTML içe aktarması içinde kaydetmenin en iyi yanı, içe aktarıcının öğenizi kendi sayfasında tanımlamasıdır. Kablo bağlantısı gerekmez.

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>

Bence bu iş akışı tek başına HTML İçe Aktarma özelliğini Web Bileşenleri paylaşımı için ideal bir yol haline getiriyor.

Bağımlılıkları ve alt içe aktarmaları yönetme

Alt içe aktarmalar

Bir içe aktarma işleminin başka bir içe aktarma işlemi içermesi yararlı olabilir. Örneğin, başka bir bileşeni yeniden kullanmak veya genişletmek isterseniz diğer öğeleri yüklemek için bir içe aktarma işlemi kullanın.

Aşağıda Polymer'den gerçek bir örnek verilmiştir. Düzen ve seçici bileşenini yeniden kullanan yeni bir sekme bileşenidir (<paper-tabs>). Bağımlılıklar, HTML İçe Aktarma işlevi kullanılarak yönetilir.

Paper-tabs.html (basitleştirilmiş):

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

Uygulama geliştiriciler bu yeni öğeyi aşağıdakileri kullanarak içe aktarabilir:

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

Gelecekte yeni ve daha muhteşem bir <iron-selector2> ortaya çıkarsa <iron-selector> bu öğeyi yenisiyle değiştirebilir ve hemen kullanmaya başlayabilirsiniz. İçe aktarma işlemleri ve web bileşenleri sayesinde kullanıcılarınızı kesintiye uğratmazsınız.

Bağımlılık yönetimi

JQuery'nin sayfa başına birden fazla kez yüklenmesinin hatalara neden olduğunu hepimiz biliyoruz. Birden çok bileşen aynı kitaplığı kullandığında bu, Web Bileşenleri için büyük bir soruna neden olmaz mı? HTML İçe Aktarma işlevini kullanıyorsak olmaz! Bağımlılıkları yönetmek için kullanılabilirler.

Kitaplıkları HTML İçe Aktarma işlevinde sarmalayarak kaynakların tekilliğini otomatik olarak kaldırırsınız. Doküman yalnızca bir kez ayrıştırılır. Komut dosyaları yalnızca bir kez yürütülür. Örneğin, JQuery'nin bir kopyasını yükleyen jquery.html adlı bir içe aktarma işlemi tanımladığınızı varsayalım.

jquery.html

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

Bu içe aktarma işlemi, aşağıdaki gibi sonraki içe aktarma işlemlerinde yeniden kullanılabilir:

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>

Kitaplık gerekliyse, ana sayfa bile jquery.html dosyasını içerebilir:

<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, birçok farklı içe aktarma ağacında yer almasına rağmen, doküman tarayıcı tarafından yalnızca bir kez getirilir ve işlenir. Ağ panelinin incelenmesi, şunları kanıtlar:

jquery.html bir kez istendi
jquery.html bir kez istenir

Performansla ilgili konular

HTML İçe Aktarma işlevi harikadır ancak diğer tüm yeni web teknolojilerinde olduğu gibi bunları da akıllıca kullanmalısınız. Web geliştirme en iyi uygulamaları hâlâ geçerlidir. Unutulmaması gereken bazı noktalar aşağıda belirtilmiştir.

İçe aktarmaları birleştir

Ağ isteklerini azaltmak her zaman önemlidir. Çok sayıda üst düzey içe aktarma bağlantınız varsa bunları tek bir kaynakta birleştirmeyi ve o dosyayı içe aktarmayı düşünebilirsiniz.

Vulcanize, Polymer ekibinin bir HTML İçe Aktarma grubunu yinelemeli olarak tek bir dosyada birleştiren bir npm oluşturma aracıdır. Bunu, Web Bileşenleri için birleştirme oluşturma adımı olarak düşünebilirsiniz.

İçe aktarma işlemleri tarayıcı önbelleğine alma işleminden yararlanır

Birçok kişi, tarayıcının ağ yığınının yıllar içinde hassas bir şekilde ayarlandığını unutur. İçe aktarma (ve alt içe aktarma işlemleri) de bu mantıktan yararlanır. http://cdn.com/bootstrap.html içe aktarma işleminin alt kaynakları olabilir, ancak bunlar önbelleğe alınır.

İçerik yalnızca onu eklediğinizde yararlı olur

İçeriği, hizmetlerini kullanana kadar durağan olarak düşünebilirsiniz. Normal, dinamik bir şekilde oluşturulmuş bir stil sayfasını alın:

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

Tarayıcı, link DOM'ye eklenene kadar style.css isteğinde bulunmaz:

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

Diğer bir örnek, dinamik olarak oluşturulan işaretlemedir:

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

h2, DOM'ye eklenene kadar göreli olarak bir anlam ifade etmez.

Aynı durum, içe aktarma dokümanı için de geçerlidir. İçeriğini DOM'ye eklemediğiniz sürece işlem yapılamaz. Aslında, doğrudan içe aktarma dokümanında "yürüten" tek öğe <script>'dir. İçe aktarma işlemlerinde komut dosyası çalıştırma konusuna bakın.

Eş zamansız yükleme için optimize ediliyor

Blok oluşturmayı içe aktarır

İçe aktarma işlemi, ana sayfanın oluşturulmasını bloke eder. Bu, <link rel="stylesheet"> işlevinin yaptığına benzer. Tarayıcının stil sayfalarında oluşturmayı engellemesinin nedeni öncelikle FOUC'yi en aza indirmektir. İçe aktarma işlemleri, stil sayfaları içerebildiğinden benzer şekilde davranır.

Tamamen eşzamansız olmak ve ayrıştırıcı veya oluşturmayı engellememek için async özelliğini kullanın:

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

async uygulamasının HTML İçe Aktarma için varsayılan seçenek olmamasının nedeni, geliştiricilerin daha fazla iş yapmasını gerektirmesidir. Varsayılan olarak eşzamanlı, özel öğe tanımları bulunan HTML İçe Aktarma işlemlerinin sırayla yükleneceği ve yeni sürüme geçirileceği anlamına gelir. Tamamen eş zamanlı olmayan bir dünyada, geliştiricilerin bu dans ve yükseltme zamanlamalarını kendilerinin yönetmesi gerekir.

Ayrıca, dinamik olarak eşzamansız bir içe aktarma işlemi de oluşturabilirsiniz:

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

İçe aktarma işlemleri ayrıştırmayı engellemez

İçe aktarma işlemleri, ana sayfanın ayrıştırılmasını engellemez. İçe aktarma işlemlerindeki komut dosyaları sırayla işlenir ancak içe aktarma sayfasını engellemez. Bu, uygun komut dosyası sırasını korurken erteleme benzeri davranışlara sahip olacağınız anlamına gelir. İçe aktarma işlemlerinizi <head> içine koymanın avantajlarından biri, ayrıştırıcının içerik üzerinde mümkün olan en kısa sürede çalışmaya başlamasını sağlamasıdır. Bununla birlikte, ana dokümandaki <script> ürününün, sayfayı engellemeye hâlâ devam ettiğini unutmamanız çok önemlidir. Bir içe aktarma işleminden sonraki ilk <script>, sayfanın oluşturulmasını engeller. Bunun nedeni, bir içe aktarma işleminin içinde, ana sayfadaki komut dosyasından önce yürütülmesi gereken bir komut dosyasının bulunabilmesidir.

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

Uygulamanızın yapısına ve kullanım alanınıza bağlı olarak eşzamansız davranışı optimize etmenin birkaç yolu vardır. Aşağıdaki teknikler, ana sayfanın oluşturulmasının engellenmesini azaltır.

1. senaryo (tercih edilen): <head> dilinde veya <body> satır içine yerleştirilen komut dosyanız yok

<script> yerleştirmenizi öneririm, içe aktarma işlemlerinizi hemen takip etmemenizi öneririz. Senaryoları oyunda mümkün olduğunca geç taşıyın... ama bu en iyi uygulamayı zaten yapıyorsunuz, SEN DİN DEĞİNİZ! ;)

Aşağıda bir örnek verilmiştir:

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

Her şey alttadır.

Senaryo 1.5: İçe aktarma kendini ekler

Başka bir seçenek de içe aktarmanın kendi içeriğini eklemesini sağlamaktır. İçe aktarma yazarı, uygulama geliştiricisinin uyması gereken bir sözleşme yaparsa, içe aktarma işlemi kendini ana sayfanın bir alanına ekleyebilir:

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. senaryo: Komut dosyanız <head> dilinde veya <body> dilinde satır içi olarak

Yüklemesi uzun süren bir içe aktarma işleminiz varsa sayfada bunu izleyen ilk <script> sayfanın oluşturulmasını engeller. Örneğin, Google Analytics, izleme kodunu <head> içine yerleştirmenizi önerir. <head> içine <script> kodunu yerleştiremiyorsanız içe aktarmayı dinamik olarak eklemek sayfanın engellenmesini engeller:

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

Alternatif olarak, içe aktarma işlemini <body> dosyasının sonuna doğru ekleyin:

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

Unutulmaması gerekenler

  • Bir içe aktarmanın mime türü text/html şeklindedir.

  • Diğer kaynaklardan gelen kaynaklarda CORS etkin olmalıdır.

  • Aynı URL'den yapılan içe aktarmalar bir kez alınır ve ayrıştırılır. Bu, bir içe aktarma işlemindeki komut dosyasının yalnızca içe aktarma işlemi ilk kez görüldüğünde yürütüldüğü anlamına gelir.

  • İçe aktarma işlemindeki komut dosyaları sırayla işlenir ancak ana doküman ayrıştırma işlemini engellemez.

  • İçe aktarma bağlantısı, "#içeriği buraya ekleyin" anlamına gelmez. "Ayrıştırıcı, daha sonra kullanabilmek için bu dokümanı getir" anlamına gelir. Komut dosyaları içe aktarma sırasında çalıştırılırken stil sayfaları, işaretleme ve diğer kaynakların ana sayfaya açıkça eklenmesi gerekir. <style> öğesinin açıkça eklenmesi gerekmediğini unutmayın. Bu, HTML İçe Aktarmaları ile "bu içeriği burada yükleyin ve oluşturun" yazan <iframe> arasındaki önemli bir farktır.

Sonuç

HTML İçe Aktarmaları, HTML/CSS/JS'nin tek bir kaynak olarak gruplandırılmasına olanak tanır. Kendi başlarına da kullanışlı olan bu fikir, Web Bileşenleri dünyasında son derece güçlü hale geliyor. Geliştiriciler, başkalarının yararlanıp kendi uygulamalarına getirmesi için yeniden kullanılabilir bileşenler oluşturabilir. Üstelik bunların hepsi <link rel="import"> üzerinden sağlanır.

HTML İçe Aktarma basit bir kavramdır, ancak platform için bir dizi ilginç kullanım alanına olanak sağlar.

Kullanım alanları

  • İlgili HTML/CSS/JS'yi tek bir paket olarak dağıtın. Teorik olarak, bir web uygulamasının tamamını başka bir web uygulamasına aktarabilirsiniz.
  • Kod düzeni: Kavramları mantıksal olarak farklı dosyalara ayırarak modülerlik ve yeniden kullanılabilirliği teşvik edin**.
  • Bir veya daha fazla Özel Öğe tanımı yayınlayın. İçe aktarma işlemi bunları register ve bir uygulamaya dahil etmek için kullanılabilir. Bu yöntem, öğenin arayüzünü/tanımını kullanılma şeklinden ayrı tutarak iyi yazılım kalıpları sağlar.
  • Bağımlılıkları yönetme: Kaynaklar otomatik olarak tekilleştirilir.
  • Komut dosyaları - İçe aktarma işlemlerinden önce, büyük boyutlu bir JS kitaplığının çalışmaya başlaması için dosyası tamamen ayrıştırılıyordu. Bu da yavaş çalışıyordu. İçe aktarmalarda, kitaplık A parçası ayrıştırılır ayrılmaz çalışmaya başlayabilir. Daha az gecikme.
// TODO: DevSite - Code sample removed as it used inline event handlers

  • HTML ayrıştırmasını paralel hale getirir: Tarayıcı, ilk kez iki (veya daha fazla) HTML ayrıştırıcıyı paralel olarak çalıştırabilir.

  • Yalnızca içe aktarma hedefinin kendisini değiştirerek uygulamalarda hata ayıklama modu ile hata ayıklama dışı modlar arasında geçiş yapılmasını sağlar. Uygulamanızın içe aktarma hedefinin gruplandırılmış/derlenmiş kaynak mı yoksa içe aktarma ağacı mı olduğunu bilmesi gerekmez.