blog
blog copied to clipboard
Published
20 hours ago •
zhouwenbin
zhouwenbin
polymer初探
最近找了几个模块化的方案，posthtml还不是很成熟，css module需要和react一起比较好用，于是尝试了下polymer。
polymer是基于web component规范的，hello-world-polymer可以让我们快速的熟悉polymer。
polymer模块html，css，js都是写一起的，hello-word.html代码如下
<!-- Imports polymer -->
<link rel="import" href="../../polymer/polymer.html">
<!-- Defines element markup -->
<dom-module id="hello-world">
<template>
<p>Hello <strong>{{who}}</strong> :)</p>
</template>
</dom-module>
<!-- Registers custom element -->
<script>
Polymer({
is: 'hello-world',
properties: {
who: {
type: String,
value: 'World'
}
}
});
</script>
定义好模块后，只要在index.html文件引入模块，然后用<hello-world>标签就可以了，这个标签名跟模块里的id是一致的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><hello-world></title>
<!-- Imports polyfill -->
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Imports custom element -->
<link rel="import" href="build/hello-world.html">
</head>
<body>
<!-- Runs custom element -->
<hello-world who="world"></hello-world>
</body>
</html>
多模块也是没问题的，我们新建一个hello-module.html，并且给她一点样式
<!-- Imports polymer -->
<link rel="import" href="../../polymer/polymer.html">
<!-- Defines element markup -->
<dom-module id="hello-module">
<style>
p{
color: red;
display: flex;
}
strong{
color: black;
}
</style>
<template>
<p>Hello <strong>{{who}}</strong> :)</p>
</template>
</dom-module>
<!-- Registers custom element -->
<script>
Polymer({
is: 'hello-module',
properties: {
who: {
type: String,
value: 'Module'
}
}
});
</script>
然后在index.html引入
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><hello-world></title>
<!-- Imports polyfill -->
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Imports custom element -->
<link rel="import" href="build/hello-module.html">
<link rel="import" href="build/hello-world.html">
</head>
<body>
<!-- Runs custom element -->
<hello-module who="module"></hello-module>
<hello-world who="world"></hello-world>
</body>
</html>
浏览器显示是这样的，polymer已经帮我们加好命名空间，样式是不会相互影响的。
但是一些css3属性怎么办呢，我们还需要autoprefixer或者cssnext。需要三个插件支持，在命令行输入
npm i --save gulp-posthtml posthtml-postcss postcss-cssnext
然后修改gulpfile.js文件
var gulp = require('gulp'),
postcssPlugins = [require('postcss-cssnext')({ browsers: ['last 10 versions'] })]
gulp.task('html', function() {
var posthtml = require('gulp-posthtml');
return gulp.src('modules/*.html')
.pipe(posthtml([ require('posthtml-postcss')(postcssPlugins) ]/*, options */))
.pipe(gulp.dest('build/'));
});
gulp.task('watch', function() {
gulp.watch("modules/**.html",["html"]);
});
gulp.task('default', ['html', 'watch']);
在命令行输入gulp就会实时帮我们编译了。生成的模块代码如下
<!-- Imports polymer -->
<link rel="import" href="../../polymer/polymer.html">
<!-- Defines element markup -->
<dom-module id="hello-module">
<style>
p{
color: red;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
strong{
color: black;
}
</style>
<template>
<p>Hello <strong>{{who}}</strong> :)</p>
</template>
</dom-module>
<!-- Registers custom element -->
<script>
Polymer({
is: 'hello-module',
properties: {
who: {
type: String,
value: 'Module'
}
}
});
</script>
这样浏览器就支持了，测试了一下，polymer支持安卓4.1，如果测试没什么问题，就可以愉快的用上了。
