前端知识
一. CSS选择器以及选择器的优先级
1.!important
- 内联样式
// style即为内联样式
<div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div>
- ID选择器
- 类选择器/属性选择器/伪类选择器
- 元素选择器/伪元素选择器
// CSS 伪元素用于设置元素指定部分的样式。
- 关系选择器/通配符选择器（0000）
二. 跨域
a. 同源："协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
b. 同源策略限制：
- Cookie、LocalStorage、IndexedDB 等存储性内容
- DOM 节点
- AJAX 请求发送后，结果被浏览器拦截了
c. 不同源的服务之间相互请求资源，就算作“跨域”。
d. 跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
e. 解决方案：nginx反向代理
三. nginx相关知识
a. nginx：轻量级的HTTP服务器，常用于部署web服务，还可用于服务端的反向代理和负载均衡。
b. 优点：
- 支持海量高并发，理论可支持到5万并发。
- 内存消耗少 可商业化 配置简单
c. nginx.conf 文件是nginx总配置文件也是nginx读取配置的入口。
d. 相关命令：
// 先进入nginx.conf的文件目录
> nginx //直接nginx启动，前提是配好nginx环境变量
> nginx -s stop //立即停止服务
> nginx -s quit // 从容停止服务 需要进程完成当前工作后再停止
> killall nginx //直接杀死nginx进程
> nginx -s reload //重启nginx
> nginx -t //输出nginx.conf syntax is ok即表示nginx的配置文件正确
四. localhost 与 本机ip
- localhost是个域名，其指向127.0.0.1. 这个域名/ip只能允许本机访问。
- 本机 IP，你可以理解为本机有三块网卡，一块网卡叫做 loopback（这是一块虚拟网卡），另外一块网卡叫做 ethernet （这是你的有线网卡），另外一块网卡叫做 wlan（这是你的无线网卡）。你的本机 IP 是你真实网卡的 IP，具体来说有线无线各有一个，而 127.0.0.1 是那块叫做 loopback 的虚拟网卡的 IP。
- 内网，同一条宽带，同一个宽带账号下的多台设备所组成的网络。内网设备之间仅可通过对方本机ip访问。
五. vue 3.0新特性
六. 什么是BFC？BFC的布局规则是什么？如何创建BFC？BFC应用？
概念：BFC是Block Formatting Context的缩写，即块格式化上下文。BFC是CSS布局的一个概念，是一个环境，里面的元素不会影响外面的元素。
布局规则：Box是CSS布局的对象和基本单位，页面是由若干个Box组成的。元素的类型和Display属性，决定了这个Box的类型。不同类型的Box会参与到不同的Formatting Context。
创建：浮动元素display:inline-block; position:absolute;
应用：1.分属于不同的BFC时，可以预防margin重叠；2清除内部浮动；3.自适应多栏布局。
七. 闭包
闭包是指有权访问另一个函数作用域中变量的函数。
函数和函数内部能够访问到的变量的总和，就是一个闭包。
作用：间接的访问一个变量，即隐藏一个变量，通过函数去访问。
原理：JS函数的内部可以访问函数外部的变量。在JS函数中声明的变量，会成为函数的局部变量，局部变量的作用域也是局部的，只能在函数内部访问；在JS函数之外声明的变量，会成为全局变量，全局变量的作用域也是全局的。
附: 闭包通俗易懂的讲解
八. ES6常用新语法
- Array的扩展运算符(spread)：
console.log(...[1, 2, 3])
// 1 2 3
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
- 箭头函数
箭头函数this为付作用域的this，不是调用时的this；
箭头函数没有原型属性； - 新增新的数据结构Set，类似数组，但成员的值是唯一的，没有重复的值；
- 新增新的数据结构Map，本质上是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
const map = new Map([
[k1, '张三'],
['title', 'Author']
]);
map.size // 2
map.has(k1) // true
map.get('title') // "张三"
map.set('title', '老虎')
- 新增原始数据类型
Symbol，表示独一无二的值。它是Javascript语言的第七种数据类型，前六种是：undefined 、null 、 Boolean 、 String 、 Number 、 Object.
// 常用使用方式
// 1. 做唯一的值
const log = {};
log.levels = {
DEBUG: Symbol('debug'),
INFO: Symbol('info'),
WARN: Symbol('warn')
};
console.log(log.levels.DEBUG, 'debug message');
// 2. 做唯一的常量
const COLOR_RED = Symbol();
const COLOR_GREEN = Symbol();
function getComplement(color) {
switch (color) {
case COLOR_RED:
return COLOR_GREEN;
case COLOR_GREEN:
return COLOR_RED;
default:
throw new Error('Undefined color');
}
}
- const定义常量，ket定义变量，弃用var。具有块级作用域。
九. 原型、原型链
原型：对象中固有的_proto_属性，该属性指向对象的prototype原型属性。
原型链：当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是Object.prototype所以这就是我们新建的对象为什么能够使用toString()等方法的原因。
特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
十. this指向
this对象是执行上下文中的一个属性，它指向最后一次调用这个方法的对象，在全局函数中，this等于window。
十一. typeod、instanceof
-
typeof主要用来判断数据类型，返回值有string、boolean number function object undefine，常用typeof xxx === undefined表示已申明但未赋值的变量； -
instanceof判断对象是谁的实例； -
null表示空对象，undefined表示已在作用域中声明但未赋值的变量。
