温馨提醒,当你觉得看我写的很乱的时候,就对了,那是因为我查阅了大量的资料提取出来的,因为有点东西不太理解,所以你会感觉有的部分重复了,也不是重复,只是后面对前面的内容进行梳理了一些,需要耐心的看到最后

自定义元素

我们发现自定义元素总是有破折号的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> &mdash; <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.createElementnew 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组件到框架组件源码(一)的更多相关文章

  1. Web前端三大框架_vue源码笔记

    一.VUE 1.1 MVVM VUE也是基于MVVM模式实现的.特点就是数据双向绑定 在MVVM模式中,分成三个部分: M 模型 model V 视图 view VM 视图-模型 view-model ...

  2. DRF框架(一)——restful接口规范、基于规范下使用原生django接口查询和增加、原生Django CBV请求生命周期源码分析、drf请求生命周期源码分析、请求模块request、渲染模块render

    DRF框架    全称:django-rest framework 知识点 1.接口:什么是接口.restful接口规范 2.CBV生命周期源码 - 基于restful规范下的CBV接口 3.请求组件 ...

  3. robotlegs2.0框架实例源码带注释

    robotlegs2.0框架实例源码带注释 Robotlegs2的Starling扩展 有个老外写了robotleges2的starling扩展,地址是 https://github.com/brea ...

  4. 框架-springmvc源码分析(一)

    框架-springmvc源码分析(一) 参考: http://www.cnblogs.com/heavenyes/p/3905844.html#a1 https://www.cnblogs.com/B ...

  5. JUC同步器框架AbstractQueuedSynchronizer源码图文分析

    JUC同步器框架AbstractQueuedSynchronizer源码图文分析 前提 Doug Lea大神在编写JUC(java.util.concurrent)包的时候引入了java.util.c ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

  7. 框架-springmvc源码分析(二)

    框架-springmvc源码分析(二) 参考: http://www.cnblogs.com/leftthen/p/5207787.html http://www.cnblogs.com/leftth ...

  8. WEB前端开发学习:源码canvas 雪

    WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...

  9. 如何查看JDK以及JAVA框架的源码

    如何查看JDK以及JAVA框架的源码 设置步骤如下: 1.点 “window”-> "Preferences" -> "Java" -> &q ...

  10. 高性能网络I/O框架-netmap源码分析

    from:http://blog.chinaunix.net/uid-23629988-id-3594118.html 博主这篇文章写的很好 感觉很有借签意义 值得阅读 高性能网络I/O框架-netm ...

随机推荐

  1. pytest封神之路第零步 快速入门

    背景:本文是在系列第五篇发表后的补充篇章,第一篇介绍了tep,可能对不熟悉pytest的朋友不够友好,特意补充入门篇,帮大家快速了解如何动手写pytest.如果你是从这篇文章第一次阅读,那么请忽略以上 ...

  2. 小白也能看懂的Redis教学基础篇——redis神秘的数据结构

    各位看官大大们,周末好! 作为一个Java后端开发,要想获得比较可观的工资,Redis基本上是必会的(不要问我为什么知道,问就是被问过无数次).那么Redis是什么,它到底拥有什么神秘的力量,能获得众 ...

  3. Java程序员面试学习资料汇总

    整理了一些关于Java程序员面试的书籍及免费资料. 一.书籍篇1)<Offer来了:Java面试核心知识点精讲(原理篇)>精讲Java面试必需的JVM原理.Java基础.并发编程.数据结构 ...

  4. 实践案例丨利用小熊派开发板获取土壤湿度传感器的ADC值

    摘要:一文带你用小熊派开发板动手做土壤湿度传感器. 一.实验准备 1.实验环境 一块stm32开发板(推荐使用小熊派),以及数据线 已经安装STM32CubeMX 已经安装KeilMDK,并导入stm ...

  5. Linux里面的压缩和解压类指令

    gzip/gunzip 指令 ( .gz  不能压缩目录) gzip 用于压缩文件, gunzip 用于解压的 . gzip gzip命令用来压缩文件.gzip是个使用广泛的压缩程序,文件经它压缩过后 ...

  6. 一次性升级所有python包的靠谱并且简单的方法

    1.  用pip-review包pip install pip-review   #安装包pip-review --auto        #自动批量升级指令2.  编写代码import pipfro ...

  7. 02 ArcPython的使用大纲

    一.什么情况下使用ArcPython? 1.现有工具实现不了,可以用python 2.流程化需要时,可以使用python 3.没有AE等二次开发环境 4.其他特殊场景 二.ArcPython在ArcG ...

  8. c++缓冲区std::wstringbuf

    参考:http://www.cplusplus.com/reference/sstream/wstringbuf/ class <sstream> std::wstringbuf type ...

  9. Hive理论基础

    数仓特征:面向主题,集成,非易失的,时变.数据仓库是在数据库已经大量存在的情况下,为了进一步挖掘数据资源.为了决策需要而产生的,不是所谓的"大型数据库".   数据库与数据仓库的区 ...

  10. ARM-Linux S5PV210 UART驱动(转)

    ARM-Linux S5PV210 UART驱动(3)----串口核心层.关键结构体.接口关系 尽管一个特定的UART设备驱动完全可以按照tty驱动的设计方法来设计,即定义tty_driver并实现t ...