前端组件化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的功能了。