HTML İçe Aktarma

Web için dahil et

Neden içe aktarma?

Web'de farklı türdeki kaynakları nasıl yüklediğinizi düşünün. JS için <script src>'e sahibiz. CSS için muhtemelen <link rel="stylesheet">'ü tercih edersiniz. Görseller için <img>. Videoda <video> bulunuyor. Ses, <audio>… Konuya girin. Web'deki içeriğin büyük bir kısmı, kendisini yüklemenin basit ve açık bir yoluna sahiptir. HTML için durum böyle değildir. Seçenekleriniz şunlardır:

  1. <iframe>: Denenip onaylanmıştır ancak ağırdır. Bir iframe'in içeriği, tamamen sayfanızdan ayrı bir bağlamda bulunur. Bu genellikle harika bir özellik olsa da ek zorluklar yaratır (çerçevenin boyutunu içeriğine göre küçültmek zordur, içeriğe/içeriğin dışına komut dosyası eklemek son derece can sıkıcıdır, stil vermek neredeyse imkansızdır).
  2. AJAX: xhr.responseType="document"'ı seviyorum ancak HTML yüklemek için JS'ye ihtiyacım olduğunu mu söylüyorsunuz? Bu doğru değil.
  3. CrazyHacksTM - dizelere yerleştirilmiş, yorum olarak gizlenmiş (ör. <script type="text/html">). Eyvah!

Buradaki ironiyi görüyor musunuz? Web'in en temel içeriği olan HTML ile çalışmak için en fazla çabayı göstermeniz gerekir. Neyse ki Web Bileşenleri sayesinde bu yoldan sapmadan ilerleyebiliriz.

Başlarken

Web Bileşenleri grubunun bir parçası olan HTML içe aktarma, HTML dokümanlarını diğer HTML dokümanlarına dahil etmenin bir yoludur. İşaretlemeyle de sınırlı değilsiniz. İçe aktarma işlemi CSS, JavaScript veya .html dosyasının içerebileceği başka öğeler de içerebilir. Diğer bir deyişle, içe aktarma işlemi ilgili HTML/CSS/JS'yi yüklemek için mükemmel bir araçtır.

Temel bilgiler

<link rel="import"> tanımlayarak sayfanıza bir içe aktarma işlemi ekleyin:

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

İçe aktarma işleminin URL'sine içe aktarma konumu denir. Başka bir alandan içerik yüklemek için içe aktarma konumunun CORS'u etkinleştirmesi gerekir:

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

Özellik algılama ve desteği

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 yeni kullanıma sunuldu. Chrome 31, ES modüllerinin kullanıldığı ilk tarayıcı oldu ancak diğer tarayıcı tedarikçileri, ES modüllerinin nasıl kullanılacağını görmek için bekliyor. Ancak diğer tarayıcılarda, bu özellikler yaygın olarak desteklenene kadar webcomponents.js polyfill mükemmel çalışır.

Kaynakları paketleme

İçe aktarma işlemleri, HTML/CSS/JS'yi (diğer HTML İçe Aktarmalarını bile) tek bir teslimatta gruplandırmak için bir kural sağlar. Bu, temel bir özelliktir ancak oldukça güçlüdür. Bir 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 vermek ilgi çekici olabilir. Hatta içe aktarma işlemiyle bir uygulamanın tamamını bile yayınlayabilirsiniz. Bunu bir an için düşünün.

Gerçek hayattan bir örnek olarak Bootstrap'u verebiliriz. Önyükleme ayrı dosyalardan (bootstrap.css, bootstrap.js, yazı tipleri, yazı tipleri) oluşur, eklentileri için JQuery'ye ihtiyaç duyar ve işaretleme örnekleri sunar. Geliştiriciler, alakart esnekliği sever. Bu sayede, kendileri kullanmak istedikleri çerçeve bölümlerini satın alabilirler. Bununla birlikte, ortalama bir JoeDeveloper™'ın kolay yolu tercih edip Bootstrap'un tamamını indireceğini tahmin ediyorum.

İçe aktarma, Bootstrap gibi bir şey için çok mantıklı bir işlemdir. Bootstrap'u yüklemenin geleceğini sunuyoruz:

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

Kullanıcıların bir HTML İçe Aktarma bağlantısı yüklemesi. Dosyaları farklı yerlere dağıtmak zorunda kalmaz. Bunun yerine, Bootstrap'un tamamı yönetilir ve bootstrap.html adlı bir içe aktarma dosyasına yerleştirilir:

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

Bu işlemin tamamlanmasını bekleyin. Heyecan verici şeyler.

Yükleme/hata etkinlikleri

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

İçe aktarma işlemleri hemen yüklenmeye çalışılır. Bu tür sorunlardan kaçınmanı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)">

