一、css的盒子模型
1.w3c盒子的高和宽仅与element有关，
2.ie则是内容+border+padding
3.关于box-sizing属性有三个可选值：
-
第一个：content-box:总宽度就是左右padding+左右margin+左右border+width（此时仅指内容）；
-
第二个：border-box （与ie一致）故总宽度为margin左右+width；
-
第三个：inherit 则是指从父类继承
4.边框border的属性：
- border-color:
- border-style:dotted(点)/dashed(虚线)/
- border-width:
- border-collapse:collapse 相邻边框合并在一起（就是俩边框合并为一个边框）
如果边框的设置影响到盒子实际大小：第一种办法是在测量盒子大小时忽略边框；另一种则是如果包含了边框，则用width-边框宽度（高度也是同理）
5.内边距padding：其实就是字和框的距离
padding：
- 一个取值：上下左右都是这个值
- 两个取值：上下 、左右
- 三个：上、左右、下
- 四个
如果盒子宽高已确定，此时再指定内边距，会影响盒子的实际大小：第一种办法让盒子的宽高减去多余内边距的大小 第二种若盒子未指定宽高则此时的padding不会撑开盒子
6.外边距：盒子与盒子之间的距离
让块级盒子居中：margin：0 auto;
行内元素、行内块元素水平居中，给其父元素添加text-align: center
外边距会出现盒子边距取大值合并的现象：解决办法：尽量只给一个盒子取margin值；也可以一致
嵌套块元素垂直外边距的坍塌：比如里面有一个margin-top，外面又嵌套了一个margin-top：则会合并形成一个margin-top：解决办法：给父级定义一个上边距或者内边距；或给父级添加overflow:hidden;display:table;position:fixed;利用伪元素给子元素前添加空元素
7.清除内外边距
padding:0;
margin:0;
二、pull和fetch区别
1.远程操控分支的权限不同：fetch可以直接更改，而pull则需要先切回本地分支再commit提交
2.拉取后的操作不同：fetch会将数据拉到本地仓库，并不会自动合并或修改当前操作；而pull从远程获得最新版本并merge到本地，会自动合并和修改当前的操作
3.使用commitID不同：fetch不变，而pull会改变：1变为2
重点：在实际使用中优选选择fetch，可以选择是否合并
git fetch（下载）+get merge（合并）代替pull
三、SPA单页面应用
1.定义：加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中。
2.优点：减少请求体积，加快相应速度，降低服务器压力，使用户获得更好的体验
3.缺点：由于使用了ajax，不利于SEO
4.实现思路：监听锚点（# 作为请求不同资源的标识，请求并展示数据）的变化，根据锚点值请求相应的数据。
5.应用：react,vue,angular,ember
6.使用vue构建SPA：
1）. 首先创建子文件hhh.vue
2).在主文件inde.vue中引入子文件import hhh from …
将子文件作为组件引入
在vue3中依然可以使用data和methods配置，但建议使用其新语法实现ref和箭头函数或function
3）到router文件夹下的index.vue对路径进行配置
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/login',
name: 'Login',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/login')
},
4）在主文件中添加（App.vue）
四、SEO优化
1.定义：就是通过挖掘搜索引擎的排名规则，对网站进行优化，使排名提前，从而获得用户。
2.代码内部优化：
-
使用关键词搜索工具，选择搜索频率较高的词
-
少用iframe标签，因为搜索引擎不会搜索到她里面的页面
-
使用规范化语义
-
图片添加alt关键字
-
使用h1-h6标签
-
尽量多分为有独立meta标签（用来描述html网页文档的属性）的网页
注意：META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。在 HTML 中 标签没有结束标签。在 XHTML 中 标签必须包含结束标签。 -
谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
-
如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后
3.外部优化：多添加多样性、排名靠前的外部链接
4.性能优化;
- 减少http请求次数：因为其要经过三次握手且并发数量限制：使用雪碧图、懒加载、打包工具（webpack）
- 首先加载css，不受js影响
- 减少重排、dom操作
- 使用浏览器缓存、CDN网络缓存、GZIp压缩
- 图标使用iconfont代替
五、BOM浏览器对象模型
1.BOM与DOM的定义
DOM是文档对象模型（document，操作页面元素），BOM是浏览器对象模型（window，浏览器交互的对象），BOM包含DOM
2.BOM包含：
-
window 浏览器实例： window 对象是 BOM 的核心，是 js 访问浏览器的接口，也是 ES 规定的 Global 全局对象
- window.open(url, name, params) **打开弹窗** - **阻止弹窗**：被定义在事件处理程序之外的，都会被阻止 - **只有窗口同源，才能访问**。可用 window.opener 来访问 opener 窗口，但对其他窗口来说，其值为null - **关闭窗口**：window.close() - **检查窗口是否被关闭:**window.closed(返回值boolean) - **弹窗位置调整** - window.moveBy(x,y) —— 将窗口相对于当前位置向右移动 x 像素，并向下移动 y 像素。允许负值（向上/向左移动） - window.moveTo(x,y) —— 将窗口移动到屏幕上的坐标 (x,y) 处 - **弹窗大小调整** - window.resizeBy(width,height) —— 根据给定的相对于当前大小的 width/height 调整窗口大小。允许负值 - window.resizeTo(width,height) —— 将窗口调整为给定的大小 - **窗口滚动**： - window.scrollBy(x,y) —— 相对于当前位置，将窗口向右滚动 x 像素，并向下滚动 y 像素。允许负值 - window.scrollTo(x,y) —— 将窗口滚动到给定坐标 (x,y) -
location 加载文档的信息和常用导航功能实例：hash标识符、host、hostname、href、origin(域名标准形式)、pathname(当前路径和文件名)、port、protocol(协议，即（http: 或 https: )、search（查询，开头为?）
- 获取参数信息 window.location.search
- 触发窗口并指定url location.assign()
- 替换页面 location.replace()（当前页面不会保存到history中）
- 重新加载 location.reload() （如果有true则是从服务器，否则是从缓存中） -
navigator 客户端标识和信息的对象实例:appCodeName代码名、appMinorVersion次级版本、appname、appversion、browserLanguage、cookieEnabled(是否启用cookie的布尔值)、onLine、cpuClass、platform(操作系统平台)、systemLanguage、userAgent、userLanguage
-
history 当前窗口建立以来的导航历史记录：
- length属性
- back函数（后退一页 等同于go(-1)）
- History.forward() 向前一页 等同于go(1)
- history.pushState(stateObj, title, url)向当前浏览器会话的历史堆栈中添加一个状态
- history.replaceState(stateObj, title, url)修改当前历史项
- window.onpopstate = funcRef -
screen 客户端窗口及屏幕信息：availHeight、availWdith屏幕高宽、availTop上边界像素点、availLeft左边界像素点、colorDepth、pixelDepth颜色分辨率、orientation屏幕转向
六、数组、对象、字符串的方法
1.数组常用方法
length长度
push()向数组末尾添加一个或多个元素，并返回长度
shift()取头，一个并返回值
unshift()加头，一个或多个
pop()删最后一个
splice()增删改
concat()数组连接，返回新数组，不会影响原数组
join()将数组所有元素，放在字符串中（分隔符进行分隔）
tostring()将数组转为字符串
reverse()反转
slice()从数组中返回指定元素
sort()排序
indexOf()返回元素在数组中第一次出现的索引值，不在则-1
lastIndexOf()出现的最后一次
forEach()：循环遍历数组参数是一个匿名函数默认返回undefined
includes() 方法用来判断一个数组是否包含一个指定的值
数组过滤操作：filter、some(找到就不会再继续执行)、every、find
格式为：数组.some/find/every/filter(item=>…)
2.对象常用方法
CharAt()返回在指定位置的字符
CharCodeAt()返回指定位置字符的Unicode编码
concat()连接字符串
indexof()检索
match()找到一个或多个的正则匹配
replace()替换与正则匹配的字符串
search()检索与正则相匹配的
slice()提取片段
split()将字符串分割为数组
toLocaleLowerCase()：把字符串转换为小写（针对特定地区）
toLocaleUpperCase()：把字符串转换为大写（针对特定地区）
toLowerCase()：把字符串转换为小写
toUpperCase()：把字符串转换为大写
substr()从起始索引提取指定数量的字符
substring()：提取字符串中两个指定的索引号之间的字符
3.字符串的常用方法
其他类型转为字符串：s1.tostring();String(s1);“”+s1
字符串分割：字符串.split(‘分隔符’，返回数组的最大长度)
很多与上文数组方法一致的不再写了
localeCompare：比较两个字符串，比较是规则是按照字母表顺序比较的
exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。例: 检索字符串中的数字
（exec是正则的方法，而match是string的方法exec与全局是否定义无关系，只匹配一个，而match则于全局相关联，当定义全局时，match将匹配所有的，当定义为非全局，两者执行结果相同）
trim()是去除字符串前后两端的空格，返回一个新的字符串，对原字符串不会有影响；
trimLeft()、trimStart()是去除字符串前端的空格；
trimRight()、trimEnd()是去除字符串后端的空格
str.split(‘.’).join(‘-’)实现替换 点替换为横杠
七、解构赋值
通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
1.等号右边是一个数组或对象，等号左边是不同的变量
[a,b,…]=[a的值，b的值,…]
2.可以给a指定默认值，即右边没值时采用左边默认的值
[a,b=7]=[1]//a为1，b为7
3.使用扩展运算符，将剩余的值均给最后的
[a,…b]=[1,2,3]//a为1，b为2和3
八、…args剩余参数（扩展运算符）
允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。剩余参数语法允许我们将一个不定数量的参数表示为一个数组。（参数不确定）
function(a, b, …theArgs) {
// …
}
九、arguments对象
- arguments 是一个对应于传递给函数的参数的类数组对象。实际上是当前函数的一个内置属性
- arguments对象是所有(非箭头)函数中都可用的局部变量.
- 可以使用arguments对象在函数中引用函数的参数.索引从0开始.
- arguments对象是一个伪数组. 除了length和索引外,不能用任何数组的方法
- arguments 对象中存储了传递的所有实参。
- 函数允许用户调用时，传递不定长（不确定个数）的参数，函数声明时，不会使用形参，而是使用arguments
- 与形参区别：参数个数固定时，依然使用形参，因为方便；参数个数不固定时，可以使用arguments
十、promise以及底层封装
Promise 是一个对象，从它可以获取异步操作的消息（pending（进行中）、fulfilled（已成功）和 rejected（已失败））
特点：不受外界影响、一旦状态改变就不会再变，以同步的流程表达
缺点：无法取消，想要抛出错误到外界就必须要回调函数、处于padding时无法判断状态
Promise 对象是一个构造函数，用来生成 Promise 实例。
通过在函数内部 return 一个 Promise 对象的实例，这样就可以使用 Promise 的属性和方法进行下一步操作了。
const promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value)
} else {
reject(error)
}
})
promise的方法：
1.Promise.prototype.then()，在异步操作执行完后，用链式调用的方式执行回调函数
2.Promise.prototype.catch() 如果异步操作抛出错误，当前 Promise 对象状态就会变为 rejected，就会调用 catch 方法指定的回调函数，处理这个错误
3.Promise.prototype.finally()不管状态如何都会执行
4.Promise.all()传入一个数组，可视为“与”关系，数组内有一个reject，则就Promise.all 的状态就会变为 reject，然后执行回调
5.Promise.race()：可看作是“或”，只要一个成了就直接执行then回调（all方法需要都执行完）
6.Promise.allSettled()接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例 。只有都返回结果，包装实例才结束。（也就是不关心结果，只关心所有异步操作是否都结束）
十一、浅拷贝深拷贝
浅拷贝就是拷贝了对象的第一层属性，如果对象的某个属性还有第二层，第三层的数据，浅拷贝是访问不到的。（string、number、boolean、null、undefiend简单类型，不受影响）Object.assign()或者let 拷贝对象={…原对象}或者用for…in循环第一层
数组、对象这类复杂类型数据结构，在栈内存里存放的只是指向堆内存中存放数据的地址。
深拷贝就是能够实现真正意义上的数组和对象的拷贝。
1.JSON.stringify()、JSON.parse()进行深拷贝（ 问题：忽略value为function, undefind, symbol）
2.$.extend( [deep ], target, object1 [, objectN ] )
3.层层递归（引用自https://www.jb51.net/article/252360.htm）
function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
//判断ojb子元素是否为对象，如果是，递归复制
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是，简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
十二、组件间的通信
1.props 2.$emits 3.expose / ref 4.attrs 5.provide / inject 6.v-model 7.vuex仓库
十三、JS数据类型。数据结构
数据结构：标识符、变量、常量、关键字
数据类型：String、Number、symbol、null、Undefined、Boolean、BigInt、Object
十四、对象和数组
数组为有序数据的集合，对象为无序数据且有名的数据集合
对象创建方法：1.var 对象=new Object() 用对象.属性=。。。进行赋值
2.var 对象={键值对}
3.var 对象={}
数组的创建方法：1.new Array();可指定个数、元素
2.[]
十五、数据类型的检测方式
typeof(无法检测null、引用数据类型中的Array，Object，Date，Regexp，都会返回小写的object)
instanceof（基本数据类型中number，string，Boolean。字面量值不可以用instanceof检测但是构造函数创建的值可以）
constructor（constructor是prototype对象上的属性，指向构造函数。根据示列对像寻找属性的顺序，如果实列队形上没有实列属性或者方法实就去原型链上寻找）
Object.prototype.toString.call()
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
