polymer初探_html/css_WEB-ITnose-HTML-Tutorial-php.cn

Heim

Web-Frontend

HTML-Tutorial

polymer初探_html/css_WEB-ITnose

Jun 24, 2016 am 11:23 AM

最近找了几个模块化的方案，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>

Nach dem Login kopieren

定义好模块后，只要在 index.html 文件引入模块，然后用标签就可以了，这个标签名跟模块里的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>

Nach dem Login kopieren

多模块也是没问题的，我们新建一个 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>

Nach dem Login kopieren

然后在 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>

Nach dem Login kopieren

浏览器显示是这样的，polymer已经帮我们加好命名空间，样式是不会相互影响的。

但是一些css3属性怎么办呢，我们还需要autoprefixer或者cssnext。需要三个插件支持，在命令行输入

npm i --save gulp-posthtml posthtml-postcss postcss-cssnext

Nach dem Login kopieren

然后修改 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']);

Nach dem Login kopieren

在命令行输入 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>

Nach dem Login kopieren

这样浏览器就支持了，测试了一下，polymer支持安卓4.1，如果测试没什么问题，就可以愉快的用上了。

Erklärung dieser Website

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