İçe aktarma işlemini 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 işlemi eklemek, "bu dosyanın içeriğini buraya ekleyin" anlamına gelmez. Bu, "ayrıştırıcı, bu belgeyi alıp kullanabilmem için getir" anlamına gelir. İçeriği gerçekten kullanmak için harekete geçmeniz ve senaryo yazmanız gerekir.

aha! ile ilgili kritik bir an, içe aktarmanın yalnızca bir doküman olduğunun farkına varıyor. Aslında, içe aktarma işleminin içeriğine içe aktarma dokümanı adı verilir. Standart DOM API'lerini kullanarak içe aktarma işleminin temel öğelerini değiştirebilirsiniz.

link.import

İçe aktarılan içeriğe erişmek için bağlantı öğesinin .import mülkünü kullanın:

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

link.import, aşağıdaki koşullar altında null'tır:

  • Tarayıcı, HTML içe aktarma işlemlerini desteklemiyor.
  • <link>'te rel="import" yok.
  • <link>, DOM'ye eklenmedi.
  • <link>, DOM'den kaldırıldı.
  • Kaynak CORS'u desteklemiyor.

Tam örnek

warnings.html şunu 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 değildir. Uydu üzerinden çalışıyorlar. Ana belge hükmetse bile içe aktarmanız ana sayfada işlem yapmaya devam edebilir. İçe aktarılan öğe, kendi DOM'una ve/veya kendisini 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 olduğunu fark edin. İçe aktarma işleminin içindeki komut dosyası, içe aktarılan dokümanı (document.currentScript.ownerDocument) referans alır ve bu dokümanın bir kısmını içe aktarma sayfasına (mainDoc.head.appendChild(...)) ekler. Bana sorarsanız oldukça karmaşık bir durum.

İçe aktarma işleminde JavaScript kuralları:

  • İçe aktarma işlemindeki komut dosyası, içe aktarma işlemini yapan document öğesini içeren pencere bağlamında yürütülür. Dolayısıyla window.document, ana sayfa dokümanıdır. Bunun iki yararlı yan etkisi vardır:
    • işlevleri window'te sona eriyor.
    • içe aktarmanın <script> bloklarını ana sayfaya eklemek gibi zor bir şey yapmanız gerekmez. Komut dosyası tekrar yürütülür.
  • İçe aktarma işlemleri, ana sayfanın ayrıştırılmasını engellemez. Ancak içlerindeki komut dosyaları sırayla işlenir. Bunun anlamı, komut dosyası sırasını korurken erteleme benzeri bir davranış elde edeceğinizdir. Bu konu hakkında daha fazla bilgiyi aşağıda bulabilirsiniz.

Web Bileşenleri Sağlanıyor

HTML içe aktarma özelliğinin tasarımı, web'de yeniden kullanılabilir içerik yüklemek için idealdir. Özellikle Web Bileşenleri'ni dağıtmak için ideal bir yöntemdir. Temel HTML <template>'lerden Shadow DOM [1, 2, 3] içeren tam teşekküllü Özel Öğeler'e kadar her şey. Bu teknolojiler birlikte kullanıldığında içe aktarma işlemleri Web Bileşenleri için bir #include olur.

Şablon ekleme

HTML şablonu öğesi, HTML içe aktarma işlemleri için idealdir. <template>, içe aktarılan uygulamanın istediği gibi kullanmak üzere işaretleme bölümlerinin iskeletini oluşturmak için idealdir. İçeriği <template> içine sarmalamak, kullanılmadığı sürece içeriğin etkin olmaması avantajını da sağlar. Yani komut dosyaları, şablon DOM'a 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

Özel Öğeler, HTML İçe Aktarmaları ile son derece iyi çalışan başka bir Web Bileşeni teknolojisidir. İçe aktarma işlemleri komut dosyasını yürütebilir. Bu nedenle, kullanıcıların bunu yapmasına gerek kalmaması için özel öğelerinizi tanımlayıp kaydettirebilirsiniz. "Otomatik kayıt" adını verin.

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 öğe tanımlar (ve kaydeder). İlk örnekte, kendisini içe aktarma işlemine kaydeden temel bir özel öğe gösterilmektedir. İkinci örnekte, bir <template> öğesinden gölge DOM oluşturan ve ardından kendisini kaydeden özel bir öğenin nasıl uygulanacağı gösterilmektedir.

Özel öğeleri HTML içe aktarma işlemine kaydetmenin en iyi yanı, içe aktarıcının öğenizi kendi sayfasında tanımlaması yeterli olması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>

Bana göre, yalnızca bu iş akışı HTML içe aktarma işlemlerini web bileşenlerini paylaşmak için ideal bir yöntem haline getiriyor.

Bağımlılıkları ve alt içe aktarma işlemlerini yönetme

Alt içe aktarmalar

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

