前端組件化Polymer入門教程目錄:
- 前端組件化Polymer入門教程(1)——初識&&安裝
- 前端組件化Polymer入門教程(2)——快速入門
- 前端組件化Polymer入門教程(3)——自定義元素
- 前端組件化Polymer入門教程(4)——生命周期
- 前端組件化Polymer入門教程(5)——監聽屬性值變化
- 前端組件化Polymer入門教程(6)——Local DOM
- 前端組件化Polymer入門教程(7)——事件
- 前端組件化Polymer深入篇(1)
一說到組件化,你可能就想到了React,Angular,Vue,等等...但這些畢竟寫法都不一樣,你有沒有想過,要是統一了多好,如果你有這個想法,那么恭喜,Chrome早在幾年前就有這個想法,就是指定一套規范的web組件化方案叫做(Web Component),目前Chreom已經實現了,但其他瀏覽器支持情況不太樂觀。不過有一個兼容庫,可以解決這個問題,叫“webcomponents.js”(兼容性其實還是有些問題的,不過作為學習,想那么多干啥。)那么Ploymer.js又是干什么的,話說實現的這一套web組件化自己手動寫起來還是有些麻煩的,於是Chreom就寫了一個庫,叫Polymer.js來簡化Web Component的操作,同時它又添加了一些東西,你可以理解為框架,也就是說Polymer這個框架是基於Web Component來寫的。
下載地址:webcomponentsjs Polymer
目錄:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 這是一個基礎版的兼容庫 -->
<script src="webcomponents-lite.min.js"></script>
<!-- 將rel修改為import可以引入另外一個HTML,它將會被執行 -->
<link rel="import" href="./template/tab.html">
</head>
<body>
</body>
</html>
導入你需要的組件。
<link rel="import" href="./template/tab.html">
tab.html
在組件中是可以不寫html中的那一大堆東西的,在這個組件中我們把Polymer
給引入了進來,可能你會很奇怪,為什么不是一個js文件,后面會講到,先這樣寫,接下來我們就可以使用Polymer的功能了。