知识点汇总

html

css

水平垂直居中

块元素

• 弹性布局：flex

• 定位：父元素position：relative
  1、绝对定位 + transform，translateX(-100px) translateY(-100px)；
  2、绝对定位 + margin；
  3、绝对定位 + calc；

• grid：和flex一样

• table

行内元素

• 父元素设置
  text-align
  line-height
• 父元素设置
  text-align: center;
  display: table-cell;
  vertical-align: middle;

父元素宽高不固定，画一个正方形子元素

• 父元素宽高自适应，不需要设置高度，子元素设置宽多少，padding-bottom就设置多少

画三角形

• 宽高为0，设置border，将不需要的其他三侧border-color设置为transparent

javascript

继承

• 原型链继承
  缺点：共享原型对象，所以多个继承的类之间无法独立
• 构造函数继承（call）
  缺点：无法继承原型链上的方法，会报错
• 组合继承
  缺点：会多次调用父类，产生高额的性能开销
• 原型式继承：
• 寄生式继承：
• 寄生组合继承：
  1、先改变子类的this指向，让其拥有父类的属性，但是访问不到原型上的方法
  2、创建一个新的对象，将父类的原型挂载到新对象的__proto__上，
  即obj = boject.create（parent.prototype）
  3、将新对象的的构造函数指向子类
  4、将子类的原型指向新对象

function Son(age){
    Person.call(this,age)
}
function inheritPrototype(son,person){
    var subpro = Object.create(person.prototype)
    subpro.constructor = son
    son.prototype = subpro
}
inheritPrototype(Son,Person)
var instances = new Son(23)
1
2
3
4
5
6
7
8
9
10

vue

双向数据绑定

vue2：

• 采用defineProperty对数据进行遍历劫持
• compiler模板，解析对应节点，为各个劫持到的属性添加getter和setter方法，并在get的时候标记目标属性，通过dep和watcher的形式收集依赖，，当数据改变的时候通过订阅者去触发对应监听回调
• 通过update更新视图

缺点：
1、无法监听数组的变化，所以在vue底层改写了数组的几种原生方法
2、不能监听没有定义的属性
3、删除对象属性和添加无法响应式，需要借助$set

vue3：

• 采用Proxy对数据进行监听
• 对数据进行代理，而不用改变原始数据

proxy:我们可以通过 Proxy 创建对于原始对象的代理对象，从而在代理对象中使用 Reflect 达到对于 JavaScript
原始操作的拦截

相比vue2优点：
1、可以监听整个对象，而不是单个属性
2、可以监听数组的变化

web相关

web安全

SQL注入：

• 原理：通过把sql命令插入到表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行的sql命令
• 解决：
  1、对用户的输入进行校验，可以用正则，限制长度，对单双引号和‘–’进行转换
  2、参数化sql
  3、为每个使用者提供单独权限的数据库连接
  4、私密信息加密

XSS:

• 原理：往web页面插入恶意html或js代码
• 解决：
  1、对用户输入的进行转码
  2、对"<" ">"等特殊符号做过滤
  3、尽量采用post提交

CSRF:

• 原理：代替用户完成指定的动作
• 解决：
  1、设置ip不可用于外部
  2、通过验证码

XSS和CSRF的区别：XSS是获取信息，不需要知道其他数据，而XSRF书需要知道其他数据来代替用户完成操作

HTTP和HTTPS
HTTP协议通常承载于TCP协议之上
而HTTPS是在HTTP和TCP之间添加了一个安全协议层（SSL或TSL）

工具

commonJs和ES6加载

commonJs

commonjs通过module.exports或者exports来达到暴露对象

let { stat, readFile } = require('fs');
// 等同于：
let _fs = require("fs");
stat = _fs.stat;
readFile = _fs.readFile;
1
2
3
4
5

上面的代码实质是加载整个fs模块，然后去读取其中两个方法，这种加载行为是“运行时加载”，因为只有运行时才能获取对应对象

ES6

es6模块不是对象，而是通过export命令输出代码，通过import导入应用

import { stat , readFile } from "fs"
1

这情况就是在fs里面加载其中三个方法，其他不加载，属于静态加载，可以在编译时完成模块加载，效率要比commonJs高