从原生web组件到框架组件源码(一)
温馨提醒,当你觉得看我写的很乱的时候,就对了,那是因为我查阅了大量的资料提取出来的,因为有点东西不太理解,所以你会感觉有的部分重复了,也不是重复,只是后面对前面的内容进行梳理了一些,需要耐心的看到最后
自定义元素
我们发现自定义元素总是有破折号的Q,<my-component>
或 <bacon-cheese>
因为浏览器供应商已承诺不创建其名称中包含短划线的新内置元素,以防止冲突
<app-element></app-element>
<element></element>
const appElement = document.querySelector('app-element');
console.log(appElement.constructor.name);
// HTMLElement类型的
const element=document.querySelector('element')
console.log(element.constructor.name);
// HTMLUnknownElement
上面两个自定义元素,我们通过constructor.name
知道HTML 元素类型
<app-element>
实际上是一个自定义元素, 他基于HTMLElement 上标记的基本数据类型<element>
数据类型HTMLUnknownElement
, 是一个无效的HTML元素,浏览器并不知道它是什么元素
class MyComponent extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h1>Hello world</h1>`;
}
}
customElements.define('my-component', MyComponent);
<my-component></my-component>
customElements
引用customElements
,将返回浏览器加载自定义元素的全局记录,类似于注册表
方法 | 描述 |
---|---|
customElement.define(``name,class(function)) |
在页面上定义一个自定义元素。 |
customElement.get(``name) |
获取已定义的自定义元素的类。 |
customElement.whenDefined(``name) |
带回 定义自定义元素时。 |
customElement.upgrade(``node) |
允许您手动更新自定义元素。 |
我们通过customElements.define()
定义自定义元素
获取自定义元素
class AppElement extends HTMLElement {
/* ... */
}
customElements.define("app-element", AppElement);
customElements.get("app-element") === AppElement; // true
.get()
获得所请求的自定义元素的类
特定的操作
customElements.define('my-counter', MyCounter);
customElements.whenDefined('my-counter').then(()=>{
console.log('xxx');
})
简单的理解,我们在自定义元素 初始化后,进行的一些操作
更新操作
customElements.upgrade
// 创建一个自定义元素
const element = document.createElement("app-element");
// 我们把这个自定义元素定义好
class AppElement extends HTMLElement { /* ... */ }
customElements.define("app-element", AppElement);
console.log(element.constructor === HTMLElement); // true
//我们更新下这个元素,他已经从 HTMLElement=>AppElement
customElements.upgrade(element)
ae.constructor === HTMLElement; // false
ae.constructor === AppElement; // true
我们在.createElement()
定义前,他是HTMLElment
类型,但是upgrade
更新后,他就是AppElement
,
所以有必要进行手动更新
自定义元素的生命周期
connectedCallback()
是从元素的分离constructor
出来的
connectedCallback
通过用于讲内容添加到元素
影子DOM
影子dom的特点
<div class="element">
#shadow-root
<div class="inner-element">
...
</div>
</div>
shadowRootInit
element.attachShadow(shadowRootInit);
shadowRootInit设置
{mode:'open'}
element.shadowRoot // 返回一个ShadownRoot对象
root元素可以从js外部访问根节点
{mode:'closed'}
element.shadowRoot // null
拒绝js外部返回关闭的shadow
<slot>
包含文档内容的内容
<div id="example">我是本来的元素,</div>
<script>
let example = document.getElementById('example');
let shadowRoots = example.attachShadow({mode: 'open'});
shadowRoots.innerHTML = `<style>
button {
background: tomato;
color: white;
}
</style>
<button id="button"><slot></slot> 我是添加的内容</button>`;
</script>
HMTL模板
template
元素是HTML流中可以标记重复使用的代码模块,但是这些模块不能立即呈现
<template id="books">
<li><span class="title"></span> — <span class="author"></span></li>
</template>
<ul id="contents"></ul>
<script>
const books = [
{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
{ title: 'A Farewell to Arms', author: 'Ernest Hemingway' },
{ title: 'Catch 22', author: 'Joseph Heller' }
];
const fragment=document.querySelector('#books')
const contents = document.querySelector('#contents');
books.forEach(book=>{
// 创建内容实例
const instance=document.importNode(fragment.content,true)
instance.querySelector('.title').innerText=book.title;
instance.querySelector('.author').innerText=book.author;
// 添加到dom上
contents.appendChild(instance)
})
</script>
我们发现我们使用模板的时候,我们需要把javascript
// 拿到 <template></template> 标签
const template = document.querySelector('template');
const node = document.importNode(template.content, true);
document.body.appendChild(node);
使用document.importNode
允许我们在多个位置重用相同模板内容的实例
webComponent 在项目的使用
新建一个最小的基点
class AppElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define("app-element", AppElement);
我们命令的时候要养成一个良好的习惯,文件通过与类命名AppElement.js
在文档中加载组件javascript 文件
<script src="/components/AppElement.js"></script>
这样我们就可以在html添加这个组件
<app-element></app-element>
或者我们用js的形式添加
const appElement = document.createElement("app-element");
document.body.appendChild(appElement);
或者我们放在一个根文件中
<script type="module" src="/js/index.js"></script>
这样我们就可以在index.js
中使用
import "./components/AppElement.js";
组件属性
我们可以在constructor
添加属性或者成员
class AppElement extends HTMLElement {
#role='devel'
constructor() {
super();
this.name = "Manz";
this.life = 5;
this.#role='js Devel'
}
test(){
}
#provateTest(){
}
}
也可以添加私有属性和方法
执行方法
上面我们在自定义元素内部写了一些方法
<app-element onClick="this.test()"></app-element>
我们发现他会执行public公共
类型的方法,私有方法只能在类内部执行
对于自身而且创建就执行静态方法,默认的情况的其实this
可以不写因为默认调用的就是内部的方法
生命周期
特性 | 描述 |
---|---|
constructor() |
已创建一个特定的自定义元素,该元素已在注册表中定义。 |
connectedCallback() |
在自定义元素已连接到HTML文档的DOM。! |
disconnectedCallback() |
在自定义元素已从HTML文档的DOM断开。! |
adoptedCallback() |
该自定义元素被移动到一个新文件(常见于iframes )。 |
attributeChangedCallback() |
自定义元素的观察属性已被修改。 |
我们可以通过document.createElement
或new AppElement()
手动创建元素
不要忘记写super()
,因为我要扩展到HTMLElement
// 调用dom时候执行
connectedCallback() {
this.textContent='ddd'
}
// 删除dom时候执行
disconnectedCallback(){
console.log(333);
}
我们发现在操作dom的时候connectedCallback
一些方法
在删除了dom的时候,会调用disconnectedCallback
adoptedCallback() 自定义元素移动一个新文件(这个我暂时不清楚),不太清楚现实的用意在哪
变更检测
可以使用HTML
元素的属性
方法 | 描述 | 返回值 |
---|---|---|
.hasAttributes() | 元素有属性吗? | boolean |
.getAttributeNames() | 返回一个array属性的小写属性值 | Array |
.hasAttribute(name) | 查询某个name是否存在 | boolean |
.getAttribute(name) | 返回name的属性值,不存在返回null | string |
.removeAttribute(name) | 删除属性name | |
.setAttribute(name,value) | 将属性设置name-value | |
.toggleAttribute(name,[boolean]) | 如果存在则删除,不存在则添加 | boolean |
特性 | 描述 |
---|---|
static get observedAttributes() |
观察属性以通知更改。 |
attributeChangedCallback(``name,``old,``now) |
它会关闭,当他们改变。 |
class AppElement extends HTMLElement {
static get observedAttributes() {
return ["value", "isEnabled"];
}
attributeChangedCallback(name, old, now) {
console.log(` ${name} ------ ${old} ---- ${now}.`);
}
}
static getter observedAttributes()
返回我们要观察的属性名称
每当我们的属性修改的时候,都会调用attributeChangedCallback()
方法
属性名称name,之前的old
值和当前的值now
每当属性的修改都会调用这个函数
写一个类似vue的完整版实例
<div id="templates"></div>
<template id="templateOne">
<style>
.aaa{
color:red;
font-size: 12px;
}
</style>
<div class="aaa">12211212</div>
<button onClick="clickDown()">Click</button>
<script>
function clickDown(){
alert(1)
}
</script>
</template>
<script>
let template=document.querySelector('#templateOne')
let content=document.querySelector('#templates')
content.appendChild(
document.importNode(template.content,true)
)
</script>
自定义组件的完整样例
<my-counter></my-counter>
<script>
const template = document.createElement('template');
template.innerHTML = `
<style>
* {
font-size: 200%;
}
span {
width: 4rem;
display: inline-block;
text-align: center;
}
button {
width: 4rem;
height: 4rem;
border: none;
border-radius: 10px;
background-color: seagreen;
color: white;
}
</style>
<button id="dec">-</button>
<span id="count"></span>
<button id="inc">+</button>`;
class MyCounter extends HTMLElement {
constructor() {
super();
this.count = 0;
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.shadowRoot.getElementById('inc').onclick = () => this.inc();
this.shadowRoot.getElementById('dec').onclick = () => this.dec();
this.update(this.count);
}
inc() {
this.update(++this.count);
}
dec() {
this.update(--this.count);
}
update(count) {
this.shadowRoot.getElementById('count').innerHTML = count;
}
}
customElements.define('my-counter', MyCounter);
</script>
从原生web组件到框架组件源码(一)的更多相关文章
- Web前端三大框架_vue源码笔记
一.VUE 1.1 MVVM VUE也是基于MVVM模式实现的.特点就是数据双向绑定 在MVVM模式中,分成三个部分: M 模型 model V 视图 view VM 视图-模型 view-model ...
- DRF框架(一)——restful接口规范、基于规范下使用原生django接口查询和增加、原生Django CBV请求生命周期源码分析、drf请求生命周期源码分析、请求模块request、渲染模块render
DRF框架 全称:django-rest framework 知识点 1.接口:什么是接口.restful接口规范 2.CBV生命周期源码 - 基于restful规范下的CBV接口 3.请求组件 ...
- robotlegs2.0框架实例源码带注释
robotlegs2.0框架实例源码带注释 Robotlegs2的Starling扩展 有个老外写了robotleges2的starling扩展,地址是 https://github.com/brea ...
- 框架-springmvc源码分析(一)
框架-springmvc源码分析(一) 参考: http://www.cnblogs.com/heavenyes/p/3905844.html#a1 https://www.cnblogs.com/B ...
- JUC同步器框架AbstractQueuedSynchronizer源码图文分析
JUC同步器框架AbstractQueuedSynchronizer源码图文分析 前提 Doug Lea大神在编写JUC(java.util.concurrent)包的时候引入了java.util.c ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码]
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...
- 框架-springmvc源码分析(二)
框架-springmvc源码分析(二) 参考: http://www.cnblogs.com/leftthen/p/5207787.html http://www.cnblogs.com/leftth ...
- WEB前端开发学习:源码canvas 雪
WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...
- 如何查看JDK以及JAVA框架的源码
如何查看JDK以及JAVA框架的源码 设置步骤如下: 1.点 “window”-> "Preferences" -> "Java" -> &q ...
- 高性能网络I/O框架-netmap源码分析
from:http://blog.chinaunix.net/uid-23629988-id-3594118.html 博主这篇文章写的很好 感觉很有借签意义 值得阅读 高性能网络I/O框架-netm ...
随机推荐
- pytest封神之路第零步 快速入门
背景:本文是在系列第五篇发表后的补充篇章,第一篇介绍了tep,可能对不熟悉pytest的朋友不够友好,特意补充入门篇,帮大家快速了解如何动手写pytest.如果你是从这篇文章第一次阅读,那么请忽略以上 ...
- 小白也能看懂的Redis教学基础篇——redis神秘的数据结构
各位看官大大们,周末好! 作为一个Java后端开发,要想获得比较可观的工资,Redis基本上是必会的(不要问我为什么知道,问就是被问过无数次).那么Redis是什么,它到底拥有什么神秘的力量,能获得众 ...
- Java程序员面试学习资料汇总
整理了一些关于Java程序员面试的书籍及免费资料. 一.书籍篇1)<Offer来了:Java面试核心知识点精讲(原理篇)>精讲Java面试必需的JVM原理.Java基础.并发编程.数据结构 ...
- 实践案例丨利用小熊派开发板获取土壤湿度传感器的ADC值
摘要:一文带你用小熊派开发板动手做土壤湿度传感器. 一.实验准备 1.实验环境 一块stm32开发板(推荐使用小熊派),以及数据线 已经安装STM32CubeMX 已经安装KeilMDK,并导入stm ...
- Linux里面的压缩和解压类指令
gzip/gunzip 指令 ( .gz 不能压缩目录) gzip 用于压缩文件, gunzip 用于解压的 . gzip gzip命令用来压缩文件.gzip是个使用广泛的压缩程序,文件经它压缩过后 ...
- 一次性升级所有python包的靠谱并且简单的方法
1. 用pip-review包pip install pip-review #安装包pip-review --auto #自动批量升级指令2. 编写代码import pipfro ...
- 02 ArcPython的使用大纲
一.什么情况下使用ArcPython? 1.现有工具实现不了,可以用python 2.流程化需要时,可以使用python 3.没有AE等二次开发环境 4.其他特殊场景 二.ArcPython在ArcG ...
- c++缓冲区std::wstringbuf
参考:http://www.cplusplus.com/reference/sstream/wstringbuf/ class <sstream> std::wstringbuf type ...
- Hive理论基础
数仓特征:面向主题,集成,非易失的,时变.数据仓库是在数据库已经大量存在的情况下,为了进一步挖掘数据资源.为了决策需要而产生的,不是所谓的"大型数据库". 数据库与数据仓库的区 ...
- ARM-Linux S5PV210 UART驱动(转)
ARM-Linux S5PV210 UART驱动(3)----串口核心层.关键结构体.接口关系 尽管一个特定的UART设备驱动完全可以按照tty驱动的设计方法来设计,即定义tty_driver并实现t ...