web前端-期末总结

web前端-期末总结

此为南京大学软件学院20级，《web前端》复习整理，包含了很多知识点。整理的一些图还不错，平时也可以看一看，比如：JS原型链

• 平时的作业会考！试题中，简单和问答题有选用
• 分数分布：20名词解释（10 x 2）、40简答、40问答

一、名词解释

1、DNS

• domain name system（域名系统），是一个分布式数据库。
• 客户向DNS服务器请求，得到从域名到IP地址的转化。

2、URL/URI/URN

• URI (标识符Identifier) 允许资源驻留在Internet上的任何位置
• URL (定位符Locator) 显示资源副本的位置
• URN (名称Name) 是资源的唯一名称

3、Web发展历程

Web x.0 阶段	特征
Web 1.0	网站到用户的单向行为，搜狐
Web 2.0	网站与用户双向的交流与参与，CSDN
Web 3.0	大前端，以服务为内容，同构（同一代码在浏览器端和服务器端都可以运行）

4、IP

• Internet Protocol（网际互连协议），是TCP/IP体系中的网络层协议。
• IP只为主机提供一种无连接、不可靠的、尽力而为的数据包传输服务。

5、[DOM/BOM](#3.2 DOM，BOM)

• DOM:

  • Document Object Model（文档对象模型）定义了访问HTML和XML文档的标准，用于操作文档

  • 根本对象：Document（文档树的根节点）

• BOM:

  • Browser Object Model（浏览器对象模型）用于控制浏览器的行为
  • 核心对象：Windows（包含属性Document、location……）

6、W3C

• World Wide Web Consortium（<一个组织> 万维网联盟）
• 对 web 进行标准化，创建并维护 WWW 标准

7、ES2015

• ECMAScript 2015（ES6 <一种JavaScript 语言的标准>）
• 主要增加了let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

8、BFC

• Block Formatting Context（块级格式化上下文）

• BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列

• 通过overflow: hidden、display: inline-block、position: absolute、display: flex等触发。

9、SOP

• Same-origin policy（同源策略）
• 限制浏览器可以获取的资源，只能从同源网站获取内容。
• 同源：相同的协议，域和端口，文件路径不同
• 非同源限制：
  • Cookie、LocalStorage 和 IndexDB 无法读取。
  • DOM无法获得。
  • AJAX请求不能发送。

10、[Closure](#3.5 闭包)

• Closure（闭包），是函数里面套了函数。

• 用于：

  ①获取外层函数中定义的局部变量。

  ②将①的值保留在内存中。参考题

11、CSS sprites

• CSS sprites（CSS精灵图、CSS图片整合）
• 通过整合图片，减少请求数量，从而减轻服务器负担，提高网页的加载速度
• 原理：不超出200kb的图片所需加载时间差不多。

12、Session

• session（会话），保密性更好的cookie。

• 对比cookie和session：

  • cookie：
    

  • session：

    

13、TLS

• Transport Layer Security（传输层安全性协议）
• TLS是升级版的SSL，用来给HTTP协议加密=>HTTPS。

14、Internet

• 计算机之间互相连接，可以通信的大型通信网络。

15、MEAN

• MEAN是MongoDB + Express +AngularJS + NodeJS 四个框架的组合。它与传统LAMP一样是一种全套开发工具的简称。

  • MongoDB是使用JSON风格存储的数据库，非常适合javascript。

  • ExpressJS是一个Web应用框架，提供组件/模块帮助建立一个网站应用。

  • AngularJS是一个前端MVC框架。

  • Node.js是一个并发\异步\事件驱动的Javascript服务器后端开发平台。

• 在mongoDB中我们可以直接存储JSON格式的数据，然后在ExpressJS和的NodeJS服务器编写一个基于JSON的查询，并无缝地（无需像其他语言需要在JSON和语言数据模型之间转换）传递JSON到AngularJS前端。

16、HTTP

• Hyper Text Transfer Protocol（超文本传输协议）

  阶段	描述
  HTTP1.0	非持续连接，2个RTT时间，使用TCP链接
  HTTP1.1	支持持久连接，在相同TCP上通讯；支持流水线，可以不等反馈发送很多信息
  HTTP2.0	支持HTTP1.1，在数据如何封装成帧上有区别，降低了request传输次数，对其多路传输
  HTTP3.0	和HTTP2完全不同，使用UDP协议，通过重传保证效率

二、模块复习

1、HTML

1.1 HTML5的优势&应用

• 优势：

  • 跨浏览器兼容性

  • 简化标签

  • 优化用户体验

  • 安全

• 应用：

  • 在网站抓取和索引方面，HTML5 对 SEO 友好
    • Search Engine Optimization, 搜索引擎优化
  • 大量用于移动应用和游戏

2、CSS

2.1 选择器

• css由选择器+声明块组成。
• 选择器用来选择需要赋予CSS属性的 HTML 元素，多种方式：
• <缺省>h1（选择原生html标签元素）
• .classname（选择类名为classname的元素）
• #idname（选择id名为idname的元素）

2.2 布局

• position：

  • static <默认>正常定位：使用正常的布局行为
  • relative 相对定位：先按默认定位占坑，然后在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
  • absolute 绝对定位：元素移出正常文档流，相对于最近的非 static 父元素，定位元素位置。
  • fixed 绝对定位：元素移出正常文档流，相对于窗口，定位元素位置。
  • sticky 粘性定位：先按默认定位占坑，然后黏在滚动父元素上，随着滚屏移动。

• 瀑布布局：

  .box {
  	margin: 10px;
  	column-count: 3;
  	column-gap: 10px;
  }
  

2.3 响应式web设计

• 响应式网页设计(RWD，Responsive Web Design)，可以自动识别屏幕宽度、并作出相应调整页面布局（流式网格等），目标是解决设备多样化问题。
• 优点：提升网站可用性、简化服务器端、可支持未知设备。
• 缺点：兼容设备导致性能低下、加载时间变长，限制应用复杂性(折衷的设计方案)、用户混淆(改变了网站布局)

2.4 移动优先、渐进增强

移动优先：

• 优先显示最重要的内容和功能，如果空间允许，再逐步加入次要内容和功能。

• 保证了通用访问，在恶劣条件下，用户也能看到⼀个拥有基本功能的网站。

• 移动优先是渐进增强理念的良好范例，所有用户都能访问核心内容和功能。不存在不能访问的情况。

与渐进增强相对的是：优雅降级，一来就构建完整网站，然后针对各大浏览器测试、修复。

3、Javascript

3.1 数据类型

• 值类型(基本类型)：字符串String、数字Number、布尔Boolean、空Null、未定义Undefined、Symbol。

  Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

• 引用数据类型（对象类型）：对象 Object 、数组 Array 、函数 Function ，还有两个特殊的对象：正则 RegExp 和日期 Date；

• JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

3.2 DOM，BOM

• DOM：

  • DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构；

  • 迭代式的发展：DOM0, onclick；DOM2 事件监听addEventListener()；DOM3 一堆事件类型 鼠标 事件、滚轮事件、键盘事件……

• BOM：

  • 用于控制浏览器的行为：JS写windows.xxx调用各种浏览器属性、行为。

3.3 事件处理模型

• 事件流：页面对事件 ( 一般都是点击事件 ) 的响应过程

• 事件流三个阶段：

  • 捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；

  • 目标阶段：真正的目标节点正在处理事件的阶段；

  • 冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。

• father.addEventListener('click', function() {
  	console.log('father');
  }, true);//true参数: 捕获阶段
  
  father.addEventListener('click', function() {
  	console.log('father');
  }, false);//flase参数: 冒泡阶段
  

3.4 观察者模式

• 设定n个观察者（监视器），监视某对象的状态。当状态发生改变，所有观察者都会收到通知。
• 观察者不知道目标是怎么变的，只知道目标发生了变化。

3.5 闭包

• 函数里面套函数。思考题点此

3.6 变量提升

• JS将当前作用域的所有变量的声明，提升到程序的顶部（赋值语句不会提升）

• 原理：JS不是逐行的分析和执行，而是一段一段地分析执行，先编译后执行。

  什么是变量提升？: https://www.php.cn/js-tutorial-481055.html

3.7 原型对象，class，this，

原型对象：

• 所有对象（普通对象、原型对象）都有__proto__属性。

• 此属性不是给程序员调用的，而是当程序员调用p2.add()时：

  • 系统在对象中寻找add()函数；
  • 对象中找不到add()，于是通过p2.__proto__去Person.prototype里找；
  • 又找不到，继续通过__proto__去Object.prototype里找；
  • 又找不到，继续通过__proto__去找，找到null；
  • 于是报错: 函数add()不存在。

  

3.8 框架的优缺点

• 类型：vanillaJS、Prototype JS、jQuery
• 优点
  • 快速开发、简化合作、强迫练习熟练。
• 缺点
  • 遇到框架文档没有说明的问题，需要深入框架查找原因。
  • 框架迭代快，更换麻烦。

4、NODEJS

4.1 Nodejs优势，应用

• Node.js是一个javascript运行环境。

• 优势：

  • 单线程、非阻塞IO、轻量级；
  • 超强的高并发能力，实现高性能服务器；
  • 开发周期短、开发成本低、学习成本低；

• 应用场景：

  • 大量Ajax请求的应用
  • 适合I/O密集型的应用，不适合CPU密集型 ( 计算密集 ) 的应用

5、Express，路由，中间件，模版引擎

5.1 HTTP常用的请求方法

增POST、删DELETE、改PUT/PATCH、查GET

5.2 HTTP常见的状态码

状态码	消息	含义
200	OK	请求成功
204	No Content	请求处理成功，但无资源可以返回
400	Bad Request	请求报文中可能存在语法错误
403	Forbidden	对被请求页面的访问被禁止
404	Not Found	没有找到文件或目录
503	Service Unavailable	服务器超负载/停机维护，无法处理请求

5.3 性能优化

常用术语

浏览器渲染机制

性能分析方法

三、代码题

1、=的数字转字符串

//数字转字符串了
console.log("1"==1); //true
console.log("1"==0); //false
console.log("1"===0);//false
console.log("a"==a); //[报错]a未定义
console.log(123=="123");//true

2、+的数字转字符串

var x = 11
var y = "number"
var M=x+y
console.log(M);//”11number“

3、浮点数精度缺失

console.log(0.1+0.2);//0.30000000000000004

• 解决1：.toPrecision(12或16)

  console.log((0.1+0.2).toPrecision(16)==0.3);//true
  

• 解决2：误差检查

  console.log(Number.EPSILON);//官方参数 2.220446049250313e-16
  
  console.log(Number.EPSILON > Math.abs((0.1+0.2)-0.3));//true
  

4、JS闭包

console.log('===========js闭包1===========');
var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        return function(){
            return this.name;
        };
    }
};
console.log(object.getNameFunc()());//The Window

console.log('===========js闭包2===========');
var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        var that = this;
        return function(){
            return that.name;
        };
    }
};
console.log(object.getNameFunc()());//My object

四、作业复习

1、前端鉴权

术语：认证、授权、鉴权、权限控制、SSO、OAuth2.0

不同的方案，各自的流程，优缺点。

//TODO

2、登录注册

验证码、密码、其他要点

3、前端主题切换

不同方案