前端-初级工程师技术点

一、技能

1.对Promise的理解、优缺点

Promise基本特性

Promise有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)

用法

对象接受一个回调函数作为参数（成功时的回调resolve和失败时的回调reject）
.then方法返回一个新的Promise实例
.catch方法返回一个新的Promise实例
.finally()指定不管 Promise 对象最后状态如何，都会执行的操作
Promise.resolve()将现有对象转为Promise对象将该对象转为Promise对象并立即执行then方法；如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象
Promise.reject()返回一个新的Promise对象，状态为rejected

构造函数方法

1.Promise.all()方法：

将多个Promise实例，包装成一个新的Promise实例
只要有一个实例触发catch方法，都会触发Promise.all()方法返回的新的实例的catch方法
某个实例本身调用了catch方法，将不会触发Promise.all()方法返回的新实例的catch方法

2.race() ：有一个实例率先改变状态，p的状态就跟着改变

Promise.race()：方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例

3.allSettled()：只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束

Promise优点

解决了回调地狱的问题

链式操作减低了编码难度
代码可读性明显增强

Promise缺点

无法取消Promise
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
当处于Pending状态时，不知道状态

使用场景

通过`all()`实现多个请求合并在一起，汇总所有请求结果

通过`race`可以设置图片请求超时

Promise.race([requestImg(), timeout()])timeout = setTimeout(function(){reject('图片请求超时');}, 5000);

2.async await的理解？

会自动将常规函数转换成Promise，返回值也是一个Promise对象
只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数
async函数用来修饰，表示函数里面可能会有异步方法。
await关键字只能用在async` 函数中，不能用在其他函数中。
异步函数内部可以使用await
await等待成功的回调，try捕捉失败的回调，在catch里执行失败回调
场景：睡眠函数

3.Promise和async await区别

异步代码同步化，使异步代码更易于编写和阅读
await等待成功的回调，try捕捉失败的回调，在catch里执行失败回调 promse.catch捕捉失败
Promise有很多并行神器，比如Promise.all\Promise.race等。这些是async没法搞定的
Promise是ES6，而async是ES7

4.H5新特性

(1)`Canvas绘图、SVG绘图
(2)地理定位
(3)Web Worker：多线程js
(4)Web Storage
(5)语义化标签 header
(6)video audio音频
(7)增强型表单
(8)触摸事情api
(9)Web Socket 基于TCP的一种新的网络协议支持服务器主动向客户端发送信息
(10)自定义属性data-id

5.CSS3语法

边框：border-radius:圆角 border-image：图标边框

盒子：box-shadow：盒子阴影

背景：background：background-size50%背景尺寸

文字：word-wrap text-shadow:文字阴影

媒体查询：media

渐变：linear-gradient

动画：animation

过渡：tranform translate rotate scale

布局：flex grid

滤镜：(filter)

颜色函数(rgba/hsl/hsla)

计算高度：calc

6.js的数据类型

es5：number string boolean undefined null object(function array object)

es6：symbol

es10:biglnt

基本类型：7个

复杂类型：object

typeof符合类型(null换成function)：
number string boolean undefined object symbol biglnt function

7.less和sass的区别

less使用@,scss使用$

@width:100px

width:@width

less在客户端渲染 sass在服务端渲染

sass条件语句

