JavaScript 写原生组件

最新推荐文章于 2022-11-28 22:24:39 发布

_木远

最新推荐文章于 2022-11-28 22:24:39 发布

阅读量2.3k

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44434872/article/details/112294620

版权

JavaScript 原生组件

笔记目录

JavaScript 原生组件
一、什么是组件
二、案例
案例总结

一、什么是组件

1.继承Html组件

继承Html组件(div，Image ~~) -> 相当于修改html组件

<img src="#" is="my-img" alt="">

class MyImg extends HTMLImageElement {
   	
        constructor() {
   
            super();
            console.log(this);// this指向-> <img src="#" is="my-img" alt="">
            setTimeout(() => {
   
                this.src = './image/859.jpg'
            }, 1000);
        }
    }
    customElements.define('my-img', MyImg, {
   
        extends: 'img'
    });

- - customElements.define()
	- 用于注册新的自定义元素并获取有关先前已注册的自定义元素的信息

2.自定义组件

<body>
<my-com></my-com>
</body>

let template = document.createElement('template');
    template.innerHTML = `
        <div>
            我是洪帮反贼，我要杀光所有清狗
        </div>
        <style>
            div {
   
                background-color: skyblue;
            }
        </style>
    `;
    class MyCom extends HTMLElement {
   
        constructor() {
   
            super();
            console.log(this); //this -> my-com
            //影子DOM  attachShadow
            let _sd = this.attachShadow({
    mode: 'open' }); 
            //Element.attachShadow()方法将影子DOM树附加到指定的元素，并返回对其的引用ShadowRoot 
            _sd.appendChild(template.content.cloneNode(true)); 
            //content返回template模板中所有内容
        }
    }
    customElements.define('my-com', MyCom);

- - 自定义组件  继承 HTMLElement 
- - Element.attachShadow(mode: 'open')方法
		- 将影子DOM树附加到指定的元素，并返回对其的引用ShadowRoot 
		- mode: 'open' ：
		- mode: 'close' ：
- - .content
		- content返回template模板中所有内容

3.get 和 set

//get
let height = "178cm";
class Person{
   
    constructor(){
   
        // this.height = "178cm";
    }
    get height(){
   
        console.log("get");
        return height;
    }
}
let zhangsan  = new Person();
console.log(zhangsan.height)//178cm

//set
class Person{
   
    constructor(){
   
        // this.height = "178cm";
    }
   set height(newValue){
   
        console.log(newValue);
        height = newValue; //180cm
    }
}
let zhangsan  = new Person();
zhangsan.height = "180cm";

4.合并配置（合并多个对象）

Object.assign(obj1, obj2)

{
   
   	let obj1 = {
    'a': 1 };
    let obj2 = {
    'b': 2, 'c': 3 <

最低0.47元/天解锁文章

_木远

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 写原生组件

JavaScript 原生组件笔记目录JavaScript 原生组件一、什么是组件1.继承Html组件2.自定义组件3.get 和 set4.合并配置（合并多个对象）二、案例1.Massagebox.js 文件2.组件模板.html 文件3案例效果案例总结一、什么是组件1.继承Html组件继承Html组件(div，Image ~~) -> 相当于修改html组件<img src="#" is="my-img" alt="">class MyImg extends
复制链接

扫一扫