Aşağıda, Polymer'den gerçek bir örnek verilmiştir. Bir düzen ve seçici bileşenini yeniden kullanan yeni bir sekme bileşenidir (<paper-tabs>). Bağımlılıklar, HTML içe aktarma işlemleri 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 şu platformları kullanarak içe aktarabilir:

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

Gelecekte daha iyi bir <iron-selector2> çıktığında <iron-selector>'i değiştirip hemen kullanmaya başlayabilirsiniz. İçe aktarma ve web bileşenleri sayesinde kullanıcılarınızın deneyimini bozmazsınız.

Bağımlılık yönetimi

JQuery'nin sayfa başına bir defadan fazla yüklenmesinin hatalara neden olduğunu hepimiz biliyoruz. Birden fazla bileşen aynı kitaplığı kullandığında bu, Web Bileşenleri için devasa bir sorun olmaz mı? HTML içe aktarma özelliğini kullanırsanız bu sorun yaşanmaz. Bağımlılıkları yönetmek için kullanılabilirler.

Kitaplıkları bir HTML içe aktarma işlemine sarmalayarak kaynakları otomatik olarak tekilleştirirsiniz. 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 bir içe aktarma (jquery.html) tanımladığınızı varsayalım.

jquery.html

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

Bu içe aktarma işlemi, sonraki içe aktarma işlemlerinde aşağıdaki gibi 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>

Ana sayfa bile, kitaplığa ihtiyacı varsa 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ına dahil edilmiş olsa da tarayıcı, dokümanı yalnızca bir kez getirir ve işler. Ağ panelini inceleyerek bunu doğrulayabilirsiniz:

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

Performansla ilgili konular

HTML içe aktarma işlemleri kesinlikle harikadır ancak tüm yeni web teknolojilerinde olduğu gibi bunları akıllıca kullanmanız gerekir. Web geliştirme en iyi uygulamaları hâlâ geçerliliğini koruyor. Aşağıda, dikkat etmeniz gereken bazı noktalar verilmiştir.

İçe aktarmaları birleştir

Ağ isteklerini azaltmak her zaman önemlidir. Üst düzey içe aktarma bağlantınız çok fazlaysa bunları tek bir kaynakta birleştirip bu dosyayı içe aktarabilirsiniz.

Vulcanize, Polymer ekibi tarafından geliştirilen ve bir dizi HTML içe aktarma dosyasını tek bir dosyada yinelemeli olarak düzleştiren bir npm derleme aracıdır. Bunu, Web Bileşenleri için bir birleştirme derleme adımı olarak düşünebilirsiniz.

İçe aktarma işlemleri tarayıcı önbelleğinden yararlanır

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

İçerik yalnızca siz eklediğinizde faydalıdır

İçerikleri, hizmetlerini çağırana kadar hareketsiz olarak düşünün. Normal, dinamik olarak oluşturulmuş bir stil sayfasını ele alalım:

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

Tarayıcı, link DOM'a eklenene kadar styles.css dosyasını istemez:

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 ekleyene kadar nispeten anlamsızdır.

Aynı durum içe aktarma dokümanı için de geçerlidir. İçeriğini DOM'a eklemediğiniz sürece hiçbir işlem yapılmaz. Aslında, içe aktarma belgesinde doğrudan "yürütülen" tek şey <script>'tür. İçe aktarma işlemlerinde komut dosyası oluşturma başlıklı makaleyi inceleyin.

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

Blok oluşturmayı içe aktarır

İçe aktarma işlemleri ana sayfanın oluşturulmasını engeller. Bu, <link rel="stylesheet"> işlevinin yaptığına benzer. Tarayıcının stil sayfalarında oluşturmayı engellemesinin nedeni, FOUC'yi en aza indirmektir. Stil sayfaları içerebildikleri için içe aktarılanlar da benzer şekilde davranır.

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

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

async, HTML içe aktarma işlemleri için varsayılan olarak kullanılmıyor çünkü geliştiricilerin daha fazla çalışma yapmasını gerektiriyor. Varsayılan olarak senkronize, içinde özel öğe tanımları bulunan HTML içe aktarma işlemlerinin sırayla yüklenmesinin ve yükseltilmesinin garanti edildiği anlamına gelir. Tamamen eşzamansız bir dünyada, geliştiricilerin bu dansı yönetmesi ve zamanlamaları yükseltmeleri kendilerinin yapması gerekir.

Dinamik olarak da eşzamansız içe aktarma işlemi 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 sayede, komut dosyası sırasını doğru şekilde korurken erteleme benzeri bir davranış elde edersiniz. İçe aktarma işlemlerinizi <head> içine koymanın bir avantajı, ayrıştırıcının içerik üzerinde en kısa sürede çalışmaya başlamasına olanak tanımasıdır. Bununla birlikte, ana dokümanda <script> öğesinin yine sayfayı engellemeye devam ettiğini hatırlamanız çok önemlidir. İçe aktarma işleminden sonraki ilk <script>, sayfanın oluşturulmasını engeller. Bunun nedeni, içe aktarma işleminin içinde ana sayfadaki komut dosyasından önce yürütülmesi gereken bir komut dosyası bulunabilmesidir.

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

