今日手写

2021-11-08

发布订阅者的实现

发布者-订阅者模式又称观

察者模式：当一个对象（发布者）状态发生改变时，所有依赖它的对象（订阅者）都会得到通知。

该模式广泛应用在异步编程中：我们无需关注对象在异步运行期间的内部状态，只需要订阅感兴趣的事件发生点。

简单说就是该模式让发布者和订阅者两个对象弱耦合，虽然不太清楚彼此的细节但是不影响彼此通信。

思路:

搞一个类, 类里一个属性cache用来储存依赖对应的函数
类实现 emit on off once方法

代码:

class EventEimtter {
    constructor() {
        //事件队列
        this.cache = {}
    }

    on(name,fn){
        // 如果cache中存在监听的方法，则把方法push进数组里面
        if(this.cache[name]){
            this.cache[name].push(fn)
        }else {
            // 如果是第一次监听此方法，则直接放进数组里
            this.cache[name] = [fn]
        }
    }
    off(name,fn){
        let tasks = this.cache[name]
        if(tasks) {
            const index = tasks.findIndex(f => f === fn || f.callback === fn)
            if(index >=0) {
                tasks.splice(index,1)
            }
        }

    }
    emit(name,once = false,...args){
        if(this.cache[name]) {
            // 把数组里的回调通过slice()遍历出来，
            let tasks = this.cache[name].slice()
            for(let fn of tasks) {
                // 开始执行回调
                fn(...args)
            }
            if(once) {
                // 如果是之监听一次，那么执行完之后就从事件队列里删除此事件
                delete this.cache[name]
            }
        }
    }
}

// 测试
let a = new EventEimtter()
let f1 = function(num1,num2) {
    console.log(num1,num2);
}
let f2 = function(name1,name2) {
    console.log(name1,name2);
}
a.on('aaa',f1) //10 15
a.on('aaa',f2) //10 15
a.emit('aaa',false,10,15)

实现一个json.parse

原理: 借用 eval 函数来完成

eval函数接受一个字符串并把字符串当作javascript函数来执行

代码:

var obj = {
    name: 'wuyupei',
    age: 20,
    friend: [{
        name: 'liuxu',
        age: 12
    }, {
        name: 'lisiyuan',
        age: 10
    }]
}

function parse(json) {
    console.log(json);
    console.log("(" + json + ")");
    return eval("(" + json + ")");
}

console.log(parse(JSON.stringify(obj)));
//
{"name":"wuyupei","age":20,"friend":[{"name":"liuxu","age":12},{"name":"lisiyuan","age":10}]}
({"name":"wuyupei","age":20,"friend":[{"name":"liuxu","age":12},{"name":"lisiyuan","age":10}]})
{name: 'wuyupei', age: 20, friend: Array(2)}
age: 20
friend: Array(2)
0:
age: 12
name: "liuxu"
[[Prototype]]: Object
1:
age: 10
name: "lisiyuan"
[[Prototype]]: Object
length: 2
[[Prototype]]: Array(0)
name: "wuyupei"
[[Prototype]]: Object

把一个dom树转化为json格式的数据

思路: 递归调用

代码:

<div>
    <span></span>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

 // 将上面的Dom转化为json  递归
var div = document.querySelector('div')
function domToJson(dom) {
    // 定义空对象 用来储存数据
    const obj = {}
    // 先把tagName添加进对象
    obj.tag = dom.tagName
    obj.children = []
    // 把 dom.children转为数组   使用es6的展开运算符 因为 [htmlConten]是可迭代的
    const arr = [...dom.children]
    arr.forEach(item => {
        // 递归调用domToJson
        obj.children.push(domToJson(item))
    });
    return obj
}
console.log(domToJson(div));
// 打印结果
{tag: 'DIV', children: Array(2)}
children: Array(2)
0:
children: []
tag: "SPAN"
[[Prototype]]: Object
1:
children: Array(3)
0: {tag: 'LI', children: Array(0)}
1: {tag: 'LI', children: Array(0)}
2: {tag: 'LI', children: Array(0)}
length: 3
[[Prototype]]: Array(0)
tag: "UL"
[[Prototype]]: Object
length: 2
[[Prototype]]: Array(0)
tag: "DIV"
[[Prototype]]: Object

把json格式的数据转化为DOM树

// 将上面生成的josn转化为dom树
// 真正的渲染函数
function _render(vnode) {
    // 如果是数字类型转化为字符串
    if (typeof vnode === "number") {
        vnode = String(vnode);
    }
    // 字符串类型直接就是文本节点
    if (typeof vnode === "string") {
        return document.createTextNode(vnode);
    }
    // 普通DOM
    const dom = document.createElement(vnode.tag);
    if (vnode.attrs) {
        // 遍历属性
        Object.keys(vnode.attrs).forEach((key) => {
            const value = vnode.attrs[key];
            dom.setAttribute(key, value);
        });
    }
    // 子数组进行递归操作
    vnode.children.forEach((child) => dom.appendChild(_render(child)));
    return dom;
}