【教学向】再加150行代码教你实现一个低配版的web component库(2) —原理篇

动图镇楼

在线演示:https://momoko8443.github.io/...
【教学向】再加150行代码教你实现一个低配版的web component库(2) —原理篇_第1张图片

书接上文 【教学向】再加150行代码教你实现一个低配版的web component库(1) —设计篇

先回顾一下

上文说道一个基本款的custom web component由3大部分组成,同时也必须具备4大功能

三大部分是

1. Template(DOM)
2. Style   
3. Script (viewModel)

四大功能是

1. Mvvm
2. Shadow Style
3. Communication
4. Lifecycle (本文不涉及LC的API,但在实现中会隐形的涵盖这部分内容)

Component定义文件格式如下



    
    
    

接下去,本篇就会一一讲解各个点的原理和大致实现思路,具体代码会在第三篇 代码篇中给出

Web Component库大致流程

【教学向】再加150行代码教你实现一个低配版的web component库(2) —原理篇_第2张图片

黑框以下是不是很眼熟,就是Mvvm篇中的流程。加入Component功能我们几乎不用动Mvvm部分的代码,只要在调用Scanner扫描viewModel和view的映射关系之前,我们把含有Component tag的主DOM Tree升级加工即可。其实Component定义文件中的