Uygulama yapınıza ve kullanım alanınıza bağlı olarak, ayarsız davranışı optimize etmenin birkaç yolu vardır. Aşağıdaki teknikler, ana sayfa oluşturma işleminin engellenmesini azaltır.

1. senaryo (tercih edilen): <head> içinde komut dosyanız veya <body> içine yerleştirilmiş komut dosyanız yok

<script>'ü yerleştirmeyle ilgili önerim, içe aktarma işleminizin hemen ardından yapmamaktır. Oyunda komut dosyalarını mümkün olduğunca geç taşıyın. Ama en iyi pratiğinizi zaten yapıyorsunuz. Bu siz değil misiniz? ;)

Aşağıda bununla ilgili 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 en altta.

Senaryo 1.5: İçe aktarma kendini ekler

İçe aktarma işleminin kendi içeriğini eklemesini de seçebilirsiniz. İçe aktarma yazarı, uygulama geliştiricinin uyması gereken bir sözleşme oluşturursa içe aktarma işlemi kendisini 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> içinde veya <body> içine yerleştirilmiş

Yüklemesi uzun süren bir içe aktarma işleminiz varsa sayfada bu işlemi takip eden ilk <script>, sayfanın oluşturulmasını engeller. Örneğin Google Analytics, izleme kodunu <head> içine yerleştirmenizi önerir. <script>'u <head> içine yerleştirmekten kaçınamıyorsanız içe aktarma işlemini dinamik olarak eklemek sayfanın engellenmesini önler:

<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 yakın bir yere 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

  • İçe aktarma işleminin mime türü text/html olmalıdır.

  • Diğer kaynaklardan gelen kaynakların CORS'a etkin olması gerekir.

  • Aynı URL'den yapılan içe aktarmalar bir kez alınır ve ayrıştırılır. Bu, 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üleceği anlamına gelir.

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

  • İçe aktarma bağlantısı, "#include the content here" (İçeriği buraya ekleyin) anlamına gelmez. Bu, "ayrıştırıcı, daha sonra kullanabilmem için bu dokümanı getir" anlamına gelir. Komut dosyaları içe aktarma sırasında yürütülürken stil sayfaları, işaretleme ve diğer kaynakların ana sayfaya açıkça eklenmesi gerekir. <style> özelliğinin açık bir şekilde eklenmesine gerek yoktur. Bu, HTML içe aktarma ile <iframe> arasındaki önemli bir farktır. <iframe>, "bu içeriği burada yükle ve oluştur" der.

Sonuç

HTML içe aktarma işlemleri, HTML/CSS/JS'nin tek bir kaynak olarak gruplandırılmasına olanak tanır. Bu fikir tek başına yararlı olsa da Web Bileşenleri dünyasında son derece güçlü hale gelir. Geliştiriciler, başkalarının yararlanıp kendi uygulamalarına getirmeleri için yeniden kullanılabilir bileşenler oluşturabilirler. Bu bileşenlerin tümü <link rel="import"> üzerinden sunulur.

HTML içe aktarma işlemi basit bir kavram olsa da platform için birçok ilginç kullanım alanı sunar.

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 uygulamaya aktarabilirsiniz.
  • Kod organizasyonu: Kavramları mantıksal olarak farklı dosyalara ayırarak modülerliği ve yeniden kullanılabilirliği teşvik edin**.
  • Bir veya daha fazla Özel Öğe tanımı yayınlayın. Öğeleri kaydetmek ve bir uygulamaya dahil etmek için içe aktarma işlemi kullanılabilir. Bu işlem, öğenin arayüzünü/tanımını kullanım şeklinden ayrı tutarak iyi yazılım kalıplarını uygular.
  • Bağımlılıkları yönetme: Kaynaklar otomatik olarak tekilleştirilir.
  • Komut dosyalarını parçalara ayırma: İçe aktarma işleminden önce, büyük boyutlu bir JS kitaplığının çalışması için dosyası tamamen ayrıştırılırdı. Bu işlem yavaştı. İçe aktarma işlemlerinde, A parçası ayrıştırılır alınmaz kitaplık ç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 paralel olarak iki (veya daha fazla) HTML ayrıştırıcıyı çalıştırabildiğinde.

  • Yalnızca içe aktarma hedefini değiştirerek bir uygulamada hata ayıklama ve hata ayıklama dışı modlar arasında geçiş yapmayı sağlar. Uygulamanızın, içe aktarma hedefinin paketlenmiş/derlenmiş bir kaynak mı yoksa içe aktarma ağacı mı olduğunu bilmesi gerekmez.