js进阶-手写js原生方法

left = Object.getPrototypeOf(left);

right = right.prototype

while (true) {

if (left === null) return false;

if (left === right) return true;

left = Object.getPrototypeOf(left); //一层一层向上找

}

}

继承

=====================================================================

function Parent() {

this.name = ‘parent’;

}

function Child() {

Parent.call(this);

this.type = ‘children’;

}

Child.prototype = Object.create(Parent.prototype);

Child.prototype.constructor = Child;

图片懒加载

---

function lazyload() {

const imgs = document.getElementsByTagName(‘img’);

const len = imgs.length;

// 视口的高度

const viewHeight = document.documentElement.clientHeight;

// 滚动条高度

const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;

for (let i = 0; i < len; i++) {

const offsetHeight = imgs[i].offsetTop;

if (offsetHeight < viewHeight + scrollHeight) {

const src = imgs[i].dataset.src;

imgs[i].src = src;

}

}

}

渲染几万条数据不卡住页面

---

// 渲染大数据时，合理使用createDocumentFragment和requestAnimationFrame，

//将操作切分为一小段一小段执行。

setTimeout(() => {

// 插入十万条数据

const total = 100000;

// 一次插入的数据

const once = 20;

// 插入数据需要的次数

const loopCount = Math.ceil(total / once);

let countOfRender = 0;

const ul = document.querySelector(‘ul’);

// 添加数据的方法

function add() {

const fragment = document.createDocumentFragment();

for(let i = 0; i < once; i++) {

const li = document.createElement(‘li’);

li.innerText = Math.floor(Math.random() * total);

fragment.appendChild(li);

}

ul.appendChild(fragment);

countOfRender += 1;

loop();

}

function loop() {

if(countOfRender < loopCount) {

window.requestAnimationFrame(add);

}

}

loop();

}, 0)

发布订阅者

---

class EventHub{

constructor() {

this.bus = {}

}

add(name,fn){

this.bus[name]?this.bus[name].push(fn):this.bus[name] = [fn]

}

remove(name,fn){

if(fn){

this.bus[name] = this.bus[name].filter(item=>item===fn)

}else{

//无fn，则全清

delete this.bus[name]

}

}

notice(name,msg){

this.bus[name].forEach(item=>{

item(msg)

})

}

}

let e1 = new EventHub()

e1.add(‘go’,function (msg) {

console.log(msg,‘1’);

})

e1.add(‘go’,function (msg) {

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】