Nhập HTML

Đưa vào cho web

Tại sao nên nhập?

Hãy suy nghĩ về cách bạn tải các loại tài nguyên khác nhau trên web. Đối với JS, chúng ta có <script src>. Đối với CSS, lựa chọn của bạn có thể là <link rel="stylesheet">. Đối với hình ảnh, đó là <img>. Video có <video>. Âm thanh, <audio>... Vào thẳng trọng tâm! Phần lớn nội dung của web có cách tự tải đơn giản và mang tính khai báo. Không áp dụng cho HTML. Bạn có các lựa chọn sau:

  1. <iframe> – đã chứng tỏ hiệu quả nhưng thực sự quan trọng. Nội dung của iframe nằm hoàn toàn trong ngữ cảnh riêng biệt với trang của bạn. Mặc dù đó chủ yếu là một tính năng tuyệt vời, nhưng nó cũng tạo ra thêm nhiều thách thức (việc thu nhỏ việc gói kích thước khung hình cho nội dung là rất khó, cực kỳ khó chịu khi viết kịch bản vào/ra, gần như không thể tạo kiểu).
  2. AJAX – Tôi yêu xhr.responseType="document", nhưng ý bạn là tôi cần JS để tải HTML? Điều đó có vẻ không đúng.
  3. CrazyHacksTM – được nhúng trong chuỗi, bị ẩn dưới dạng nhận xét (ví dụ: <script type="text/html">). Thật tuyệt!

Bạn thấy điều trớ trêu không? Nội dung cơ bản nhất trên web, HTML, đòi hỏi bạn phải nỗ lực nhiều nhất để xử lý. Rất may là Các Thành phần web đã giúp chúng tôi trở lại đúng hướng.

Bắt đầu

Nhập HTML, một phần của chế độ truyền Thành phần web, là một cách để đưa tài liệu HTML vào các tài liệu HTML khác. Bạn cũng không bị giới hạn ở thẻ đánh dấu. Dữ liệu nhập cũng có thể bao gồm CSS, JavaScript hoặc bất kỳ nội dung nào khác trong tệp .html. Nói cách khác, điều này giúp nhập một công cụ tuyệt vời để tải HTML/CSS/JS liên quan.

Thông tin cơ bản

Hãy đưa một dữ liệu nhập vào trang của bạn bằng cách khai báo <link rel="import">:

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

URL của quá trình nhập được gọi là vị trí nhập. Để tải nội dung từ một miền khác, vị trí nhập cần phải bật CORS:

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

Phát hiện và hỗ trợ tính năng

Để phát hiện khả năng hỗ trợ, hãy kiểm tra xem .import có tồn tại trên phần tử <link> hay không:

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

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

Hỗ trợ trình duyệt vẫn còn ở giai đoạn đầu. Chrome 31 là trình duyệt đầu tiên thấy cách triển khai nhưng các nhà cung cấp trình duyệt khác đang chờ xem cách các Mô-đun ES hoạt động. Tuy nhiên, đối với các trình duyệt khác, webcomponent.js polyfill sẽ hoạt động hiệu quả cho đến khi mọi thứ được hỗ trợ rộng rãi.

Nhóm tài nguyên

Dữ liệu nhập cung cấp quy ước để nhóm HTML/CSS/JS (thậm chí cả các dữ liệu Nhập HTML khác) thành một tệp có thể gửi. Đây là một tính năng nội tại nhưng lại rất hiệu quả. Nếu bạn đang tạo một giao diện, thư viện hay chỉ muốn phân đoạn ứng dụng thành các phần hợp lý, thì việc cung cấp cho người dùng một URL duy nhất sẽ vô cùng hấp dẫn. Bạn thậm chí có thể phân phối toàn bộ ứng dụng thông qua quá trình nhập. Hãy nghĩ trong giây lát.

Một ví dụ thực tế là Bootstrap. Tự thân khởi nghiệp bao gồm các tệp riêng lẻ (bootstrap.css, bootstrap.js, phông chữ), yêu cầu JQuery cho các trình bổ trợ và cung cấp các ví dụ về mã đánh dấu. Các nhà phát triển thích tính linh hoạt theo chủ đề. Chiến lược này cho phép họ mua những phần trong khung mà họ muốn sử dụng. Tuy vậy, tôi vẫn tin là JoeDeveloperTM điển hình của bạn sẽ đi theo lộ trình dễ dàng và tải xuống toàn bộ phần Tự thân khởi nghiệp.

Các lệnh nhập rất hợp lý, chẳng hạn như Tự thân khởi nghiệp. Tôi xin trình bày với bạn về tương lai của hoạt động tải Tự thân khởi nghiệp:

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

