mk大前端2022版【附代码】

390 阅读10分钟

大前端和小前端的区别:小前端就是 Web 前端。大前端包括一切负责展示的端,包括 Web 前端、PC、移动和 VR。大前端工作还额外包含客户端业务逻辑(浏览器上的html,css,javascript),服务器端业务逻辑(nodejs),nodejs提供了js服务端编程,使js与算法结合,js开发的大量应用功能页面的兼容问题出现;对接访问数据中间层。

download: 大前端2022版

HTTP状态码

100  Continue  继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
200  OK   正常返回信息
201  Created  请求成功并且服务器创建了新的资源
202  Accepted  服务器已接受请求,但尚未处理
301  Moved Permanently  请求的网页已永久移动到新位置。
302 Found  临时性重定向。
303 See Other  临时性重定向,且总是使用 GET 请求新的 URI。
304  Not Modified  自从上次请求后,请求的网页未修改过。

400 Bad Request  服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized  请求未授权。
403 Forbidden  禁止访问。
404 Not Found  找不到如何与 URI 相匹配的资源。

500 Internal Server Error  最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

cache-control

网页的缓存是由HTTP消息头中的“Cache-control”来控制的,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private

Expires 头部字段提供一个日期和时间,响应在该日期和时间后被认为失效。允许客户端在这个时间之前不去检查(发请求),等同max-age的效果。但是如果同时存在,则被Cache-Controlmax-age覆盖。

Expires = "Expires" ":" HTTP-date

例如

Expires: Thu, 01 Dec 1994 16:00:00 GMT (必须是GMT格式)

如果把它设置为-1,则表示立即过期

Expiresmax-age都可以用来指定文档的过期时间,但是二者有一些细微差别

1.Expires在HTTP/1.0中已经定义,Cache-Control:max-age在HTTP/1.1中才有定义,为了向下兼容,仅使用max-age不够;
2.Expires指定一个绝对的过期时间(GMT格式),这么做会导致至少2个问题:1)客户端和服务器时间不同步导致Expires的配置出现问题。 2)很容易在配置后忘记具体的过期时间,导致过期来临出现浪涌现象;

3.max-age 指定的是从文档被访问后的存活时间,这个时间是个相对值(比如:3600s),相对的是文档第一次被请求时服务器记录的Request_time(请求时间)

4.Expires指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime),而max-age相对对的是文档的请求时间(Atime)

如果值为no-cache,那么每次都会访问服务器。如果值为max-age,则在过期之前不会重复访问服务器。

js操作获取和设置cookie

//创建cookie
function setCookie(name, value, expires, path, domain, secure) {
	var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
	if (expires instanceof Date) {
		cookieText += '; expires=' + expires;
	}
	if (path) {
		cookieText += '; expires=' + expires;
	}
	if (domain) {
		cookieText += '; domain=' + domain;
	}
	if (secure) {
		cookieText += '; secure';
	}
	document.cookie = cookieText;
}

//获取cookie
function getCookie(name) {
	var cookieName = encodeURIComponent(name) + '=';
	var cookieStart = document.cookie.indexOf(cookieName);
	var cookieValue = null;
	if (cookieStart > -1) {
		var cookieEnd = document.cookie.indexOf(';', cookieStart);
		if (cookieEnd == -1) {
			cookieEnd = document.cookie.length;
		}
		cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
	}
	return cookieValue;
}

//删除cookie
function unsetCookie(name) {
	document.cookie = name + "= ; expires=" + new Date(0);
}

严格模式中的变化 ECMAScript 5 的严格模式是采用具有限制性 JavaScript 变体的一种方式,从而使代码显示地脱离“马虎模式/稀松模式/懒散模式“(sloppy)模式。

严格模式同时改变了语法及运行时行为。变化通常分为这几类:将问题直接转化为错误(如语法错误或运行时错误), 简化了如何为给定名称的特定变量计算,简化了 eval 以及 arguments, 将写"安全“JavaScript 的步骤变得更简单,以及改变了预测未来 ECMAScript 行为的方式。

1.1 将过失错误转成异常 严格模式下无法再意外创建全局变量。 "use strict"; // ReferenceError mistypedVaraible = 17; 严格模式会使引起静默失败的赋值操作抛出异常 例如, NaN 是一个不可写的全局变量. 在正常模式下, 给 NaN 赋值不会产生任何作用; 开发者也不会受到任何错误反馈. 但在严格模式下, 给 NaN 赋值会抛出一个异常. 任何在正常模式下引起静默失败的赋值操作 (给不可写属性赋值, 给只读属性(getter-only)赋值, 给不可扩展对象(non-extensible object)的新属性赋值) 都会抛出异常:

"use strict";

// 给不可写属性赋值 var obj1 = {}; Object.defineProperty(obj1, "x", { value: 42, writable: false }); obj1.x = 9; // 抛出TypeError错误

// 给只读属性赋值 var obj2 = { get x() { return 17; }, }; obj2.x = 5; // 抛出TypeError错误

// 给不可扩展对象的新属性赋值 var fixed = {}; Object.preventExtensions(fixed); fixed.newProp = "ohai"; // 抛出TypeError错误 在严格模式下, 试图删除不可删除的属性时会抛出异常 之前这种操作不会产生任何效果

"use strict"; delete Object.prototype; // 抛出TypeError错误 严格模式要求函数的参数名唯一 在正常模式下, 最后一个重名参数名会掩盖之前的重名参数. 之前的参数仍然可以通过 arguments[i] 来访问, 还不是完全无法访问. 然而, 这种隐藏毫无意义而且可能是意料之外的 (比如它可能本来是打错了), 所以在严格模式下重名参数被认为是语法错误:

