5
Tôi đang cố gắng phát triển một cách đơn giản để tạo mẫu bằng JavaScript. Ý tưởng cơ bản là tôi đã có HTML trong một trang đại diện cho giao diện người dùng của một đối tượng trong JavaScript và các biến trong HTML được thay thế bằng các thuộc tính của đối tượng JavaScript. Hãy nghĩ về nó như kỹ thuật để gắn các đối tượng JavaScript vào các bài thuyết trình HTML.Cải tiến kỹ thuật tạo mẫu JavaScript đơn giản
Mọi phê bình? Tôi có nên sử dụng các mảnh tài liệu bằng cách nào đó không? Tôi về cơ bản đang tìm kiếm một đánh giá mã trên này. Tôi đánh giá cao bất kỳ phản hồi nào. (Lưu ý rằng điều này sẽ là khung độc lập.) Dưới đây là một exmaple làm việc.
<html>
<body>
<!-- where templates will be injected into -->
<div id="thumbContainer"></div>
<!-- template used for thumbnails -->
<div id="thumbTemplate" style="display:none">
<div class="thumb">
<div>${caption}</div>
<div>${image}</div>
</div>
</div>
</body>
<script type="text/javascript">
(function() {
// Cache the templates' markup in case that template is used again
var cache = [];
// Magic
document.templatized = function(templateId, properties) {
// Get the template from cache or get template and add to cache
var template = cache[templateId] || (function() {
cache[templateId] = document.getElementById(templateId).innerHTML;
return cache[templateId];
})();
// Create the DOM elements that represent the markup
var shell = document.createElement('div');
shell.innerHTML = template.replace(/\$\{(\w+)\}/g, function(match, key){
return properties[key] || match;
});
// Return those DOM elements
return shell.children[0].cloneNode(true);
};
})();
// Create DOM elements with values bound to thumbnail object
var thumb = document.templatized('thumbTemplate', {
caption: 'Summer',
image: (function() {
// More complicated logic that requires conditions here...
return '<img src="test.png" />';
})()
});
// Display on page by inserting into DOM
document.getElementById('thumbContainer').appendChild(thumb);
</script>
+1 cho // magic – cherouvim
Haha, cảm ơn! :) – JamesBrownIsDead