Người dùng chỉ cần tải đường liên kết Nhập HTML. Họ không cần phải làm phiền với ảnh chụp phân tán của các tệp. Thay vào đó, toàn bộ quá trình Tự thân khởi nghiệp được quản lý và gói gọn trong một tệp nhập, 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>

Cứ để thế này. Đó là một nội dung thú vị.

Sự kiện tải/lỗi

Phần tử <link> sẽ kích hoạt sự kiện load khi dữ liệu nhập được tải thành công và onerror khi lần nhập không thành công (ví dụ: nếu tài nguyên gặp lỗi 404).

Các tệp nhập sẽ cố tải ngay lập tức. Một cách dễ dàng để tránh đau đầu là sử dụng các thuộc tính 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)">

Hoặc nếu bạn đang tạo dữ liệu nhập động:

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

Sử dụng nội dung

Việc thêm một tệp dữ liệu nhập vào một trang không có nghĩa là "tạo bản đồ nội dung của tệp đó tại đây". Tức là "trình phân tích cú pháp, hãy tìm nạp tài liệu này để tôi có thể sử dụng". Để thực sự sử dụng nội dung, bạn phải hành động và viết kịch bản.

Một thời điểm quan trọng aha! là nhận ra rằng tệp nhập chỉ là một tài liệu. Trong thực tế, nội dung của quá trình nhập được gọi là tài liệu nhập. Bạn có thể điều chỉnh nội dung nhập bằng API DOM tiêu chuẩn!

link.import

Để truy cập vào nội dung của một thành phần nhập, hãy sử dụng thuộc tính .import của phần tử đường liên kết:

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

link.import là null trong các điều kiện sau:

  • Trình duyệt không hỗ trợ Nhập HTML.
  • <link> không có rel="import".
  • <link> chưa được thêm vào DOM.
  • <link> đã bị xoá khỏi DOM.
  • Tài nguyên không được hỗ trợ CORS.

Ví dụ đầy đủ

Giả sử warnings.html chứa:

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

Nhà nhập khẩu có thể lấy một phần cụ thể của tài liệu này và sao chép phần đó vào trang của họ:

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

Viết tập lệnh trong quá trình nhập

Các mục nhập không nằm trong tài liệu chính. Chúng đang ở trên vệ tinh. Tuy nhiên, nội dung nhập của bạn vẫn có thể hoạt động trên trang chính mặc dù tài liệu chính là tối cao. Thao tác nhập có thể truy cập vào DOM và/hoặc DOM của trang nhập dữ liệu đó:

Ví dụ - import.html thêm một trong các biểu định kiểu vào trang chính

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

Chú ý xem điều gì đang diễn ra ở đây. Tập lệnh bên trong quá trình nhập tham chiếu đến tài liệu đã nhập (document.currentScript.ownerDocument) và thêm một phần của tài liệu đó vào trang nhập (mainDoc.head.appendChild(...)). Không hề dễ dàng nếu bạn hỏi tôi.

Quy tắc JavaScript trong quá trình nhập:

  • Tập lệnh trong quá trình nhập được thực thi trong ngữ cảnh cửa sổ chứa document nhập. Vì vậy, window.document đề cập đến tài liệu trang chính. Việc này có hai hệ quả hữu ích:
    • các hàm được xác định trong quá trình nhập kết thúc vào window.
    • bạn không phải làm gì khó khăn như nối thêm các khối <script> của lệnh nhập vào trang chính. Một lần nữa, tập lệnh được thực thi.
  • Thao tác nhập không chặn quá trình phân tích cú pháp trang chính. Tuy nhiên, các tập lệnh bên trong đó được xử lý theo thứ tự. Điều này có nghĩa là bạn sẽ gặp phải hành vi trì hoãn trong khi vẫn duy trì đúng thứ tự tập lệnh. Tìm hiểu thêm về nội dung này ở bên dưới.

Phân phối thành phần web

Thiết kế của tính năng Nhập HTML rất phù hợp để tải nội dung có thể sử dụng lại trên web. Đặc biệt, đây là cách lý tưởng để phân phối các Thành phần web. Mọi thứ từ HTML <template> cơ bản cho đến Phần tử tuỳ chỉnh mạnh mẽ bằng Shadow DOM [1, 2, 3]. Khi những công nghệ này được sử dụng song song, dữ liệu nhập sẽ trở thành #include cho Thành phần web.

Bao gồm mẫu