$num:1;
h3{@if $num == 1 { color: #ee78da;}@else if $num==2{color: #65e3e7;}
}

8.响应式布局

media+流式布局
@media (max-width: 576px){
//使用em或者百分比
}

9.ES6+的语法

ES6+详细链接

1.ES6 模块化（import 、export）
2.数组方法**
3.字符串方法
4.proxy
5.声明变量let const
6.扩展运算符…
7.箭头函数
8.模板字符
9.symbol：
10.对象 Object.assign()
11.数据结构 set和map
12.for of遍历数组
13.class构造函数实例

9.ajax和axios区别

区别
ajax：ajax本身是针对MVC的编程。
axios：axios符合现在前端MVVM的浪潮。

jquery对ajax的封装。
axios通过Promise实现了对ajax的封装；
ajax技术实现了局部数据的刷新

axios的主要特点

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据

10.Git版本管理

git add === 提交工作区代码到暂存区

git commit -m === 提交暂存区代码到本地仓库

git status === 查看仓库状态

git push origin === 提交本地仓库（历史记录）区的提交记录到远程仓库

git pull ===下拉代码并且合并

git fetch === 下拉代码

git clone === 克隆代码

git log === 查看提交的历史记录

git branch === 创建分支

git checkout === 切换分支

git reset 日志=== 回滚

git branch -d <名称> === 删除分支

git merge === 合并分支

11.TypeScript

类型推断：ts中没有批注变量类型会自动推断变量的类型 infer
接口约束：ts中用接口来定义对象类型 interface约束，extends继承
extends继承:infer推断实施class
泛型编程：写代码时使用一些以后才指定的类型
类型收缩：as
type别名：可配合逻辑符|、& 或者 extends使用

1.extends继承父类的方法和属性
和class一起使用

class Animal {sayHello(){console.log(`Hello, I am a ${this.kind}!`);}
}class Dog extends Animal {constructor(kind){super(kind)}bark(){console.log('wang wang')}
}const dog = new Dog('dog');
dog.sayHello(); //  Hello, I am a dog!

2.interface 约束类型类型

interface
interface Animal {kind: string;}

1.2extends继承类型

 interface Dog extends Animal {bark(): void;}

3.type=extends三元判断继承类型

推断是否分配给另一个类型  type Bool = Duck extends Human ? 'yes' : 'no'; // Bool => 'yes'

3.2type别名

type x1=y&x

4.非空断言符的使用

root2!.style.color = 'red';
？可选链

12.正则的使用

正则的创建

let reg = new RegExp('规则','匹配模式')
// 或者
let reg = /a/

特定规则

^：匹配开头，若放在原子表里，表示取反
$：匹配结尾，多行匹配中匹配行末尾

\d：一位数字

\s：表示空白符

\w：数字、字母和下划线

\r：回车符

数量限定

* 匹配特定规则出现任意次

+ 匹配特定规则出现至少1次

? 匹配特定规则现出1或者0次（前面的字符可有可无）

方法

str.replace

13.webpack、Vite等打包工具

区别：

webpack先打包，再启动开发服务器，请求服务器时直接给予打包后的结果；
vite直接启动开发服务器，请求哪个模块再对哪个模块进行实时编译；

为什么用：

浏览器不认识（es6语法、.jsx/.vue文件）
使用webpack打包工具，实现代码的转换和优化的过程；
vite 主要用于开发模式，它只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理；
底层实现上，Vite 是基于 esbuild 预构建依赖的。当声明一个script标签类型为module时，浏览器将对其内部的import引用发起HTTP请求获取模块内容；
Vite 劫持了这些请求，并在后端进行相应的处理（如处理.ts文件为.js文件），然后再返回给浏览器；
浏览器只对用到的模块发起 HTTP 请求，Vite只编译浏览器http,也就实现了所谓的按需加载。

打包：

npm run start：会去当前运行的目录下找到 package.json中的script下的start` 指令并且执行

应用：

vue-cli：可以用来快速搭建一个项目结构：

可以开启一个临时服务器

可以自动更新代码

支持文件的模块化

webpack 有什么用：

就是 vue-cli 实现的底层的原理

vue-cli 搭建的项目有哪些功能：

可以运行为一个服务器
支持文件的模块化
可以进行实时更新
代码修改之后，保存，页面会自动更新
可以解析 css 文件
import ‘xx.css’
可以解析 .vue 文件

webpack 怎么用

用法比较复杂
- 配置文件
  - 功能集合
- 配置项
  - 可配置的信息
- loader
  - 打包的第三方包
- plugin
  - 扩展功能
npm init -y 生成 package.json 文件
安装 webpack npm install --save-dev webpack@4.44.2
配置 `package.json
{
“scripts”: {
“start”: “webpack ./要打包的文件名”
}
}
打包：npm run start

loader - 作用

webpack.config.js

module.export = {module: {rules: [{test: /\.less$/,use: ['style-loader','css-loader',]}]}

Plugin

插件 - webpack-dev-server
可以开启一个服务器，具有实时更新的功能

1.0 下载插件
npm install --save-dev webpack-dev-server
2.0 配置插件（webpack.config.js）
module.exports = {devServer: {contentBase: './dist'//打包目录hot: true, // 开启模块的热替换},
}
3.0 配置指令：(package.json)
{"scripts": {"start": "webpack --config webpack.config.js","serve": "webpack-dev-server --open"}
}
4.0 开启服务器：npm run serve

14.常见Web性能优化

减少DOM操作优化js代码结构
路由懒加载
图片压缩
合理进行http缓存

15.HTTP

http状态码

HTTP 状态码分为 5 大类：

1XX：表示消息状态码；
2XX：表示成功状态码；
3XX：表示重定向状态码；
4XX：表示客户端错误状态码；
5XX：表示服务端错误状态码。

100

200

Success（成功状态码）：请求处理完毕

204 (No Content)：服务器成功处理，但未返回内容。
表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；
206 (Patial Content)：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容。

300：

Redirection（重定向状态码）：需要附加操作完成请求

301：永久重定向
302：临时重定向
303 (See Other)：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；
304Not Modified 未修改。所请求的资源未修改，通过提供一个头信息返回在指定日期之后修改的资源
304 (Not Modified)：表示客户端发送附带条件（是指采用GET方法的请求报文中包含首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；
307 (Temporary Redirect)：临时重定向，与303有着相同的含义，307会遵照浏览器标
准不会从POST变成GET；（不同浏览器可能会出现不同的情况）；

400：

Client Error（客户端错误状态码）：服务器无法处理请求

401 (Unauthorized)：未经许可，需要通过HTTP认证；
403 (Forbidden)：服务器拒绝该次访问（访问权限出现问题）
403Forbidden 拒绝执行此请求
404 Not Found 页面找不到
405：请求的方法类型不支持；

500：服务器内部出错。

503 ServerUnavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；

method

GET:请求数据
POST:修改数据
HEAD ：与 GET 类似。响应中只返回首部，不返回实体的主体部分
PUT ：让服务器用请求的主体部分来创建一个由所请求的 URL 命名的新文档，或者，如果那个 URL 已经存在的话，就用干这个主体替代它。
OPTIONS ：查询服务器支持哪些方法
DELETE 删除请求 URL 指定的资源
Http和Https的区别？

HTTP与HTTPS的区别？
1.安全性

http不加密 https加密

2.端口不同

http:80 https:443

3 .证书不同

http:免费申请

https:申请ca证书通常要缴费

4.连接方式不同

http很简单，无状态
https:SSL+HTTP可加密身份认证的网络协议

16.Node.js

作用：

NodeJS可以实现服务器的搭建，实现请求的接收转发
NodeJS可以编写命令行工具，使用命令来实现大量复杂操作
了解后端开发和熟悉Node环境

二.技术栈

1.微信小程序

小程序常用生命周期

wx.onError(function listener) ：监听小程序错误事件。如脚本错误或 API 调用报错等。该事件与 App.onError 的回调时机与参数一致。

路由跳转api

wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.reLaunch(Object object) 关闭所有页面，打开到应用内的某个页面

wx.navigateBack(Object object) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

页面交互

wx.showToast(Object object) 显示消息提示框

wx.showModal(Object object) 显示模态对话框

wx.showLoading(Object object) 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

wx.hideToast(Object object) 隐藏消息提示框

wx.hideLoading(Object object) 隐藏 loading 提示框

2.uni-app

数据请求 uni.request

提示：uni.showToast

获取系统信息：uni.getSystemInfoSync();

模态框：uni.showModal({

跳转：uni.navigateTo、uni.reLaunch({ url })、uni.navigateBack()、uni.switchTab({ url })

loading:uni.showLoading()

获取本地定位： uni.getLocation

uni.uploadFile() // 上传文件

uni.requestPayment( // 调起支付

3.React

生命周期

componentWillMount() – 在渲染之前执行，在客户端和服务器端都会执行。

componentDidMount() – 仅在第一次渲染后在客户端执行。

componentWillReceiveProps() – 当从父类接收到 props 并且在调用另一个渲染器之前调用。

shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true 否则返回 false。默认情况下，它返回 false。

componentWillUpdate() – 在 DOM 中进行渲染之前调用。

componentDidUpdate() – 在渲染发生后立即调用。

componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。

hook

useState Hook:响应式Api
useEffect Hook:模仿生命周期
useContext：实现跨组件间的数据传输

MyContext =createContext()

<MyContext.Provider value={{xx:xx}}>
useReducer：比较复杂的响应式APi

reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的。

 const [count, dispath] = useReducer((state,action)=> {switch(action){case 'add':return state + 1;case 'sub':return state - 1;default:return state;}}, 0);

useCallback：监听

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

useMemo：监听

传入 useMemo 的函数会在渲染期间执行。useMemo 是拿来保持一个对象引用不变的

useRef：获取Dom
自定义Hook

三.项目

1 .创建项目

条件：先有node环境、脚手架创建/vite创建

脚手架创建

脚手架安装：npm i -g @vue/cli
创建项目 ：vue create 项目名
选择版本：选择vue2/vue3版本

vite创建

npm create vite@latest
yarn create vite

四.底层原理

1.MVVM

ViewModel 层，它就像是一个中转站，负责转换 Model 中的数据对象，
向上与视图层进行双向数据绑定
向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。
View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层。

五、开发

1.工程化

模块化、组件化、规范化和自动化

模块化

JS 模块化：CommonJS、ES6 Module

CSS 模块化：Sass、Less。比如 Vue 中的 style scoped

资源模块化：图片

前端-初级工程师掌握技术点相关推荐

Web前端开发工程师必备技术列表
WEB标准,Web前端开发工程师必备技术列表想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫.对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接& ...
WEB标准,Web前端开发工程师必备技术列表
想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫.对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的.我结合自己的团队配备, ...
你会的还只有初级工程师的技术吗？灵魂拷问
开头 Android开发,假如开始没有任何的开发经验的话, 千万不要着急,不要想着在短时间内就把一个语言学习好, 因为你之前没有任何的学习经验, 在这个过程中需要有耐心地学习完JAVA的基础知识, 然 ...
你会的还只有初级工程师的技术吗？实战篇
开头最近很多网友反馈:自己从各处弄来的资料,过于杂乱.零散.碎片化,看得时候觉得挺有用的,但过个半天,啥都记不起来了.其实,这就是缺少系统化学习的后果. 为了提高大家的学习效率,帮大家能快速掌握An ...
数学建模——运输问题，你会的还只有初级工程师的技术吗
罚数向量: [0.0, 1.0, 1.0, 2.0, 5.0, 1.0, 3.0] 最大罚数: 5.0 元素序号: 5 对第 2 列进行操作: [12. 10. 5.] 最小成本所在行索引: 2 本次 ...
一名优秀的Web前端开发工程师的成长之路：如何学习前端开发知识以及书籍推荐
我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 何为:前端工程师? 前端工程师 ...
怎样成长为一个优秀的 Web 前端开发工程师？
链接:http://www.zhihu.com/question/19554845/answer/16755476 来源:知乎首先,优秀的Web前端开发工程师要在知识体系上既要有广度和深度!做到这两 ...
如何学习前端知识？优秀的前端开发工程师应该具备什么条件？
Web前端开发技术主要包括三个要素:html.css和JavaScript! 如何学习前端知识? 我们生活在一个充满规则的宇宙里面.社会秩序按照规则运行,计算机语言几乎全部是规则的集合.计算机前辈们定 ...
初级Web前端工程师是什么？初级Web前端工程师的技术体系有哪些？
今天小编要跟大家分享的文章是关于初级Web前端工程师是什么?初级Web前端工程师的技术体系有哪些?本篇文章为大家整理出来了Web前端工程师初级阶段需要掌握的内容,很全面,希望大家好好阅读,看看自己掌握 ...

前端-初级工程师掌握技术点