今日手写

2021-10-30

实现ajax

// 封装一
const ajax = {
    get(url, fn) {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)//第三个参数表示是否异步
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 2) {
                fn(xhr.responseText)
            }
    	}
    	xhr.send()
    },
    post(url, data, fn) {
        const xhr = new XMLHttpRequest()
        xhr.open('POST', url, true)
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4) {
            	fn(xhr.responseText)
            }
        }
        xhr.send(data)
    }
}
//封装二
function ajax(option) {
    //创建xmlhttprequest()对象
    var xhr = new XMLHttpRequest()

    // 初始化参数内容
    option = option || {}
    option.type = (option.type || 'GET').toUpperCase()
    option.dataType = option.dataType || 'json'
    const params = option.data

    // 发送请求
    if (option.type == 'GET') {
        let canshu = ''
        for(key in params) {
            canshu = canshu + `${key}=${params[key]}&`
        }
        xhr.open('GET', option.url + '?' + canshu.substr(0,canshu.length - 1), true)
        xhr.send(null)
    } else if (option.type == "POST") {
        xhr.open('POST', option.url, true)
        xhr.send(params)
    }

    //接受请求
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            option.success && option.success(xhr.responseText)
        } else if(xhr.readyState !== 4 && xhr.status >= 300){
            option.faile && option.faile(xhr.status)
        }
    }
    }
//使用
 ajax({
     type: 'get',
     url: 'https://localhost:8000/phoneimgs',
     data: { 
         page:1,
         name:20
     },
     dataType: 'json',
     success: function(data) {
         console.log(data);
     },
     faile: function(err) {
         console.log(`错误码${err}`);
     }
})
//这是拿到的结果: 我自己写的一个爬虫,爬到的数据
[{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946729.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946729.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946728.jpeg","showurl":"https://mfiles.alphacoders.com/946/thumb-946728.jpeg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946724.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946724.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946716.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946716.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946714.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946714.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946706.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946706.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946703.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946703.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946701.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946701.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946687.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946687.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946686.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946686.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946665.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946665.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946649.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946649.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946626.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946626.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946621.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946621.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946614.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946614.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946613.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946613.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946612.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946612.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946610.png","showurl":"https://mfiles.alphacoders.com/946/thumb-946610.png"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946609.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946609.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946607.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946607.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946600.png","showurl":"https://mfiles.alphacoders.com/946/thumb-946600.png"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946598.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946598.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946581.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946581.jpg"},{"url":"https://mfiles.alphacoders.com/946/thumb-1920-946576.jpg","showurl":"https://mfiles.alphacoders.com/946/thumb-946576.jpg"}]

手写new过程

function myNew(fn, ...arg) {
    const obj = {}
    obj.__proto__ = fn.prototype
    fn.apply(obj, arg)
    return obj
}
function Person(name) {
	this.name = name
}
const p1 = myNew(Person,'wuyupei')
console.log(p1);

instanceof关键字

 function MyInstanceof(child, father) {
     // null比较特殊
     if(child === null) return false
     let cp = child.__proto__
     let fp = father.prototype
     while(cp) {
         if(cp === fp) {
             return true
         }
         cp = cp.__proto__
     }
 }
class Person {
    constructor(name) {
        this.name = name
    }
}
const p1 = new Person('wuyupei')
console.log(MyInstanceof(p1, Person));
console.log(MyInstanceof(p1, Object));

防抖的实现

function myDebounce(fn, delay = 500) {
    let timer = null
    return function () {
        if(timer) {
            clearTimeout(timer)
        }
        const args = arguments
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
}

节流的实现

function throttle(fn, delay = 500) {
    let flag = true
    return function () {
        if(!flag) return
        flag = false
        const args = arguments
        setTimeout(() => {
            fn.apply(this, args)
            flag = true
        }, delay)
    }
}

数组的去重

function quchong1(arr) {
    return [...(new Set(arr))]
}
function quchong2(arr) {
    let res = []
    // 排个顺序
    let sortarr = arr.sort((a, b) => {
        return a - b
    })
    // 遍历
    for(let i = 0; i < sortarr.length; i++) {
        // 如果前一个和后一个相同 continue
        if(arr[i] === arr[i+1]) {
            continue
        }else {// 否则添加进res中
            res.push(arr[i])
        }
    }
    return res
}
function quchong3(arr) {
    // 搞一个集合 储存映射关系
    const res = []
    const map = new Map()
    for(var i = 0; i < arr.length; i++) {
        if(map.has(arr[i])) {
            map.set(arr[i],map.get(arr[i])+1)
        }else {
            map.set(arr[i], 1)
        }
    }
    for([key, value] of map) {
        res.push(key)
    }
    return res
}
function quchong4(arr) {
    let res = []
    arr.reduce((pre, item) => {
        if(!pre[item]) {
            pre[item] = 1
            res.push(item)
        }
        return pre
    }, {})
    return res
}
const arr = [1,1,3,0,5,5,8,9]
console.log(quchong1(arr));
console.log(quchong2(arr));
console.log(quchong3(arr));
console.log(quchong4(arr));

settimeOut实现setInterface

function mySetInterval(fn, delay) {
    let timer = null
    const interval = () => {
        fn()
        timer = setTimeout(interval, delay)
    }
    setTimeout(interval, delay)
}
mySetInterval(() => console.log(111), 1000)

setInterval实现setTimeout

function mySetTimeout(fn, delay) {
    const timer = setInterval(() => {
    fn()
    // 执行完一次 立马清除
    clearTimeout(timer)
    }, delay)
}
mySetTimeout(() => console.log(888), 1000)