闭包的输出题
function inc(i){ let value = 0; var Increment = function(){ value += i; console.log(value); const message = `current value is ${value}`; return function(){ console.log(message); } } return Increment; } let log = inc(1);//返回Increment函数 let Inc = inc(1); log();//调用函数，外部value =0;输出1 log();//2 log();//3 Inc();//1 let func = Inc();//value=2 func();//current value is 2
meta标签的属性，有什么用？
表示那些不能由其它 HTML 元相关（meta-related）元素
（base,link,script,style,title）之一表示的任何元数据信息。
meta 元素定义的元数据的类型包括以下几种：
name
如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称（keyword， description），content 作为元数据的值。
这个一般设置一些关键字，有利于seo。
http-equiv
如果设置了http-equiv属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
content-security-policy它允许页面作者定义当前页的内容策略(csp)。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
content-type如果使用这个属性，其值必须是"text/html; charset=utf-8"。注意：该属性只能用于 MIME type 为text/html的文档，不能用于 MIME 类型为 XML 的文档。
default-style设置默认CSS 样式表组的名称。
x-ua-compatible如果指定，则content属性必须具有值 "IE=edge"。用户代理必须忽略此指示。
refresh这个属性指定：
- 如果
content只包含一个正整数，则为重新载入页面的时间间隔 (秒)；这里他会连续刷新。
- 如果
content包含一个正整数，并且后面跟着字符串 ';url=' 和一个合法的 URL，则是重定向到指定链接的时间间隔 (秒)。这里只会跳转一次。
charset
- 如果设置了
charset属性，meta元素是一个字符集声明，告诉文档使用哪种字符编码。 只能设置"utf-8"。
itemprop
- 如果设置了
itemprop属性，meta元素提供用户定义的元数据。
float与fixed,absolute区别
相同点
- 设置后，都会使行内元素支持宽高。
- 都脱离文档流，不占原来的位置。
- 块元素不设置宽度，默认由内容撑开。 不同点
- float主要是可以让块级元素可以在同一行排列。fixed, absolute主要是对元素进行定位，移动元素的位置。
- fixed不会随着视口滚动而移动。但是如果父元素设置
transform,perspective或filter不为none时，那么它将相对于该父元素定位。
- absolute如果不设置四个方向的偏移量，那么后者将覆盖在前者的上面。
- float覆盖的元素中的文字不会被覆盖。但是absolute，fixed会全部覆盖元素的内容。
- absolute, fixed可以通过
z-index来改变层叠层级。
实现一个next的斐波拉切数列
// 题目 function fib(){ return xxx } let a = fib() console.log(a.next()) //0 console.log(a.next()) //1 console.log(a.next()) //1 console.log(a.next()) //2 console.log(a.next()) //3 console.log(a.next()) //5 console.log(a.next()) //8 console.log(a.next()) //13
实现
// 通过迭代器实现 function* fib() { let fibArr = [0, 1] let i = 0 while (true) { fibArr[i + 2] = fibArr[i] + fibArr[i + 1] yield fibArr[i] i++ } }
// 这个会有问题，输出的是0， 1， 2， 3 function fib() { let prev = 0 let nex = 0 let total = 0 // let fibArr = [0, 1]; fibArr[i] = fibArr[i - 2] + fibArr[i - 1]; i = 2开始 return { next: () => { total = nex + prev prev = nex nex = nex == 0 ? 1 : total if (prev == 1) { return 1 } return total } } }
keep-alive实现的原理
keep-alive 是 Vue.js 的一个 内置组件。它能够将不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实 DOM 中，也不会出现在父组件链中。简单的说，keep-alive用于保存组件的渲染状态，避免组件反复创建和渲染，有效提升系统性能。
max属性来表明最大的缓存数，如果超过了最大缓存数，那么就使用LRU算法，删除最近未使用的组件，然后加入新的组件。
vue中设置了一个缓存容器，将组件放在这个缓存容器中，而不是将其销毁，在创建。而是直接在容器中拿取。并通过isDeactivated来判断组件是否活跃。
一些不常用api的解释
URLSearchParams
解析一个url的query参数，返回一个map对象。所以我们可以通过Object.fromEntries()将其转为一个对象
const params = new URLSearchParams('name=zh&age=20') console.log(params) // URLSearchParams { 'name' => 'zh', 'age' => '20' } const paramsObj = Object.fromEntries(params) console.log(paramsObj) //{ name: 'zh', age: '20' }
URL
解析一个完整的url。返回一个对象。
const url = 'http://localhost:8080/detail?id=1#header-8' const params = new URL(url) console.log(params) URL { href: 'http://localhost:8080/detail?id=1#header-8', origin: 'http://localhost:8080', protocol: 'http:', username: '', password: '', host: 'localhost:8080', hostname: 'localhost', port: '8080', pathname: '/detail', search: '?id=1', searchParams: URLSearchParams { 'id' => '1' }, hash: '#header-8' }
多路复用中的流和帧
- 帧是乱序收发的，但是他们只要有相同的流ID，那么他们就属于相同的流。
- 在这个流中，帧不是乱序的，而是有着严格的先后顺序的。
- 流就相当于http的一次请求应答，他是一个二进制帧的双向传输序列。
- 帧首部的流标识符标识着流ID。接收方在乱序的帧里识别出相同的ID的帧，按顺序组装起来形成虚拟的流。
MVC, MVP, MVVM
- MVPMVP是单词Model View Presenter的首字母的缩写，分别表示数据层、视图层、发布层，它是MVC架构的一种演变。
MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，presenter就相当于中间人。
因为 View 层与 Model 层没有关系，所以 View 层可以抽离出来做成组件，在复用性上比 MVC 模型好很多。而在MVC中View会直接从Model中读取数据而不是通过 Controller。
- MVC 分别表示：数据模型层，视图层，控制层。这种设计模式一般在后端用的比较多。
- MVVM M: 数据模型层，V: 视图层，VM: vue。数据驱动视图的变化。
面向对象的理解
面向过程：分析问题所需要的步骤，然后用函数把这些步骤一一实现，使用的时候一个个一次调用就可以了。
面向对象：把解决的问题按照一定规则划分为多个独立的对象，然后通过调用对象的方法来解决问题。
面向对象的特点：封装性，继承性，多态性。
