前端基础知识（名词解释）

火锅国大侠

于 2021-09-18 17:20:42 发布

阅读量3.2k

点赞数 2

分类专栏：笔记前端文章标签： http javascript node.js 前端

本文链接：https://blog.csdn.net/txt666999999/article/details/120371123

版权

笔记同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

1、W3C

万维网联盟

2、MDN(Mozilla Developer Network)

是一个完整的学习平台，你可以在这里深入学习Web技术以及能够驱动Web的软件；

3、CDN（Content Delivery Network）

使用户可以就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度；

不使用CDN时的域名转IP地址的过程；
使用CDN时的域名转IP地址的过程；

最终域名解析权在CANME指向的CDN专用DNS服务器；

DNS服务器将全局负载均衡设备的IP返回给用户，

再次进行解析域名的类似过程：用户-全局负载均衡设备-区域负载均衡设备(返回一台内容缓存服务器的ip)

用户对内容缓存服务器进行访问，获取内容；如果内容缓存服务器没有内容，内容缓存服务器向上一级内容缓存服务器请求内容

4、json（javaScript Object Notation、JS对象符号）

json简介

json是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

json语法规则：

由六个构造字符（[,],{,},:,,）、字符串、数字和三个字面名（true、false、null）组成；
json由键值对构成，值可以是对象、数组、字符串、三个字面名；
字面值只能使用小写；

json和js对象的关系和转换

json是js对象的字符串表示法，它使用文本表示一个js对象的信息；json本质是一个字符串；

eg：

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名即可以使用引号包裹，也可以不使用引号包裹；

var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

json和js对象的互相转换

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); // 结果是 {a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

5、NoSQL

泛指非关系型数据库；

mongoDB是一种文件型数据库，它是非关系型数据库的一种，微信小程序云开发的数据库就是使用的mongoDB；

6、NPM

1、概述

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题；
现在的NPM不仅仅是node的包管理工具，NPM可以用于任何一个项目的包管理（虽然项目的包目录还叫node_modules，这是历史遗留问题…）；
NPM采用为每一个项目单独建立以一个 node_modules的方式来隔绝不同的项目，以便于项目整体的打包发布；
NPM2采用树形结构创建包依赖，解决不同的包的依赖的包的版本不同的问题，但也照成了项目庞大的问题；

NPM3中采用了”扁平结构“的思路来组织依赖包的目录结构，对项目庞大的问题有一定的缓解；

2、怎样在项目中构建NPM

3、在项目文件中引用NPM管理着的包

const https = require('https'); // 'https'是一个包

使用require()引用包时，路径查找方式为：

如果传递给require()的参数不是nodejs的核心模块，也不是以/ 、 ../或 ./开头，那么nodejs会尝试从当前模块所在目录开始，尝试在它的 node_modules 文件夹里加载相应模块，根据模块的package.json来加载对应的js文件；
如果没有找到，那么就再向上一级目录移动，重复1，直到文件系统的根目录为止。

4、NPM的一些指令

安装包
- npm install module_name -S: 即 npm install module_name –save 写入写入package.json dependencies
- npm install module_name -D: 即npm install module_name –save-dev 写入写入package.json devDependencies
- npm install module_name:本地安装(将安装包放在 ./node_modules 下)不写入package.json；
- npm install module_name -g:全局安装(命令行使用)
参考链接：https://blog.csdn.net/E_li_na/article/details/80367994
删除包

删除xxx模块：npm uninstall xxx

删除全局模块：npm uninstall -g xxx
更改npm源

安装淘宝源：

npm config set registry https://registry.npm.taobao.org
小程序配置npm

- 在右上角的详情 -> 本地配置勾选npm模块

- npm init -y

- npm install 模块名 -S

- 点击上部工具栏的构建 npm

5、常用的一些包

https
cheerio
json-server

使用json-server的流程（前提是在文件夹中已经初始化了npm：npm init -y）：
1. 安装json-serve：npm i json-server
2. 在当前目录新建一个name.json文件，在文件里面添加任意内容；
```
{
 "name":{},
 "addres":{}
}
```
3. 在pack.json中的“scripts”字段中加入：
```
"自定义脚本名":"json-server --watch name.json --port=1314"
```
  - 更改name.json，服务器运行后就可以访问不同的json文件
4. 在输入框输入 npm run 自定义脚本名，以运行服务器；运行后就可以访问本地服务器了；
5. 在浏览器中输入地址访问数据；（地址会在输入 npm run server 后给出）
6. 关闭服务器的方法：Ctrl + c

