初涉 Web Components

2017-01-11

Web Components 是啥??? 一开始我也不知道初涉 Web Components,关于这个中文的资料找到一些,质量都还不错。我们先来看两个词,如下:      

  • 标签:如<input>, <table>这些原生tag

  • 组件(Web Components ):由<input>, <table>等这些原生的标签组成的自定义组件。如:<user-list></user-list>

  (上面两句摘抄的,嘻嘻,我也懒),虽然我没说什么,但是我想大家瞬间都明白了吧。对的你就是这么聪明,这就是为什么你还在做码农 ,而别人已经是老板了
(老板都蠢,初涉 Web Components,不要告诉我的老板,哈哈),是的,把我们平时用到的html标签组合起来就变成了一个组件(Web Components )。
下面我们来看看怎样做一个简单的组件:
使用一个组件的一般流程是这样的-----创建一个自己的组件-------调用这个组件;这样可能你还不是很清楚,那么我们来看示例,

首先我们创建一个组件,也可以叫做模板吧,反正我是这么叫初涉 Web Components,这个组件名称  firstcoment.html 下面是代码以及很拗口的解释;我语文不好谅解一下呗,


[HTML] 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <template>
    <style>
        .coloured {
            color: red;
        }
    </style>
    <p>My favorite colour is: <strong>Red</strong></p>
    <input placeholder=""></input>
</template>
<script>
    (function() {
        // 基于HTML元素原型创建一个对象
        var element = Object.create(HTMLElement.prototype);
        //从<template>获取内容
        var template = document.currentScript.ownerDocument.querySelector('template').content;
        // 在创建元素的实例时触发
        element.createdCallback = function() {
            // 创建ShadowRoot实例
            var shadowRoot = this.createShadowRoot();
            // 将模板克隆添加到ShadowRoot实例中
            var clone = document.importNode(template, true);
            shadowRoot.appendChild(clone);
        };
        //注册自己构建的新元素
        document.registerElement('favorite-colour', {
            prototype: element
        });
/*            //创建一个实例
    var xfoo = document.createElement('favorite-colour');
    //插入页面
    document.body.appendChild(xfoo);*/(块注释)
    }());
</script>
</body>
</html>

其实这个大家直接运行的话已经出来效果了(要把块注释的地方取消注释),但是这样的话就不符合我们上面所说的使用方式了,所以我们再来一个页面
如下:GetComponent.html

[HTML] 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="import"  href="firstcoment.html">
</head>
<body>
     <favorite-colour ></favorite-colour>
</body>
</html>



用link将组建导入,然后像标签一样把刚才
document.registerElement('favorite-colour', {
prototype: element
});注册的favorite-colour这个组件写在body中就可以了。到这里一个简单的组件就完成了,但是如果你单单双击GetComponent.html页面
运行想看效果的话是不行的,这样会报错如下:

初涉 Web Components

看大致意思是导入的路径的问题,我英语也不好初涉 Web Components,咋办?????搜资料吧,我擦嘞,找到两国外篇英文的帖子,不过大致猜出来
意思了,运行这个需要一个服务、服务?服务?服务?咋搞个服务?我们来试试发布一个网站试试?不巧啊,真的就可以了。看看效果如下:
初涉 Web Components

已经可以显示了。
到这里可能大家有的人会问这个Web Components到底干啥用的?我们来看一下这个东西  <view></view>  ,难道?难道?对的,小程序中的这个其实就是组件。
(大牛早就知道了,我也是刚知道的,不要笑我菜)。这里我通过简单的介绍让大家和我一起了解一下,下面给上几个学习的地址(也是我最近学习,也要和大家分享的东东):
Web Components:
      http://sentsin.com/web/1089.html
      http://fex.baidu.com/blog/2014/05/web-components-future-oriented/
      https://www.html5rocks.com/zh/tutorials/webcomponents/template/      http://javascript.ruanyifeng.com/htmlapi/webcomponents.html

polymer:
     https://segmentfault.com/a/1190000003810019     http://www.reqianduan.com/2481.html


目前资料有这些,希望和大家一起学习进步!上面呢只是简单给大家介绍一下,那些链接的文章要比我写的好千千倍,大家一定要看!
如果有兴趣的同学可以在  422740450  这个群里找到我,最近有心的进展我会及时和大家分享的。希望大家多多支持。
polymer是啥?等两天再给大家简单介绍一下。我也正在学习中ing




0
收藏