Hôm qua, tôi đã viết về Reef, giải pháp thay thế nhẹ nhàng của tôi cho Vue và React. Trong vài ngày tới, tôi muốn xem các bộ phận khác nhau của nó hoạt động như thế nào
Hôm nay, chúng ta sẽ xem xét cách lấy một chuỗi HTML và chuyển đổi nó thành đánh dấu thực tế
Tại sao bạn cần điều này
Nếu bạn muốn chèn một chuỗi vào DOM, bạn có thể làm điều đó khá đơn giản với
Hi, universe!app.innerHTML = 'Hello, world!
';
Nhưng Reef không chỉ đẩy đánh dấu vào một yếu tố. Nó so sánh đánh dấu hiện có trong một phần tử với giao diện của nó và chỉ cập nhật những thứ cần thay đổi
Ví dụ: nếu nội dung hiện có bên trong
Hi, universe!Hi, universe!Reef sẽ chỉ cập nhật văn bản bên trong
Hi, universe!Để điều đó hoạt động, chúng tôi cần chuyển đổi các chuỗi HTML thành các phần tử HTML thực tế có thể được duyệt qua, ánh xạ và phân tích
Tạo một phương thức trợ giúp
Trước tiên, hãy tạo một hàm trợ giúp sẽ chấp nhận một chuỗi và trả về HTML
/**
* Convert a template string into HTML DOM nodes
* @param {String} str The template string
* @return {Node} The template HTML
*/
var stringToHTML = function [str] {
// Code goes here...
};
cách tiếp cận đơn giản
Cách đơn giản nhất để làm điều này là tạo một phần tử, chèn chuỗi vào với
Hi, universe!/**
* Convert a template string into HTML DOM nodes
* @param {String} str The template string
* @return {Node} The template HTML
*/
var stringToHTML = function [str] {
var dom = document.createElement['div'];
dom.innerHTML = str;
return dom;
};
Cách tiếp cận này không hoàn hảo, mặc dù
Mặc dù phần tử này bị tách rời—nghĩa là không thực sự nằm trong DOM hiện tại—trình duyệt vẫn sẽ thực hiện những việc như tải xuống các tệp hình ảnh
Thao tác này sẽ kích hoạt tệp hình ảnh để tải xuống, mặc dù phần đánh dấu chưa được hiển thị ở bất kỳ đâu
stringToHTML[''];
Một cách tốt hơn
Sau khi thực hiện một loạt nghiên cứu, tôi đã phát hiện ra một phương pháp trình duyệt riêng để tránh vấn đề này.
Hi, universe!Hi, universe!Để sử dụng nó, bạn khởi tạo một thể hiện mới. Sau đó, bạn sử dụng phương thức
Hi, universe!Hi, universe!Hi, universe!Bởi vì nó thực sự là một phần tử
Hi, universe!Hi, universe!Hi, universe!Bây giờ chúng tôi có thể làm điều này và sẽ không có tải xuống nào được kích hoạt
stringToHTML[''];
Kết hợp hai cách tiếp cận
Phương pháp
Hi, universe!Hi, universe!Tôi muốn kết hợp hai cách tiếp cận, sử dụng
Hi, universe!Hi, universe!Để kiểm tra hỗ trợ, chúng tôi sẽ gán IIFE cho biến
/**
* Convert a template string into HTML DOM nodes
* @param {String} str The template string
* @return {Node} The template HTML
*/
var stringToHTML = function [str] {
// Code goes here...
};
Bên trong IIFE, trước tiên chúng tôi sẽ kiểm tra xem
/**
* Convert a template string into HTML DOM nodes
* @param {String} str The template string
* @return {Node} The template HTML
*/
var stringToHTML = function [str] {
// Code goes here...
};
/**
* Convert a template string into HTML DOM nodes
* @param {String} str The template string
* @return {Node} The template HTML
*/
var stringToHTML = function [str] {
// Code goes here...
};
/**
* Convert a template string into HTML DOM nodes
* @param {String} str The template string
* @return {Node} The template HTML
*/
var stringToHTML = function [str] {
// Code goes here...
};
Hi, universe!Hi, universe!/**
* Convert a template string into HTML DOM nodes
* @param {String} str The template string
* @return {Node} The template HTML
*/
var stringToHTML = function [str] {
// Code goes here...
};
/**
* Convert a template string into HTML DOM nodes
* @param {String} str The template string
* @return {Node} The template HTML
*/
var stringToHTML = function [str] {
var dom = document.createElement['div'];
dom.innerHTML = str;
return dom;
};
Hi, universe!Bên trong phương pháp
/**
* Convert a template string into HTML DOM nodes
* @param {String} str The template string
* @return {Node} The template HTML
*/
var stringToHTML = function [str] {
var dom = document.createElement['div'];
dom.innerHTML = str;
return dom;
};
Hi, universe!Hi, universe!