Heim > Artikel > Web-Frontend > polymer初探_html/css_WEB-ITnose
polymer初探_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:23:101161Durchsuche
最近找了几个模块化的方案，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 文件引入模块，然后用
<!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，如果测试没什么问题，就可以愉快的用上了。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：sass,compass让开发效率飞起_html/css_WEB-ITnoseNächster Artikel：前端在html页面之间传递参数的方法_html/css_WEB-ITnose