Phần tử Mẫu HTML phù hợp tự nhiên cho Nhập HTML. <template> là lựa chọn lý tưởng cho việc thiết lập các phần trong mã đánh dấu để ứng dụng nhập sử dụng theo mong muốn. Việc gói nội dung trong <template> cũng mang lại cho bạn lợi ích bổ sung là khiến nội dung ở chế độ trơ cho đến khi được sử dụng. Nghĩa là tập lệnh sẽ không chạy cho đến khi mẫu được thêm vào DOM). Xong rồi!

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>

Đăng ký phần tử tuỳ chỉnh

Phần tử tuỳ chỉnh là một công nghệ Thành phần web khác hoạt động hiệu quả đến mức khó tin với tính năng Nhập HTML. Các lệnh nhập có thể thực thi tập lệnh, vậy tại sao không xác định + đăng ký các phần tử tuỳ chỉnh của bạn để người dùng không phải làm vậy? Hãy gọi là..."tự động đăng ký".

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>

Quy trình nhập này xác định (và đăng ký) hai phần tử, <say-hi> và <shadow-element>. Phần tử đầu tiên cho thấy một phần tử tuỳ chỉnh cơ bản tự đăng ký bên trong quá trình nhập. Ví dụ thứ hai cho thấy cách triển khai một phần tử tuỳ chỉnh tạo ra DOM bóng từ <template>, sau đó tự đăng ký.

Điều hay nhất khi đăng ký phần tử tuỳ chỉnh bên trong dữ liệu nhập HTML là trình nhập chỉ cần khai báo phần tử của bạn trên trang của họ. Không cần đấu dây.

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>

Theo tôi, chỉ riêng quy trình làm việc này đã khiến Nhập HTML trở thành cách lý tưởng để chia sẻ Thành phần web.

Quản lý phần phụ thuộc và mục nhập phụ

Mục nhập phụ

Mỗi lần nhập có thể hữu ích khi thêm một lần nhập khác. Ví dụ: nếu bạn muốn sử dụng lại hoặc mở rộng một thành phần khác, hãy sử dụng lệnh nhập để tải(các) phần tử khác.

Dưới đây là ví dụ thực tế của Polymer. Đây là một thành phần thẻ mới (<paper-tabs>) sử dụng lại thành phần bố cục và bộ chọn. Các phần phụ thuộc được quản lý bằng tính năng Nhập HTML.

giấy-tabs.html (đơn giản):

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

Nhà phát triển ứng dụng có thể nhập phần tử mới này bằng cách sử dụng:

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

Khi một <iron-selector2> mới và tuyệt vời hơn xuất hiện trong tương lai, bạn có thể hoán đổi <iron-selector> và bắt đầu sử dụng ngay. Bạn sẽ không làm hỏng người dùng nhờ tính năng nhập và các thành phần web.

Quản lý phần phụ thuộc

Chúng ta đều biết rằng việc tải JQuery nhiều lần trên mỗi trang sẽ gây ra lỗi. Đây không phải là một vấn đề rất lớn đối với Thành phần web khi nhiều thành phần sử dụng cùng một thư viện phải không? Nếu chúng ta sử dụng tính năng Nhập HTML thì không được! Bạn có thể sử dụng các lớp này để quản lý các phần phụ thuộc.

Bằng cách gói thư viện trong quá trình Nhập HTML, bạn sẽ tự động loại bỏ tài nguyên trùng lặp. Tài liệu chỉ được phân tích cú pháp một lần. Các tập lệnh chỉ được thực thi một lần. Ví dụ: giả sử bạn xác định một lệnh nhập, jquery.html, sẽ tải bản sao của JQuery.

jquery.html

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

Bạn có thể sử dụng lại dữ liệu nhập này trong các lần nhập tiếp theo như sau:

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>

Ngay cả trang chính cũng có thể bao gồm jquery.html nếu cần thư viện:

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

Mặc dù jquery.html được đưa vào nhiều cây nhập khác nhau, tài liệu này chỉ được trình duyệt tìm nạp và xử lý một lần. Kiểm tra bảng điều khiển mạng chứng minh điều này:

jquery.html được yêu cầu một lần
jquery.html được yêu cầu một lần

Xem xét hiệu suất

Tính năng nhập HTML thực sự tuyệt vời, nhưng giống như bất kỳ công nghệ web mới nào, bạn nên sử dụng chúng một cách khôn ngoan nhất. Các phương pháp hay nhất để phát triển web vẫn đúng. Dưới đây là một số điều cần lưu ý.

Nối các lệnh nhập

