webComponent初体验
2019独角兽企业重金招聘Python工程师标准>>>
这两天在优化环球网首页的加载速度,为了减少DOM的加载时间,我才用了webComponent的方式去分解了DOM。
简单记载下吧~
有过angularjs开发经验的哥们,对于webComponent的初体验应该都和我差不多吧,这尼玛简直就是指令好不~
其实我到现在也是有这个感觉的~
言归正传,WebComponent通过一个标准化的非侵入的方式封装了一个组件,每个组件都能够组织好它自身的html结构,css样式以及ajvascript的代码,并且不受外界的影响。
其实这是非常不得了的事情,这就意味着组件化,模块化开发非常非常的犀利了有木有
说到web Component,shadow DOM也必须说下。
开发者通过shadow DOM在文档流中创建了一些完全独立于其他元素的子DOM树。由于这个特性,使我们可以封装一些具有独立功能的组件,并且可以保证不会在无意中干扰到别的DOM。shadow DOM和标准的DOM一样,可以设置它的样式,也可以用javascript来操作他的行为。主文档和基于shadow DOM创建的独立组件之间互不干扰。所以组件的复用变得异常的简单!
对于别的这些东西就不多说了,直接上代码吧,直观点
<template><style type="text/css">p{margin-top: 2em;}.coloured{background-color: blue;}</style><p>my name is <strong class="coloured">Neal</strong></p>
</template>
<script type="text/javascript">(function () {// 创建一个基于html元素原形的html对象var element = Object.create(HTMLElement.prototype);// 获取template的内容var template = document.currentScript.ownerDocument.querySelector('template').content;//定义元素被创建时候的回调element.createdCallback = function() {// 创建 shadow rootvar shadowRoot = this.createShadowRoot();// 添加一个template的clone加入shadowRootvar clone = document.importNode(template, true);shadowRoot.appendChild(clone);};document.registerElement('neal-yang', {prototype: element});})();
</script>
而在index页面中我们需要引入这个template页面,然后在 html中直接用就可以了
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>css components</title><link href="components/templateTest.html" rel="import"><script src='components/webcomponents.min.js'></script><style type="text/css">body{padding: 4em;}</style>
</head>
<body></body>
<script type="text/javascript">var body = document.body;body.appendChild(document.createElement('neal-yang'));
</script>
</html>
注意我这里还引入了webcomponent.js的插件,是为了解决浏览器兼容性的问题的。
还有这个页面的打开需要个服务器打开,不然会有CORS错误。
转载于:https://my.oschina.net/Nealyang/blog/715793
webComponent初体验相关推荐
- 苹果电脑安装python3密码_mac系统安装Python3初体验
前沿 对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...
- MapReduce编程初体验
需求:在给定的文本文件中统计输出每一个单词出现的总次数 第一步: 准备一个aaa.txt文本文档 第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...
- 小程序 缩放_缩放流星应用程序的初体验
小程序 缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
- wxWidgets刚開始学习的人导引(3)——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...
- 用鸿蒙跑了个 “hello world”!鸿蒙开发初体验
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源 | https://my.oschina.net/u ...
- Windows Embedded Standard开发初体验(二)
支持Silverlight的Windows Embedded Standard 好了,完成安装之后,我们就可以来做Windows Embedded Standard的第一个操作系统镜像了.在开始菜单中 ...
- 深度探索Hyperledger技术与应用之超级账本初体验(附部署代码)
2019独角兽企业重金招聘Python工程师标准>>> 本章零基础地介绍了如何快速体验超级账本搭建的区块链网络,我们先绕过了比较复杂的初始化配置,用官方提供的fabric-sampl ...
- Spring环境搭建,IoC容器初体验~
由于最近的任务是关于IoC配置文件格式的转换,所以需要从Spring的IoC容器开始学起,今天根据网上的介绍搭建了Spring环境,并对其IoC容器进行了初体验.文章中涉及到的软件以及推荐的一本关于S ...
- 来自新手Banana Pi香蕉派初体验
2019独角兽企业重金招聘Python工程师标准>>> 一.前言 一段时间来对有强大的技术支持和完善的社区的Raspberry Pi很感兴趣,本想入一片学习学习,但转念一想Raspb ...
- 《深入理解Spark:核心思想与源码分析》——1.2节Spark初体验
本节书摘来自华章社区<深入理解Spark:核心思想与源码分析>一书中的第1章,第1.2节Spark初体验,作者耿嘉安,更多章节内容可以访问云栖社区"华章社区"公众号查看 ...
最新文章
- Android系统的启动流程简要分析
- SQL优化二(SQL性能调优)
- 通过生成器写一个日志调用方法
- 工作171:阅读账号里面的新增调用接口操作
- appium for java教程_appium自动化测试入门(java版)
- CentOS配置ssh无密码登录的注意点
- mysql5驱动_技术分享 | MySQL 8 和 MySQL 5.7 在小型设备的内存消耗分析
- selenium web的自动化测试工具
- MySQL双主高可用架构之MMM实战
- 01在Windows Server 2008R2上面搭建一台根DC
- 计算机中丢失pbvm80,修复pbvm80.dll
- TDDFT计算软件Octopus学习笔记(七): 二维材料计算(WS2)
- MAC地址及对应的厂商
- 基于java网上购物系统论文,基于Java的网上购物系统的设计与实现_毕业设计(论文).doc...
- 如何读代码?读代码的利器---FreeMind
- 切身体验苹果Reminders的贴心设计
- JAVA毕设项目微博系统网站(java+VUE+Mybatis+Maven+Mysql)
- vim 打开php 回车没了,设置 - VIM在Fi结束时禁用自动换行
- android ip查看工具,安卓手机查看IP地址的两种方法
- ffprobe获取mp4音视频数据信息