-
map
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map -
promise
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
-
diff算法
-
react生命周期
1.初始化阶段
- constructor:构造函数,最先被执行,通常在构造函数中初始化 state 对象或者给自定义方法绑定 this
- getDerivedStateFromProps:static
getDerivedStateFromProps(nextProps, prevState),这是个静态方法,当我们接收到新的属性想去修改我们 state,可以使用getDerivedStateFromProps。- render:
render 函数是个纯函数,只返回需要渲染的东西,不应该包含其他的业务逻辑,可以返回原生 DOM、React 组件、Fragment、Portals、字符串和数字等内容。- componentDidMount:组件装载之后调用,此时我们可以获取到DOM 节点并操作,比如对 Canvas、SVG 等操作。服务器请求、订阅都可以写这个里面,但是记得在componentWillUnmount 中取消订阅。
2.运行中阶段
- getDerivedStateFromProps:此方法在更新阶段也会被调用。
- shouldComponentUpdate:
shouldComponentUpdate(nextProps,nextState),有两个参数,表示新的属性和变化之后的 state,返回一个布尔值。
如果是 true 表示会触发重新渲染,false表示不会触发重新渲染,默认返回 true。可以利用这个生命周期来优化 React 程序性能。- render:同挂载阶段 render。
- getSnapshotBeforeUpdate:
getSnapshotBeforeUpdate(prevProps, prevState),这个方法会在 render 之后,componentDidUpdate 之前调用,有两个参数,表示之前属性和之前的 state。这个函数有一个返回值,会作为第三个参数传给 componentDidUpdate,如果不需要返回值,可以返回 null,这个方法必须和 componentDidUpdate 配合使用。- componentDidUpdate:
componentDidUpdate(prevProps, prevState, snapshot),在 getSnapshotBeforeUpdate 之后调用,有三个参数,表示之前的 props,之前的state,以及 snapshot。参数 snapshot getSnapshotBeforeUpdate
返回的,如果触发某些回调函数时需要用到 DOM 元素的状态,则将对比或者计算过程迁移到getSnapshotBeforeUpdate,然后在 componentDidUpdate 中统一触发回调或者更新状态。
3.销毁阶段
当组件被销毁之前的一刹那,会触发componentWillUnmount,做一些善后工作 比如说你切换路由的时候 上一个路由还在请求数据 但是你已经销毁了那个组件 这个时候就会警告你不能对已经已经销毁的组件获取数据,所以就可以设置一个开关 当销毁的时候停止获取数据
4.错误处理
当渲染过程,生命周期,或子组件的构造函数中抛出错误时,会调用如下方法:
static getDerivedStateFromError()
componentDidCatch()
- 原型链
原型
①所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性,属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype
原型链
当访问一个对象的某个属性时,会先在这个对象本身属性上查找,
如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,
如果还没有找到就会再在构造函数的prototype的__proto__中查找,
这样一层一层向上查找就会形成一个链式结构,我们称为原型链。
- es6
菜鸟教程 - w3c
1、W3C标准不是一个标准,而是一系列标准的集合,包含三部分的标准:结构标准、表现标准和动作标准。与结构标准对应的代表语言是HTML,与表现标准对应的代表语言是CSS,与动作标准对应的代表语言是JavaScript。
2、HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
3、CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
4、JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单或鼠标滑过表格的背景颜色改变。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
-
ssr流程
server side rending
服务器渲染,有服务器进行渲染并返回给客户端渲染完成的html
优点:超快的响应速度,易做seo
缺点:增加服务器压力 -
vue websocket打包
-
webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图 (dependency graph) ,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle 。
webpack 主要有四个核心概念:
- 入口 (entry)
- 输出 (output)
- loader
- 插件 (plugins)
- spa单页面
单页面web应用,通俗易懂就是整个网站由一个html构成,
优点:服务器压力小,响应速度快
缺点:难以进行搜索引擎优化,首屏打开速度很慢,因为需要一次性加载多种依赖包
- object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
object.defineProperty
-
css布局
-
冒泡
-
html5, css3新特性
浏览器渲染的过程主要包括以下五步:
- 浏览器将获取的HTML文档解析成DOM树。
- 处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。
- 将DOM和CSSOM合并为渲染树(rendering tree),代表一系列将被渲染的对象。
- 渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。
- 将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting。
需要注意的是,以上五个步骤并不一定一次性顺序完成,比如DOM或CSSOM被修改时,亦或是哪个过程会重复执行,这样才能计算出哪些像素需要在屏幕上进行重新渲染。而在实际情况中,JavaScript和CSS的某些操作往往会多次修改DOM或者CSSO
null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
搜索引擎优化(search engine optimization)简称SEO,是一种透过了解搜索引擎的运作规则来调整网站,以提高目的网站在有关搜索引擎内排名的方式
-
v-model原理
v-model的实现原理
v-model其实是个语法糖,它实际上是做了两步动作:
1、绑定数据value
2、触发输入事件input -
js改变样式宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.w1 {
width: 100px;
height: 100px;
background: orange;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="w1"></div>
<div>
<button id="btn">click me</button>
<button id="btn2" onclick="removeStyle()">dont click me</button>
</div>
<script>
var s = document.getElementById("btn");
function editwidth() {
console.log(1);
let obj = document.querySelector('.w1');
obj.style.width = "200px";
obj.style.height = "200px";
console.log(2);
};
function removeStyle() {
console.log(3);
let obj = document.querySelector('.w1');
obj.style.width = "100px";
obj.style.height = "100px";
console.log(4);
};
s.onclick = editwidth;
s.addEventListener('click', editwidth);
</script>
</body>
</html>
- 页面加载时,浏览器把html代码解析成1个dom树,把所有样式(用户定义的CSS和用户代理)解析成样式结构体
- DOM Tree 和样式结构体组合后构建render tree
- 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)
- 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
(1) 创建一个新对象
(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象)
(3) 执行构造函数中的代码(为这个新对象添加属性
(4) 返回新对象。
ie: 不包含margin,
标准:包含margin
为什么要语义化?
代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构
有利于SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息
提升用户体验: 例如title、alt可以用于解释名称或者解释图片信息,以及label标签的灵活运用。
便于团队开发和维护: 语义化使得代码更具有可读性,让其他开发人员更加理解你的html结构,减少差异化。
方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。
-
websocket,webworker
-
array.some filter map foreach
-
let const var
-
字符串去空格
-
react特性、生命周期、优势
-
数据类型
请注意:JS的数据类型有8种。
在ES5的时候,我们认知的数据类型确实是 6种:Number、String、Boolean、undefined、object、Null。
ES6 中新增了一种 Symbol 。这种类型的对象永不相等,即始创建的时候传入相同的值,可以解决属性名冲突的问题,做为标记。
谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。(但是很多人不把这个做为一个类型)。
-
react和vue的区别
整体功能相似,组件化,设计思路不同。
react整体是函数式思想,把组件设计成纯组件,单项数据流。React 数据经常变化,构建大型项目内复杂组件。
vue:更小更灵活的开发SPA单页面程序的简单化组件。
React :创建可重用且有吸引力的UI组件的库
Vue:开源js框架.可以用作Web应用程序框架,允许构建可重用。可以随时添加组件
React :只有css可重用,虚报DOM.
Reaet.native成熟且泛使用的本机渲染应用程序平台.可用作开发SPA单页面式移动应用程序的基础、有状态所姐件,虚拟dom,jsx。超越html的架构. CRA。
Vue:重用性更高,基于虚拟DOM的HTML模板: vue-cli将应用程序划分成小可重用独立组件、路由和集成
React和Vue的选择
Vue:更小更快更灵适,需要丰富的html模板,最新文档和最简单的语法.
React:构建的移动应用程序,构建大型应用程序,轻量级易于版本迁移。 -
深拷贝、浅拷贝
深拷贝只是增加一个指针执行已有的内存地址,会随之改变,深拷贝增加指针并申请新内存,使指针指向新内存。浅拷贝是指被复制的内存地址,深拷贝是开辟一块新的内存地址,用于复制对象。
浅拷贝实现方法:1.使用递归的方式,2.用了json对象,3.用了jq的$extend方法实现 -
对象继承
包括原型链继承,组合继承,构造函数继承,寄生式组合继承 -
node,express启动服务
//1.创建名为app.js的文件
mkdir myapp
//2.使用 npm init 命令为应用程序创建 package.json 文件
npm init
//3.安装express
npm install express --save
//4.在 myapp 目录中,创建名为 app.js 的文件,然后添加以下代码:
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
- vuex
vuex主要包括
state:用于存放全局变量,
getters:衍生状态,类似于组建中的computed,
mutations:唯一可以更改状态的方法,所有更改数据操作都需要经过mutaions,且只能进行同步的状态修改,
actions:使所有异步更改状态的集中,主要用于区分mutations,利于状态的维护,state和getters都是响应式的,当某一个状态改变时,能够驱动试图发生相应的改变
显然 v-for优先级高于v-if;
两者同级出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免的浪费性能;
避免出现这种情况,可在外层嵌套一层进行v-if判断,然后在内部进行v-for循环;
如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项,减少dom操作;
- v-if, v-show区别
显示来看v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;而v-show 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。
- http缓存机制
- 原型链
- echarts地图再作业
- uni-app打包小程序只打包了微信小程序吗
- react用的哪个版本
- 未知元素width, height,居中元素的几种方法
- require和import的区别
- Watch/computed 在哪个周期创建完成,有什么区别
- active/disactive
- query/params
- 回流重绘
- 数据类型,判断数据类型的方法
- Js递归的理解
- Spa优缺点
- 强缓存,协商缓存