Việc giảm số lượng yêu cầu kết nối mạng luôn rất quan trọng. Nếu bạn có nhiều đường liên kết nhập cấp cao nhất, hãy cân nhắc kết hợp các đường liên kết này vào một tài nguyên rồi nhập tệp đó!

Vulcanize là một công cụ xây dựng npm từ nhóm Polymer. Công cụ này sẽ làm phẳng định kỳ tập hợp Nhập HTML vào một tệp duy nhất. Hãy coi đây là một bước bản dựng nối cho Thành phần web.

Thao tác nhập tận dụng chức năng lưu vào bộ nhớ đệm của trình duyệt

Nhiều người quên rằng ngăn xếp mạng của trình duyệt đã được điều chỉnh tốt hơn qua những năm qua. Lệnh nhập (và nhập phụ) cũng tận dụng logic này. Quá trình nhập http://cdn.com/bootstrap.html có thể có các tài nguyên phụ nhưng sẽ được lưu vào bộ nhớ đệm.

Nội dung chỉ hữu ích khi bạn thêm nó vào

Hãy coi nội dung là vô nghĩa cho đến khi bạn kêu gọi các dịch vụ của nội dung đó. Lấy một biểu định kiểu thông thường, được tạo động:

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

Trình duyệt sẽ không yêu cầu actions.css cho đến khi link được thêm vào DOM:

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

Một ví dụ khác là mã đánh dấu được tạo động:

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

h2 tương đối vô nghĩa cho đến khi bạn thêm nó vào DOM.

Khái niệm tương tự vẫn áp dụng đối với tài liệu nhập. Trừ khi bạn thêm nội dung vào DOM, mô-đun này không hoạt động. Trên thực tế, chỉ có <script> trực tiếp "thực thi" trong tài liệu nhập. Xem tập lệnh trong lệnh nhập.

Tối ưu hoá cho quá trình tải không đồng bộ

Nhập khối kết xuất

Nhập khối hiển thị của trang chính. Điều này tương tự như những gì <link rel="stylesheet"> làm. Lý do trình duyệt chặn hiển thị trên biểu định kiểu ngay từ đầu là để giảm thiểu FOUC. Lệnh nhập hoạt động tương tự như vậy vì có thể chứa kiểu chữ.

Để hoàn toàn không đồng bộ và không chặn trình phân tích cú pháp hoặc hiển thị, hãy sử dụng thuộc tính async:

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

Lý do async không phải là công cụ mặc định cho tính năng Nhập HTML là vì tính năng này yêu cầu nhà phát triển làm nhiều việc hơn. Đồng bộ theo mặc định có nghĩa là các tệp Nhập HTML có định nghĩa phần tử tuỳ chỉnh bên trong được đảm bảo sẽ tải và nâng cấp theo đúng thứ tự. Trong một thế giới hoàn toàn không đồng bộ, nhà phát triển sẽ phải tự quản lý điệu nhảy đó và nâng cấp thời gian.

Bạn cũng có thể tự động tạo quy trình nhập không đồng bộ:

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

Thao tác nhập không chặn phân tích cú pháp

Quá trình nhập không chặn quá trình phân tích cú pháp của trang chính. Các tập lệnh bên trong mục nhập được xử lý theo thứ tự nhưng không chặn trang nhập. Điều này có nghĩa là bạn sẽ gặp phải hành vi trì hoãn trong khi vẫn duy trì đúng thứ tự tập lệnh. Một lợi ích khi đưa lệnh nhập vào <head> là cho phép trình phân tích cú pháp bắt đầu xử lý nội dung càng sớm càng tốt. Dù vậy, bạn cần nhớ rằng <script> trong tài liệu chính vẫn tiếp tục chặn trang. <script> đầu tiên sau khi nhập sẽ chặn hiển thị trang. Đó là vì quá trình nhập có thể có tập lệnh bên trong cần được thực thi trước tập lệnh trong trang chính.

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

Tuỳ thuộc vào cấu trúc ứng dụng và trường hợp sử dụng, có một số cách để tối ưu hoá hành vi không đồng bộ. Các kỹ thuật dưới đây sẽ giảm thiểu tình trạng chặn kết xuất hình ảnh trên trang chính.

Tình huống 1 (ưu tiên): bạn không có tập lệnh trong <head> hoặc cùng dòng trong <body>

Bạn nên đặt <script> ngay sau khi nhập. Di chuyển tập lệnh càng muộn càng tốt trong trò chơi...nhưng bạn đang làm theo phương pháp hay nhất đó, PHẢI BẠN NHƯNG? ;)

Ví dụ:

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

Mọi thứ đều ở dưới cùng.