function sum(a, a, c) { // !!! 语法错误 "use strict"; return a + a + c; // 代码运行到这里会出错 } 严格模式禁止八进制数字语法 ECMAScript 并不包含八进制语法, 但所有的浏览器都支持这种以零(0)开头的八进制语法: 0644 === 420 还有 \045" === "%"在 ECMAScript 6 中支持为一个数字加"0o"的前缀来表示八进制数.

var a = 0o10; // ES6: 八进制 ECMAScript 6 中的严格模式禁止设置 primitive 值的属性 不采用严格模式,设置属性将会简单忽略(no-op),采用严格模式,将抛出 TypeError 错误

(function () { "use strict";

false.true = ""; //TypeError (14).sailing = "home"; //TypeError "with".you = "far away"; //TypeError })(); 1.2 简化变量的使用 严格模式简化了代码中变量名字映射到变量定义的方式. 很多编译器的优化是依赖存储变量 X 位置的能力:这对全面优化 JavaScript 代码至关重要. JavaScript 有些情况会使得代码中名字到变量定义的基本映射只在运行时才产生. 严格模式移除了大多数这种情况的发生, 所以编译器可以更好的优化严格模式的代码.

严格模式禁用 with with 所引起的问题是块内的任何名称可以映射(map)到 with 传进来的对象的属性, 也可以映射到包围这个块的作用域内的变量(甚至是全局变量), 这一切都是在运行时决定的: 在代码运行之前是无法得知的. 严格模式下, 使用 with 会引起语法错误, 所以就不会存在 with 块内的变量在运行时才决定引用到哪里的情况了:

"use strict"; var x = 17; with (obj) { // !!! 语法错误 // 如果没有开启严格模式,with中的这个x会指向with上面的那个x,还是obj.x? // 如果不运行代码,我们无法知道,因此,这种代码让引擎无法进行优化,速度也就会变慢。 x; } 严格模式下 eval 不再为上层范围引入新变量 在正常模式下, 代码 eval("var x;") 会给上层函数(surrounding function)或者全局引入一个新的变量 x . 这意味着, 一般情况下, 在一个包含 eval 调用的函数内所有没有引用到参数或者局部变量的名称都必须在运行时才能被映射到特定的定义 (因为 eval 可能引入的新变量会覆盖它的外层变量). 在严格模式下 eval 仅仅为被运行的代码创建变量, 所以 eval 不会使得名称映射到外部变量或者其他局部变量:

var x = 17; var evalX = eval("'use strict'; var x = 42; x"); console.assert(x === 17); console.assert(evalX === 42); 相应的, 如果函数 eval 被在严格模式下的eval(...)以表达式的形式调用时, 其代码会被当做严格模式下的代码执行. 当然也可以在代码中显式开启严格模式, 但这样做并不是必须的.

function strict1(str) { "use strict"; return eval(str); // str中的代码在严格模式下运行 } function strict2(f, str) { "use strict"; return f(str); // 没有直接调用eval(...): 当且仅当str中的代码开启了严格模式时 // 才会在严格模式下运行 } function nonstrict(str) { return eval(str); // 当且仅当str中的代码开启了"use strict",str中的代码才会在严格模式下运行 }

strict1("'Strict mode code!'"); strict1("'use strict'; 'Strict mode code!'"); strict2(eval, "'Non-strict code.'"); strict2(eval, "'use strict'; 'Strict mode code!'"); nonstrict("'Non-strict code.'"); nonstrict("'use strict'; 'Strict mode code!'"); 因此,在 eval 执行的严格模式代码下,变量的行为与严格模式下非 eval 执行的代码中的变量相同。

严格模式禁止删除声明变量 delete name 在严格模式下会引发语法错误

"use strict";

var x; delete x; // !!! 语法错误 1.3 让 eval 和 arguments 变的简单 严格模式让 arguments 和 eval 少了一些奇怪的行为。两者在通常的代码中都包含了很多奇怪的行为: eval 会添加删除绑定,改变绑定好的值,还会通过用它索引过的属性给形参取别名的方式修改形参. 虽然在未来的 ECMAScript 版本解决这个问题之前,是不会有补丁来完全修复这个问题,但严格模式下将 eval 和 arguments 作为关键字对于此问题的解决是很有帮助的。

名称 eval 和 arguments 不能通过程序语法被绑定(be bound)或赋值 以下的所有尝试将引起语法错误:

"use strict"; eval = 17; arguments++; ++eval; var obj = { set p(arguments) { } }; var eval; try { } catch (arguments) { } function x(eval) { } function arguments() { } var y = function eval() { }; var f = new Function("arguments", "'use strict'; return 17;"); 严格模式下,参数的值不会随 arguments 对象的值的改变而变化。 在正常模式下,对于第一个参数是 arg 的函数,对 arg 赋值时会同时赋值给 arguments[0],反之亦然(除非没有参数,或者 arguments[0] 被删除)。严格模式下,函数的 arguments 对象会保存函数被调用时的原始参数。arguments[i] 的值不会随与之相应的参数的值的改变而变化,同名参数的值也不会随与之相应的 arguments[i] 的值的改变而变化。

function f(a) { "use strict"; a = 42; return [a, arguments[0]]; } var pair = f(17); console.assert(pair[0] === 42); console.assert(pair[1] === 17); 不再支持 arguments.callee。 正常模式下,arguments.callee 指向当前正在执行的函数。这个作用很小:直接给执行函数命名就可以了!此外,arguments.callee 十分不利于优化,例如内联函数,因为 arguments.callee 会依赖对非内联函数的引用。在严格模式下,arguments.callee 是一个不可删除属性,而且赋值和读取时都会抛出异常:

"use strict"; var f = function () { return arguments.callee; }; f(); // 抛出类型错误