一名【合格】前端工程师的自检清单(手动实现前端轮子篇)

it2022-05-05  141

#手动实现前端轮子

 

##1.手动实现call、apply、bind

参考资料:https://www.jianshu.com/p/3b69fb0d4c2f

 

##2.手动实现符合Promise/A+规范的Promise、手动实现async await

手动实现符合Promise/A+规范的Promise:

https://www.jianshu.com/p/8d5c3a9e6181

 

async await原理:

https://blog.csdn.net/Merciwen/article/details/80963279

 

手动实现async await:

暂无

 

##3.手写一个EventEmitter实现事件发布、订阅

参考资料:

https://blog.csdn.net/roamingcode/article/details/86238419

 

##4.可以说出两种实现双向绑定的方案、可以手动实现

参考资料:

https://blog.csdn.net/liaodehong/article/details/53764011

 

1、手动绑定:比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义get和set方法(当然还有其它方法),

调用时手动调用get或set数据,改变数据后出发UI层的渲染操作;

 

2、脏检查机制:

以典型的mvvm框架angularjs为代表,angular通过检查脏数据来进行UI层的操作更新。

关于angular的脏检测,有几点需要了解些: - 脏检测机制并不是使用定时检测。 - 脏检测的时机是在数据发生变化时进行。

- angular对常用的dom事件,xhr事件等做了封装, 在里面触发进入angular的digest流程。

- 在digest流程里面, 会从rootscope开始遍历, 检查所有的watcher。

(关于angular的具体设计可以看其他文档,这里只讨论数据绑定),那我们看下脏检测该如何去做:

主要是通过设置的数据来需找与该数据相关的所有元素,然后再比较数据变化,如果变化则进行指令操作

 

3、前端数据劫持(Hijacking):

第三种方法则是avalon等框架使用的数据劫持方式。

基本思路是使用Object.defineProperty对数据对象做属性get和set的监听,

当有数据读取和赋值操作时则调用节点的指令,这样使用最通用的=等号赋值就可以了。

 

##5.手写JSON.stringify、JSON.parse

参考资料:https://juejin.im/post/5c9c3989e51d454e3a3902b6#heading-15

 

##6.手写一个模版引擎,并能解释其中原理

核心原理:字符串正则

参考资料:https://blog.csdn.net/weixin_33852020/article/details/87351095

 

##7.手写懒加载、下拉刷新、上拉加载、预加载等效果

 

懒加载:

https://www.cnblogs.com/czy960731/p/9162330.html

https://blog.csdn.net/weixin_40929761/article/details/81061434

 

下拉刷新、上拉加载:

https://segmentfault.com/a/1190000014423308

 

预加载:

https://www.cnblogs.com/leyan/p/6085148.html


最新回复(0)