echart

直接在项目中引入 eCharts
```
npm i echarts
```
然后在 js 文件中引入 echarts 模块
```
import * as echarts from 'echarts';
```

可以使用 echarts 了

// 建立echart图表
const myChart = eCharts.init(dom节点); // 传入有一个dom节点，初始化一个echarts绘图区域
let option = { // echarts 的配置
    title:{
        text:'EChart 入门'
    },
    tooltip:{},
    legend:{
        data:['销量']
    },
    xAxis:{
        data:['村三','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    yAxis:{},
    series:[
        {
            name:'销量',
            type:'bar',
            data:[2,3,5,11,2,43]
        }
    ]

}
myChart.setOption(option); // 根据传入的配置，创建一个echats图表

7、yarn

npm 的升级替代品；

npm i -g yarn

https://www.fujieace.com/jingyan/powershell.html

https://blog.csdn.net/qq_29918313/article/details/119240999

8、Mustache 语法

mustache[mə’stɑ:ʃ] 是一款轻量的前端模板引擎，主要用于在表现和数据分离的前端技术架构中；eg：在小程序中使用{{}}进行数据绑定；

9、MVC和MVVM

MVC
- 模型
- 视图
- 控制器：控制器作用于模型和视图之上，他控制数据流向模型对象，并在数据变化时更新视图，它使视图和模型分离开；
MVVM（Model View ViewModel）

是MVC的改进版；

ViewModel取出Model数据的同时帮忙处理View中由于许哟啊展示内容而涉及的业务逻辑；

https://www.cnblogs.com/wzfwaf/p/10553160.html

10、Emmet语法

快速构建html结构的语法，以下是基本用法：

>
+
.
#
^
[title=text]：注解
*：连续多个标签
{文本内容}：给标签填充文本
$：给连续多个标签编号

11、 BEM

BEM命名规范使每个元素的名字都是独一无二的，使不同元素的样式不会相互干扰，使开发组件变得更加轻松；

BEM的基本规则：

block__element_modifier
- 模块(block)：独立的实体；
- 元素名(element)：block的一部分；
- 修饰器(modifier)：用来改变block和element的行为和状态；
eg：使用weui的命名举例
```
weui-cell__bd_in-select-before
/*
  we-ui:模块名
  bd:元素名
  in-select-before:修饰器名
*/
```
注：
- block是广义上的模块，header、image、text都可以划分为模块；
- BEM 最多只有 B+E+M 三级
- 只需要保留BEM的思想即可，连接不同部分的分隔符并不一定要使用双下划线和单下划线，使用其它符号也行；
不要在使用BEM命名规范时使用子选择器

后代选择器往往会造成层次关系过长，加大我们的理解负担，可以说用后代选择器来定位元素时，这个样式文件就已经注定是要被翻来覆去的重构的了。
BEM中的修饰器部分

修饰器代表元素的状态；

BEM中修饰器的样式不依赖任何结构关系（eg：使用组合选择器）；

用js控制的状态最好不用BEN规范，应该用单独的命名去区分不同的状态，因为其不应该和某个元素绑定；

eg：weui中使用js-show表示用js控制的元素显示；

用一个实践去说明BEM

什么是gulp

Synchronous

Asynchronous

12、XHR (XmlHttpRequest)

有微软最初为 IE 浏览器开发；

XMLHttpRequest (XHR) 是一种创建 AJAX 请求的 JavaScript API 。它的方法提供了在浏览器和服务器之间发送请求的能力。

虽然名字里包含了XML对象，但传输的数据并不一定是XML，其它数据类型如json也照样可以；

语法

.open(请求方式,url,true)：最后一个true表示打开异步方式，值为false时表示同步方式；

let xmlhttp = new XMLHttpRequest(); // 微软的api,创建XMLHttpRequest对象
xmlhttp.open('GET','http://localhost:1314/book',true); // 开启一次http请求
xmlhttp.send(); // 发送请求
// 建立一个函数去监听对象的状态的改变
xmlhttp.onreadystatechange = function(){
    // console.log(xmlhttp.readyState); 2、3、4
    if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        
    }
}

POST

let xhr = new XMLHttpRequest();
xhr.open('POST','http://baidu.com');

readyState的值是以下的值：
- 0：未初始化，但是已经创建了XHR实例
- 1：调用了open()函数
- 2：已经调用了send()函数，但还未收到服务器回应
- 3：正在接受服务器返回的数据
- 4：完成响应

13、AJAX（Asynchronous JavaScript And XML）

AJAX允许只更新一个 HTML 页面的部分 DOM，而无须重新加载整个页面（和直接使用 a 标签的区别）。

AJAX还允许异步工作，这意味着当网页的一部分正试图重新加载时，您的代码可以继续运行（相比之下，同步会阻止代码继续运行，直到这部分的网页完成重新加载）。

通过交互式网站和现代 Web 标准，AJAX正在逐渐被 JavaScript 框架中的函数和官方的 Fetch API 标准取代。

ajax的原理

阻止 a 标签或其它具有发起http请求的标签的默认事件，然后建立一个 XHR 对象，通过 XHR 对象来发起原来标签想要发起的 http 请求，获取到相应的数据后，然后根据新数据重新渲染需要更新的那部分 DOM 节点；

14、Fetch API

JavaScript脚本中发出HTTP请求的API，

15、GET和POST的区别

https://www.w3cschool.cn/ajax/ajax-xmlhttprequest-send.html

16、HTTP

1、方法

GET：请求指定的页面信息，并返回实体主体；
HEAD：类似 GET 请求，但只返回请求头；
POST：向指定资源提交数据进行处理请求，数据被包含在请求体中；
PUT：用于将数据发送到服务器创建或更新资源；
DELETE：用来删除url指定的所有资源；
CONNECT：用来建立到给定 url 服务器的隧道；
OPTIONS：获得目标资源允许的通信选项；
TRACE：回显服务器收到的请求，主要用于测试或诊断；

2、状态码

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。

状态码的分类
- 1xx：信息，服务器收到请求，需要请求者继续执行操作；
- 2xx：成功，操作被成功接收并处理
- 3xx：重定向，需要进一步的操作已完成请求，
- 4xx：客户端有问题，请求包含语法错误或无法完成请求；
- 5xx：服务器错误，服务器在处理请求的过程中发生了错误；
常见状态码
- 200：请求成功，一般用于GET和POST请求
- 301：该 url 被永久重定向其它URL
- 302：该 url 被暂时重定向到其它 url
- 404：请求的资源不存在
- 500：内部服务器错误；

3、http 的改进 -》 ajax websocket

1、HTTP

基于请求/响应，在使用 http 连接的客户端和服务器中，服务器不能主动向客户发送消息,服务器上有一个驻留程序(eg:node 的 http服务)，用来响应客户请求；典型的 http 事务处理有如下过程

客户与服务器建立连接；

客户向服务器提出请求；

服务器接收请求，并根据请求返回相应的文件作为应答；

客户与服务器关闭连接；

客户与服务器之间的HTTP连接是一种一次性连接，及时地释放连接可以大大提高服务器的执行效率，可以响应更多的客户端请求；
无状态(不会记录)，即服务器不保留与客户交易时的任何状态。这就大大减轻了服务器记忆负担，从而保持较快的响应速度。但通过添加 cookie 来添加状态；(服务器通过给用户设置 cookie 来识别不同用户)
http请求由请求头和请求体组成
- 请求头：方法，url
- 请求体：
session 服务器端给用户开辟的一个空间，记录用户信息；

2、AJAX

使的可以更新页面的部分数据，而不需要再刷新整个页面；
ajax 轮询：浏览器每隔几秒发送一个请求，询问服务器是否有新信息，如果没有就告知没有信息，如果有则将新信息发送给浏览器；这需要服务器有很快的处理速度和资源；

3、WebSocket

websocket 是和 http 这种非持久化协议不同的一种持久化协议；

首先，客户端通过url建立http连接，发送http请求，转态码为200，服务器响应请求并将相应的资源发送给客户端，发送完后http连接关闭；

然后，客户端建立websocket连接，状态码为 101:switch protocol，

17、restful

是一种架构的规范与约束；

/books GET 获取资源的集合
/books/:id GET 根据id获取一条资源
/books POST 新增一条资源到资源的集合
/books/:id DEL 删除资源集合中的对应id的那条资源
PUT 更新，将资源集合全部替换
PATCH 更新，只更新资源集合中的部分内容

18、抓包工具Fiddler

使用方法：cnblogs.com/yyhh/p/5140852.html

19、脚手架（Cli ，Command line）

脚手架的定义

为了减少重复性工作而引入的命令行工具；
脚手架的作用

让项目从"搭建-开发-部署"更加快速以及规范
- 快速生成新项目的目录模板（Node.js）
- 提升开发效率和开发的舒适性（webpack）
脚手架的功能
- 生成一个通用的目录结构
- 配上构建、编译、检查等工程环境；
关于脚手架

现在比较流行的脚手架都是基于NodeJs编写的（Vue-CLI、create-react-app），它们基本上都是热门框架react和vue的项目脚手架；

20、CommomJS

CommonJS是一种规范，其可以处理全局变量污染、数据保护和解决模块之间的依赖关系；

21、CSS预处理器

1、stylus

简介

使用.styl作为文件扩展名，支持多样性的CSS语法，用近似脚本的方式去写CSS代码；
安装
```
npm install -g stylus
```
可以通过stylus -h命令获得帮助；
使用

将 .stly 文件编译为 .css 文件
```
stylus -m filename.styl -u filename.css
```

基础语法

变量
函数（mixin的概念）

原样输出函数里的内容，并没有返回值

循环

使用 for in 可以实现循环

for num in (2..5)
    .spinner > div:nth-child({num}) 
   		animation-delay: (-1.1 + num * 0.1)s;

编译后：

.spinner > div:nth-child(2) {
  animation-delay: -0.9s;
}
.spinner > div:nth-child(3) {
  animation-delay: -0.8s;
}
.spinner > div:nth-child(4) {
  animation-delay: -0.7s;
}
.spinner > div:nth-child(5) {
  animation-delay: -0.6s;
}

2、less

3、sass

22、VS code 的使用

修改扩展的安装路径

如果想要自定义扩展的安装路径，无法直接在vscode中修改。但是，在启动vscode的时候，可以使用--extensions-dir指定扩展安装路径。

参考资料：https://blog.csdn.net/weixin_43787055/article/details/116990366
vs code 中文件右侧的字母含义
- M modified
  你已经在github中添加过该文件，然后你对这个文件进行了修改，就会文件后标记M
- U untracked
  你在本地新建了这个文件，还未提交到github上，就会标记U
- D delete
  你删除了这个文件，vscode-git会记录下这个状态
- A
  
  新增的文件.
- C
  
  文件的一个新拷贝.
- R
  
  文件名被修改了。
- T
  
  文件的类型被修改了。
- X
  
  未知状态

23、User Agent

User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

控制台敲下： navigator.userAgent

获取浏览器类型；

22、前端框架（Vue、React）

前端框架主要是处理视图层和数据之间的关系；

1、Vue

一套构建用户界面的渐进时框架（实时显示数据更改），只关注视图层；通过尽可能简单的API实现响应的数据绑定和组合的视图组件；

2、React

23、Web 应用框架

1、概述

Web 框架主要是可以快速构建 Web 应用，Web应用主要是可以接受来自客户端的请求并处理请求，然后发送给客户端响应；

Web 框架可以分为基于请求的和基于组件的；两者都是 MVC 架构，主要区别在与视图层是否由组件构成；

2、使用的编程语言

JavaScript
Go
JAVA
Python
PHP
.NET
Ruby

3、JavaScript 编写的 Web 框架

Express

基于 Node.js 的 Web 框架，其特点是快速、极简，缺点是和是以哦那个 ES5 编写，回调写法是硬伤；
Koa

Express 原班人马打造，包含 Application、Request、Response、Context 四个模块；根据 ES 的新规范编写；

24、前端发展历史

html4 > html5
- IE html4 xmlHTTPRequest
- chrome html5 localStorage，indexDB，canvas，video
ES5 > ES6
DOM 编程时代 > 响应式时代

DOM 编程时代：jQuery

响应式时代：vue、react、小程序

25、mock

模拟后端为前端提供接口数据，项目开发中，当前端开发进度快于后端开发进度时，为了不影响前端开发的进度，mock服务可以很好的解决这一问题；

文档

fast-mock：一个在线 mock 平台；

26、webpack & rollup & vite

打包工具

27、babel

ES6 转 ES5 代码的转译器；

27.Polyfill

polyfill 称作补丁；

28、axios

一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中；

29、Redux

Redu 是 JavaScript 的状态容器；

Redux 中使用一个单一的全局数据源 store 来存储数据，所有组件都可以通过 action 修改store，也可以从 store 中获取最新数据；（这就实现了组件之间通过 store 通信，如果没有使用 Redux ，组件之间的通信要使用第三方组件来实现）

30、SPA（symbol page application）

通过 js 操作实现部分DOM更新，而不是整个页面刷；

现有主流 SPA 框架：React，Vue，angular

优点：

页面切换快
降低对服务器的压力

缺点：

首屏打开速度慢；(因为需要加载SPA框架等大量内容)
不利于 SEO；(因为现在的搜索引擎只是抓取第一次获得的数据，并且通过这些数据来分析和展示某个网站，但是 SPA 是通过 JS 异步获取数据的，这样网站的真实数据并没有被搜索引擎获取，这样造成的后果就是当用户通过搜索引擎搜索相关关键字时，该网站并不能被良好的展示；总的来说就是 SPA 不适合 SEO 优化)；

31、SEO(search engine optimization、搜索引擎优化)

指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，从而获得更多流量，最终达成品牌建设或者产品销售的目的。

31、SSR（服务端渲染）

与 SSR 相对的是浏览器端渲染（将框架和页面代码发送到浏览器，然后在浏览器生成和渲染页面）；

服务端渲染是将 SPA 应用放在服务器上，在服务器上生成 html 代码后将 html代码发送给浏览器端，这就有利于解决首屏加载慢和 SEO 的问题了；

使用 SSR 的缺点：

增加了对服务端资源的损耗；
需同构业务代码（使代码在服务器端和浏览器端的表现一致，且运行效果一致），这就导致浏览器端的一些 API 不能使用；

32、web worker

一个独立于 JavaScript 主线程的独立线程，在里面执行一些需要消耗大量资源的操作；

woker 的上下文和主线程 js 的上下文对象是不同的，window 不是它的顶层对象；
在 worker 中不能访问 dom；

33、server worker

一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。

基于 web worker
在 web worker 的基础上增加可离线缓存能力；

34、history 路由 hash 路由

1、hash 路由

带 # 的 url；

监听 url hash 的变化，然后渲染不同的内容，hash 路由不向服务器发送请求，不需要服务端的支持；

使用 hashchange 事件来判断路由是否发生了变化；

2、history 路由

监听 url 中的路径变化，需要客户端和服务端共同的支持；

35、事件驱动编程

以 onclick 点击事件为例：

有一个事件(消息)队列；
用户点击 UI 时，往事件队列中增加一个点击事件（事件中带有回调函数）；
主线程通过事件循环的机制从队列中取出事件，并执行事件对应的回调函数；

36、编程范式

单线程（同步）编程
多线程编程
事件驱动编程

37、浅拷贝和深拷贝

https://www.cnblogs.com/chengxs/p/10788442.html#:~:text=%E6%B7%B1%E6%8B%B7%E8%B4%9D%E4%BC%9A%E6%8B%B7%E8%B4%9D%E6%89%80%E6%9C%89%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%B9%B6%E6%8B%B7%E8%B4%9D%E5%B1%9E%E6%80%A7%E6%8C%87%E5%90%91%E7%9A%84%E5%8A%A8%E6%80%81%E5%88%86%E9%85%8D%E7%9A%84%E5%86%85%E5%AD%98%E3%80%82%20%E5%BD%93%E5%AF%B9%E8%B1%A1%E5%92%8C%E5%AE%83%E6%89%80%E5%BC%95%E7%94%A8%E7%9A%84%E5%AF%B9%E8%B1%A1%E4%B8%80%E8%B5%B7%E6%8B%B7%E8%B4%9D%E6%97%B6%E5%8D%B3%E5%8F%91%E7%94%9F%E6%B7%B1%E6%8B%B7%E8%B4%9D%E3%80%82,%E6%B7%B1%E6%8B%B7%E8%B4%9D%E7%9B%B8%E6%AF%94%E4%BA%8E%E6%B5%85%E6%8B%B7%E8%B4%9D%E9%80%9F%E5%BA%A6%E8%BE%83%E6%85%A2%E5%B9%B6%E4%B8%94%E8%8A%B1%E9%94%80%E8%BE%83%E5%A4%A7%E3%80%82%20%E6%8B%B7%E8%B4%9D%E5%89%8D%E5%90%8E%E4%B8%A4%E4%B8%AA%E5%AF%B9%E8%B1%A1%E4%BA%92%E4%B8%8D%E5%BD%B1%E5%93%8D%E3%80%82

火锅国大侠

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
前端基础知识（名词解释）

1、W3C 万维网联盟2、OpenSSL 提供加密工具的非营利组织3、SEO(search engine optimization、搜索引擎优化) 指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，从而获得更多流量，最终达成品牌建设或者产品销售的目的。4、MDN(Mozilla Developer Network) 是一个完整的学习平台，你可以在这里深入学习Web技术以及能够驱动Web的软件；5、CDN（Content Del
复制链接

扫一扫

专栏目录