Trường hợp 1.5: quy trình nhập sẽ tự thêm

Một cách khác là để tệp nhập thêm nội dung của chính tệp đó. Nếu tác giả nhập thiết lập một hợp đồng cho nhà phát triển ứng dụng tuân theo, thì tệp nhập có thể tự thêm vào một khu vực trên trang chính:

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>

Tình huống 2: bạn có tập lệnh trong <head> hoặc cùng dòng trong <body>

Nếu bạn có một tệp nhập mất nhiều thời gian để tải, thì <script> đầu tiên theo sau lệnh đó trên trang sẽ chặn không cho trang hiển thị. Ví dụ: Google Analytics nên đặt mã theo dõi vào <head>, Nếu bạn không thể tránh đặt <script> vào <head>, thì việc thêm nội dung nhập sẽ ngăn việc chặn trang:

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

Ngoài ra, hãy thêm lệnh nhập gần cuối <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>

Những điều cần nhớ

  • Loại MIME của tệp nhập là text/html.

  • Các tài nguyên từ các nguồn gốc khác cần phải hỗ trợ CORS.

  • Dữ liệu nhập từ cùng một URL sẽ được truy xuất và phân tích cú pháp một lần. Điều đó có nghĩa là tập lệnh trong quá trình nhập chỉ được thực thi vào lần đầu tiên quá trình nhập đó được nhìn thấy.

  • Các tập lệnh trong quá trình nhập được xử lý theo thứ tự, nhưng không chặn quá trình phân tích cú pháp tài liệu chính.

  • Đường liên kết nhập không có nghĩa là "#bao gồm nội dung ở đây". Tức là "trình phân tích cú pháp, hãy tìm nạp tài liệu này để tôi có thể sử dụng sau". Mặc dù tập lệnh thực thi tại thời điểm nhập, nhưng bạn cần thêm biểu định kiểu, mã đánh dấu và các tài nguyên khác vào trang chính một cách rõ ràng. Lưu ý: Bạn không cần thêm <style> một cách rõ ràng. Đây là một điểm khác biệt chính giữa tính năng Nhập HTML và <iframe>, đó là "tải và hiển thị nội dung này tại đây".

Kết luận

Nhập HTML cho phép nhóm HTML/CSS/JS thành một tài nguyên duy nhất. Mặc dù bản thân nó hữu ích nhưng ý tưởng này trở nên cực kỳ mạnh mẽ trong thế giới Thành phần web. Nhà phát triển có thể tạo các thành phần có thể sử dụng lại để người khác sử dụng và đưa vào ứng dụng của riêng họ. Tất cả đều được phân phối thông qua <link rel="import">.

Nhập HTML là một khái niệm đơn giản nhưng mang lại một số trường hợp sử dụng thú vị cho nền tảng này.

Trường hợp sử dụng

  • Phân phối HTML/CSS/JS dưới dạng một gói có liên quan. Về mặt lý thuyết, bạn có thể nhập toàn bộ một ứng dụng web vào một ứng dụng web khác.
  • Sắp xếp mã – phân đoạn các khái niệm một cách hợp lý thành các tệp khác nhau, khuyến khích mô-đun và khả năng tái sử dụng**.
  • Phân phối một hoặc nhiều định nghĩa Phần tử tuỳ chỉnh. Bạn có thể dùng dữ liệu nhập để register và đưa phần tử đó vào ứng dụng. Cách này giúp áp dụng các mẫu phần mềm hiệu quả và tách biệt giao diện/định nghĩa của phần tử với cách sử dụng.
  • Quản lý phần phụ thuộc – tài nguyên sẽ tự động được loại bỏ trùng lặp.
  • Tập lệnh phân đoạn – trước khi nhập, thư viện JS có kích thước lớn sẽ được phân tích cú pháp toàn bộ tệp để bắt đầu chạy, nhưng tệp bị chậm. Với tính năng nhập, thư viện có thể bắt đầu hoạt động ngay sau khi đoạn A được phân tích cú pháp. Ít độ trễ hơn!
// TODO: DevSite - Code sample removed as it used inline event handlers

  • Phân tích cú pháp HTML song song – lần đầu tiên trình duyệt có thể chạy hai (hoặc nhiều) trình phân tích cú pháp HTML song song.

  • Cho phép chuyển đổi giữa chế độ gỡ lỗi và không gỡ lỗi trong ứng dụng, chỉ bằng cách thay đổi chính mục tiêu nhập. Ứng dụng của bạn không cần biết liệu mục tiêu nhập có phải là tài nguyên theo gói/biên dịch hay không.