中高级前端必备面试知识点

柔光的暖阳◎ 2022-10-23 12:48 250阅读 0赞

菜鸟也想飞得高~

> 1.mock

前后端分离开发，Mock数据是前端开发中重要的的一个环节，前端可以不依赖后端，或者说不必等待后返回数据，只要前后端约定好对应的数据接口，前端可以通过Mock模拟数据先行开发，在后端接口开发完后，只需要切换对应的接口地址即可，可以保证项目的同步开发。

本地内容：在mock文件夹下中的index文件中定义好自有的接口路径，再到根目录的service文件夹下生成对应业务模块的js文件。文件内将相应微服务的接口匹配好。暴露出去供业务功能调用。

> 2.axios工作流程~不会

axios是一个基于Promise用于浏览器和nodejs的HTTP客户端.简单理解就是ajax的封装。(ajax原理不知道~）

1.  从浏览器中创建XMLHttpRequest
2.  支持Promise API
3.  客户端支持防止CSRF
4.  提供了一些并发请求的接口
5.  从node.js/java创建http请求
6.  拦截请求和响应
7.  转换请求和响应数据
8.  取消请求
9.  自动转换JSON数据

**防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。**

/**
         *
         *
         * @param {*} params mmsi
         * @param {*} callback
         * 
         * 
         */
     getship_cargo_detail:function(params,callback){
     axios.get(server.portAddress+"newshipcargo/newship_pos_detail",{params})
            .then(function(res){
     callback(res.data);
            })
            .catch(function(error){
     console.log("get_ship_cargo_data_error");
            })
        },
    
    
    //调用方法
    
    shipcargoserver.getship_cargo_detail({mmsi:mmsi},data=>{
                if(data){
         this.setState({
           pageNumber:data.,,,,,,,
       })
    }
    })

> 3.

[https://zhuanlan.zhihu.com/p/25701897][https_zhuanlan.zhihu.com_p_25701897]

[https://github.com/confidence68/blog/issues/288][https_github.com_confidence68_blog_issues_288]

[https://zhuanlan.zhihu.com/p/82896897?utm\_source=wechat\_timeline][https_zhuanlan.zhihu.com_p_82896897_utm_source_wechat_timeline]

[https://www.cnblogs.com/lixuemin/p/5459543.html][https_www.cnblogs.com_lixuemin_p_5459543.html]

[https://juejin.cn/post/6844904067454468110][https_juejin.cn_post_6844904067454468110]

[https://www.jianshu.com/p/fd440bac7e93][https_www.jianshu.com_p_fd440bac7e93]

> 4.改变this所指的方法

也可说成改变函数内部运行时上下文；

1.  有对象就指向调用对象；
2.  没有对象就指向全局对象；
3.  用new构造指向新对象;
4.  通过apply,call或bind改变this指向；

（1）bind()只是“引用”，而不是“调用”

var aHello = {
        name: "hello",
        showName: function(){
            alert(this.name);
        }
    }
    document.onclick = aHello.showName.bind(aHello);//只有在点击的时候才执行，换成call会立即执行

> 5.减少reflow的方法

[https://segmentfault.com/a/1190000002629708][https_segmentfault.com_a_1190000002629708]

> 6.微任务与宏任务与eventloop

> 7.隐式转换全部情况

> 8.webstorage

> 9.如何使用sessionID判别用户状态

> 10.OAuth2原理及应用

> 11.[http://socket.io][http_socket.io]的前端使用

> 12.webpack的作用及核心配置

> 13.==与===的比较，===的使用情况

> 14.闭包的应用场景

> 15.敏捷开发的全部流程

> 16.webpack+glup/FIS

> 17.git常用的基本命令

> 18.jar包查看项目进程

> 19.mvc与mvvm的区别

> 20.html语义化，css模块化

> 21.标准化的javascript

> 22.前端兼容性问题总结

> 23.前端性能优化

> 24.loadash的使用

> 25.前端预处理器sass的使用

[https_zhuanlan.zhihu.com_p_25701897]: https://zhuanlan.zhihu.com/p/25701897
[https_github.com_confidence68_blog_issues_288]: https://github.com/confidence68/blog/issues/288
[https_zhuanlan.zhihu.com_p_82896897_utm_source_wechat_timeline]: https://zhuanlan.zhihu.com/p/82896897?utm_source=wechat_timeline
[https_www.cnblogs.com_lixuemin_p_5459543.html]: https://www.cnblogs.com/lixuemin/p/5459543.html
[https_juejin.cn_post_6844904067454468110]: https://juejin.cn/post/6844904067454468110
[https_www.jianshu.com_p_fd440bac7e93]: https://www.jianshu.com/p/fd440bac7e93
[https_segmentfault.com_a_1190000002629708]: https://segmentfault.com/a/1190000002629708
[http_socket.io]: https://link.zhihu.com/?target=http%3A//socket.io