React、redux, vue、vue-router实现原理、 vuex、vue双向绑定的实现原理。
redux-React状态管理 参考文档
使用情况
某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态
设计思路
Web 应用是一个状态机，视图与状态是一一对应的。
所有的状态，保存在一个对象里面。
基本概念
1. Store 保存数据的地方，可以看成一个容器，整个应用中只有一个store
2. State 对象包含的数据，如果想得到某个时点的数据，就要对store生成快照，这个时点的数据集合就叫state
3. Action State的变化会导致View的变化，用户接触不到State，只能接触View，State的变化必须是View导致的，Action就是View发出，用来改变State的
4. Reducer Store收到Action之后，必须给出一个新的State，这样View才会发生变化，这种State的计算过程就叫做Reducer
5. Store.dispatch（）发出Action ， store.subscribe() 监听变化
vue-router
“haschange”，“pushstate”，“replacestate”
HTTPS 三次握手、浏览器垃圾回收机制、service worker主要作用。
自动垃圾回收机制(GC:Garbage Collecation)
标记清除
function test(){
var a = 10 ; //被标记 ，进入环境
var b = 20 ; //被标记 ，进入环境
}
test(); //执行完毕 之后 a、b又被标离开环境，被回收。
引用计数
function test(){
var a = {} ; //a的引用次数为0
var b = a ; //a的引用次数加1，为1
var c =a; //a的引用次数再加1，为2
var b ={}; //a的引用次数减1，为1
}
内存泄漏
全局变量
被遗忘的定时器和回调函数
DOM引用
闭包引用
var theThing = null; var replaceThing = function () { var originalThing = theThing; var unused = function () { if (originalThing) console.log("hi"); }; theThing = { longStr: new Array(1000000).join('*'), someMethod: function () { console.log(someMessage); } }; unused =null; }; setInterval(replaceThing, 1000);
Service Worker 参考文档
6种状态
- parsed
- installing
- installed
- activating
- activated
- redundant
web Worker
为JavaScript 创造多线程环境，
同源限制，分配给worker线程运行的脚本文件，必须与主线程脚本同源
DOM限制，无法使用document，window，parent，可以使用 navigator，location
通信联系， 不能直接通信，只能通过消息完成
vue模块化（懒）加载，vue和react的区别、virtual dom、diff算法等问题。
API数据缓存方案。
axios的实现原理。
Service Worker
- Service Workers本质上充当Web 应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理，使得能够创建有效的离线体验，拦截网络请求并基于网络是否可以用以及更新资源是否驻留在服务器上采取适当的动作，允许访问和推送通知到后台同步API
使用Service Worker的条件
- 需要在HTTPS中才可以使用serviceWorker
- IOS11.3 之后才支持serviceWorker
- 如果用户在产品发版后，并且ServiceWorker未主动获取新版本的时段访问站点，用户会使用历史版本，此时需要和确保后端接口兼容历史版本
- 要做一些异常情况的应急处理，如主动注销Service Worker
promise、await/async,thunk作用和为什么使用的相同点和不同点。
thunk 参考文档
1. 传值调用，传名调用
2. 一种传名调用的实现方式
function f(m){
return m * 2;
}
f(x + 5);
// 等同于
var thunk = function () {
return x + 5;
};
function f(thunk){
return thunk() * 2;
}
var fs = require('fs');
var thunkify = require('thunkify');
var readFile = thunkify(fs.readFile);
function run(fn) {
var gen = fn();
function next(err, data) {
var result = gen.next(data);
if (result.done) return;
result.value(next);
}
next();
}
var gen = function* (){
var f1 = yield readFile('./1.json');
console.dir(f1.toString())
var f2 = yield readFile('./2.json');
console.dir(f2.toString())
};
run(gen);
使用Promise
const makeRequest = () =>
getJSON()
.then(data => {
console.log(data)
return "done"
})
makeRequest()
使用Async
const makeRequest = async() => {
console.log(await getJSON)
return "done"
}
makeRequest()
区别
在函数前有一个关键字async，await关键字只能在async定义的函数中使用，如何一个async的函数都会隐式返回一个promise，并且promise reslove 的值就是return 返回的值
不能在函数开头使用await
Promise有三种状态， reslove，reject， throw， async只有二中reslove throw（reject，throw）
async避免依赖请求的嵌套调用
错误栈，出错后抛出异常，能清楚的打印到哪里出错
好处
代码简介， async让代码看起来更像同步代码，不想Promise 一样需要then
Promise中不能自定义使用 try/catch 进行错误捕获，但是在Async/await中可以
forEach和map的使用场景和区别。forEach中如何break
forEach():
针对每一个元素执行提供的函数
break
- throw
- 空跑循环
- 改原始数组
- 该用 every或者some
map():
创建一个新的数组，其中每个元素由调用数组中的每个元素执行提供的函数得来
vscode的技术架构
多进程架构
主进程：VSCode 的入口进程，负责一些类似窗口管理、进程间通信、自动更新等全局任务
渲染进程：负责一个 Web 页面的渲染
插件宿主进程：每个插件的代码都会运行在一个独属于自己的 NodeJS 环境的宿主进程中，插件不允许访问 UI
Debug 进程：Debugger 相比普通插件做了特殊化
Search 进程：搜索是一类计算密集型的任务，单开进程保证软件整体体验与性能
Text Buffer
Document Position
jenkins 的 pipeline as code的语言。（Groovy）
是否使用过webpack搭建项目，loader和plugin的加载顺序。
loader 是一个转换器，将A文件进行编译成B文件，单纯的文件转换过程，针对文件
plugin 是一个扩展器，丰富了webpack本身，针对loader结束后，webpack打包的整个过程，并不是直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务，针对工程
项目里UT怎么保证的
和App怎么通信的
常见安全问题
HTTPS咋工作的
React性能咋优化的
深浅拷贝
事件委托
减少内存消耗（列表事件绑定，事件绑定到父元素，然后用条件判断）
动态绑定事件
jquery $.on: 基本用法: $('.parent').on('click', 'a', function () { console.log('click event on tag a'); })，它是 .parent 元素之下的 a 元素的事件代理到 $('.parent') 之上，只要在这个元素上有点击事件，就会自动寻找到 .parent 元素下的 a 元素，然后响应事件； $.delegate: 基本用法: $('.parent').delegate('a', 'click', function () { console.log('click event on tag a'); })，同上，并且还有相对应的 $.delegate 来删除代理的事件； $.live: 基本使用方法: $('a', $('.parent')).live('click', function () { console.log('click event on tag a'); })，同上，然而如果没有传入父层元素 $(.parent)，那事件会默认委托到 $(document) 上；(已废除)
- 项目中用到了哪些设计模式
- Vue双向绑定原理
- 对docker的理解
- Cookie咋工作的
- Chrome Performance用得熟不熟
- react vue区别 redux redux-saga场景
- 网络安全
- 短时间交付大的feature怎么保证质量
状态机
- State 状态
- Event 事件
- Action 动作
- Transition 变换