2023-5-30(第二十天)

71 阅读2分钟

匿名函数

自调

只能执行一次

好处:函数中的没有用的变量是会自动释放的,它可以用于代替全局代码写法,两者很相似,都只会执行一次,但是自调会释放没用的东西

(function(){
    操作;
})();

回调

匿名函数不是自调,就是回调。一切的回调函数,都可以简化为箭头函数

elem.on事件名=function(){}
arr.sort(function(){})
xxx.api(function(){})
var obj={
    "方法名":function(){}
}

设计模式

一种编程【思想】

单例模式

也称之为单体模式,保证一个类仅有一个实例对象创建,并且提供一个访问它的全局访问点 最简单的单例模式:利用ES6的let不允许重复声明的特性,刚好就符合了单例的特点:

let obj={
    "name":"袍哥1",
    "getName":function(){return this.name},
}

缺点: 1、污染命名空间(容易变量名冲突,会报错) 2、维护时不易管控(搞不好就直接覆盖了)

var h52302=(function(){
    let state=null;
    return function(name,age){
        this.name=name;
        this.age=age;
        if(state){
            return state;
        }
    return state=this;
    }
})();
        
h52302.prototype.sayHello=function(){
    console.log(this.name);
}
​
var dll=new h52302("邓灵力",18);
var wr=new h52302("王锐",19);
​
console.log(dll);
dll.sayHello();
​
console.log(wr);//其实还是return了dll
wr.sayHello();

观察者模式(发布-订阅模式)

let obj={};
        
//创建订阅者
function on(id,fn){
    if(!obj[id]){//判断有没有此id(有没有这个人),没有我就创建了一个空数组
        obj[id]=[];//obj["袍哥"]=[]
    }
    obj[id].push(fn);//obj["袍哥"]=[(msg)=>{console.log("小胡来了",msg)},(msg)=>{console.log("小罗来了",msg)},(msg)=>{console.log("小向来了",msg)}]
}
        
on("袍哥",(msg)=>{console.log("小胡来了",msg)})
on("袍哥",(msg)=>{console.log("小罗来了",msg)})
on("袍哥",(msg)=>{console.log("小向来了",msg)})
on("袍哥",(msg)=>{console.log("小张来了",msg)})
on("袍哥",(msg)=>{console.log("小王来了",msg)})
on("袍哥",(msg)=>{console.log("小李来了",msg)})
​
//发布者的操作
function emit(id,msg){//id="袍哥"
    obj[id].forEach(fn=>fn(msg));//obj["袍哥"].forEach(fn=>fn("一支穿云箭"))
}
​
btn.onclick=()=>{
    emit("袍哥","一支穿云箭");
}

事件轮询

js是单线程应用,如果某一块代码非常耗时,可能会导致整个页面都卡住

宏任务

不会再卡住我们的单线程应用,可以让后续代码先走

缺点:多个宏任务同时存在,到底谁先执行,谁后执行,分不清楚

定时器()setInterval和setTimeout()、AJAX

微任务

ES6提供了Promise对象 - 可以控制异步代码,依然是异步代码,但是可以控制执行的顺序了

function ajax1(resolve){
    setTimeout(()=>{
        console.log(1);
        resolve();//放行函数
    },Math.random()*5000)
}
function ajax2(){
    return new Promise(resolve=>{
        setTimeout(()=>{
            console.log(2);
            resolve();
        },Math.random()*5000)
    })
}
function ajax3(){
    return new Promise(resolve=>{
        setTimeout(()=>{
            console.log(3);
            resolve();
        },Math.random()*5000)
    })
}
new Promise(ajax1).then(ajax2).then(ajax3);
console.log("后续代码");