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

#手动实现前端轮子

 

##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