polymer初探_html/css_WEB-ITnose-html教程-PHP中文网

polymer初探_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:23:10

原创

1383人浏览过

最近找了几个模块化的方案，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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/js/4931">
                            <img src="https://img.php.cn/upload/jscode/000/120/096/5dbd2392eddb8580.jpg" alt="仿探探应用首页滑动切换">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/js/4931">仿探探应用首页滑动切换</a>
                            <p>仿探探应用首页滑动切换</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="仿探探应用首页滑动切换">
                                <span>27</span>
                            </div>
                        </div>
                        <a href="/xiazai/js/4931" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="仿探探应用首页滑动切换">
                        </a>
                    </div>
                    </template></dom-module><!-- Registers custom element --><script>Polymer({    is: 'hello-world',    properties: {        who: {            type: String,            value: 'World'        }    }});</script>

登录后复制

定义好模块后，只要在 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>

登录后复制

多模块也是没问题的，我们新建一个 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，如果测试没什么问题，就可以愉快的用上了。