您的位置：首页 > 其它

Web Component 实战 读书笔记

2016-03-23 00:00 405 查看
摘要: 探索PolymerJS Mozilla Brick Bosonic与ReactJS框架

第一章 Web Component简介

模版元素

检测是否支持模版特性 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Component : template support</title>
</head>
<body>
<h1 id="message"></h1>
<script>
var isTemplateSupported = function(){
var template = document.createElement('template');
return "content" in template;
};
var isSupported=isTemplateSupported(),
message=document.getElementById("message");
if(isSupported){
message.innerHTML="Template element is supported by the browser.";
} else{
message.innerHTML="Template element is not supported by the browser.";
}
</script>
</body>
</html>


延迟加载的模版 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Component : A inert template content example.</title>
</head>
<body>
<div id="message"></div>
<template id="aTemplate">
<img src="http://www.tutorialsavvy.com/wp-content/uploads/2014/11/ReactJS-830-8301-300x300.png"  id="profileImage">
<script>
alert("this is a script");
</script>
</template>

<script>
(function(){
var imageElement=document.getElementById("profileImage"),
messageElement=document.getElementById("message");
messageElement.innerHTML="IMG element "+imageElement;
})();
</script>
</body>
</html>


激活模版

克隆节点

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航