用户7462119754131
获得徽章 0
- day12 webpack相关
入口（Entry）：指定应用程序的入口点，Webpack 从这个点开始构建依赖图。你可以指定一个或多个入口文件。
出口（Output）：指定打包后的文件输出位置及文件名。通常，Webpack 会生成一个或多个输出文件，可以是 JavaScript 文件、样式文件、图片等。
加载器（Loaders）：Webpack 使用加载器来处理非 JavaScript 文件，例如将 ES6+ 代码转换为 ES5，将样式文件转换为浏览器可识别的格式。加载器允许你在打包过程中预处理文件。
插件（Plugins）：插件用于执行各种任务，从而优化打包过程或者在打包后的文件中执行额外的操作。例如，可以使用插件压缩代码、生成 HTML 文件、提取样式等。
模式（Mode）：Webpack 提供了三种模式，分别是开发模式（development）、生产模式（production）和未指定模式（none）。模式会影响 Webpack 的优化和行为。
模块（Modules）：Webpack 将所有的文件视为模块，可以是 JavaScript 文件、样式文件、图片等。每个模块都有自己的依赖关系，Webpack 会根据这些依赖关系构建依赖图。
代码分割（Code Splitting）：Webpack 允许将代码拆分成多个文件，以实现按需加载。这可以减少初始加载时间，提高应用程序性能。
热模块替换（Hot Module Replacement）：在开发模式下，Webpack 支持热模块替换，允许在不刷新整个页面的情况下替换更新的模块，以提高开发效率。
动态导入（Dynamic Import）：Webpack 支持动态导入语法，使得在运行时按需加载模块成为可能，这对于优化性能很有帮助。
Resolve 配置：Webpack 的配置文件允许你指定如何解析模块路径、文件后缀等信息。展开评论点赞 - day11 ES11
// 01_新增可选链? 当属性不存在时 直接返回undefined 避免报错
let text = {
name: "text",
address: {
title: "北京",
},
foo() {
console.log("方法存在");
return "foo";
},
};
const addTit = text?.address?.title;
console.log(addTit);
console.log(text?.foo?.());
// 02_新增空位合并操作符?? 当 ?? 前面的值为null或undefined时 使用后面的值
let yourname = "jame";
let kind = yourname ?? "詹姆斯";
console.log(kind);
// 03_新增globalThis 用于获取全局变量 多用于非全局作用域下获取全局作用域
console.log(globalThis); // window
console.log(this === globalThis); // true
// 04_BigInt表示大数字
let theBiggestNum = Number.MAX_SAFE_INTEGER;
// 超过最大值的数字不可预期 可能正确也可能不正确
console.log(theBiggestNum, theBiggestNum + 1, theBiggestNum + 2); //9007199254740991 9007199254740992 9007199254740992
// 数字后面 加上 n 标志为BigInt
let theBiggestNumMore = BigInt(theBiggestNum) + BigInt(2);展开评论点赞 - ES7 ES8
// ES7
// 01_新增Object.prototype.includes-->判断数组中是否包含某元素
let arr = ["abc", "cba"];
console.log(arr.includes("abc"));
// 02_新增指数操作符-->用于幂运算
let a = 2;
console.log(2 ** 9); // 输出512
// ES8
let obj = {
name: "rz",
age: 18,
};
console.log(Object.keys(obj)); //ES5
// 01_新增Object.values用于获取对象的所有“值”
console.log(Object.values(obj));
// 02_新增Object.entries 获取对象的所有键值对
console.log(Object.entries(obj));
//03_新增字符串处理方法String.prototype.padStart() String.prototype.padEnd()
// 常见应用场景 --> 对敏感信息进行隐藏
let IDcard = "441422200204226789";
let resCard = IDcard.slice(14);
console.log(resCard.padStart(18, "*")); // **************6789展开评论点赞 - day9 ES6使用proxy对数据进行劫持
// 通过proxy创建一个代理对象 后续操作 只对代理对象进行操作
const objProxy = new Proxy(obj, {
set: function (target, key, newVal) {
console.log("值被修改", newVal);
target[key] = newVal;
},
get: function (target, key) {
console.log("值被获取", target);
return target[key];
},
deleteProperty: function (target, key) {
console.log(`值${key}被删除`);
delete target[key];
return true;
},
has: function (target, key) {
return key in target;
},
});
objProxy.name = "curry";
objProxy.age = 35;
console.log(objProxy.age);
delete objProxy.name;
console.log(objProxy.name);
console.log("name" in objProxy);展开评论点赞 - day8 简单手写简易apply
// 将手写的apply call方法绑定到function的prototype上
Function.prototype.myApply = function(thisargs, otherargs) {
thisargs =
thisargs === null || thisargs === undefined ?
window :
Object(thisargs);
Object.defineProperty(thisargs, "fn", {
enumerable: false,
configurable: true,
value: this,
});
thisargs.fn(otherargs);
};
function foo(arg) {
console.log(this, arg);
}
foo.myApply({
name: "rz",
},
"xiao"
);展开评论点赞 - day7 ES6新特性 --> let、const
• 暂时性死区
// 暂时性死区 --> 在一个作用域内 出现 let/const 定义的变量 在变量被定义且初始化之前 是不能够被访问的
// 在定义之前访问 报Cannot access 'message' before initialization
function foo() {
//从函数定义开始 到变量定义的位置之间称为死区
console.log(message);
let message = "as";
}
foo();
• Let_const 的作用域
// {} 定义的块级作用域中 变量会变量提升 函数只能在{}作用域外 在作业域后面才可以调用
// 在这之前调用 报test is not a function
// test()
{
var message = "xrz";
function test() {
console.log("test");
}
}
let和const会形成块级作用域 在变量定义之前 使用 会造成暂时性死区
let和const定义的变量不会有变量提升 会形成词法环境 且let/const定义的变量 不会放在window上展开评论点赞 - day6 纯函数
• 定义：在相同的输入的情况下 有相同的输出
不会产生副作用
• 副作用：在执行函数时 修改了函数外的全局变量 修改参数等等
--> 产生一系列 会导致 输入相同的变量 会输出不同的结果的行为
严格模式
• 背景：JavaScript在设计之初 简单易学 容易上手 具有灵活性 但不能很好的处理一些错误的语法 但是为了语言的可迭代性 在后续更新中 也没有对这些错误进行处理
• 为了更加的安全 推出了一种更为严格的检查模式 --> 严格模式
• 可以解决： 常见的 ---- 在全局作用域下 没有使用关键字 创建变量 --> num=0
（正确应该是 var num = 0） 不允许使用with eval不再为上层引用变量（在非严格模式下 eval中创建的变量 在外部可以访问到）不允许函数的形参相同等等展开评论点赞 - day5 闭包
// 闭包的定义： 一个函数 和 这个函数的词法环境 --> 闭包
// 理解： 在一个函数A内部 定义一个函数B 并作为该函数的返回值
// 函数B内 使用了 函数A定义的一些变量
// 在A函数外部 调用A函数 并赋值为arr 此时 arr = A()
// 调用完 A函数 A函数应该会被销毁 但是由于B函数中使用了A函数的变量
// 在垃圾回收查找时（标记清除） 发现arr的作用域链接着A函数 即A函数 没有被销毁
// 在A函数外部 arr仍然可以使用A函数里面定义的变量
// 带来的问题: 造成内存泄漏 垃圾回收器无法及时回收无用的垃圾 影响性能
// 解决方法： 在确定后续不再使用该闭包时 手动清理内存 --> 赋值为null
function foo(number) {
function adder(num) {
return num + number;
}
return adder;
}
var add5 = foo(5);
console.log(add5(100));
var add8 = foo(8);
console.log(add8(9));展开评论点赞 - day4 v8引擎执行代码的流程
• 词法分析（Lexical Analysis）：V8首先将输入的JavaScript代码进行词法分析，将代码分解为一个个的词法单元（Token）。这些词法单元包括标识符、关键字、运算符、数字、字符串等。
• 语法分析（Syntax Analysis）：V8使用语法分析器（Parser）将词法单元组合成抽象语法树（Abstract Syntax Tree，AST）。AST是一种树状结构，表示了JavaScript代码的语法结构。
• 生成字节码（Bytecode Generation）：接下来，V8将AST转换为中间代码（字节码）。字节码是一种类似于汇编语言的低级代码，它比源代码更接近于机器代码，但仍然是跨平台的。
• 优化（Optimization）：V8引擎在执行JavaScript代码之前，会进行一系列的优化操作，以提高代码的性能。这些优化包括内联缓存、即时编译（Just-In-Time Compilation，JIT）等。
• 执行字节码：V8引擎会按顺序执行生成的字节码，从而实现JavaScript代码的执行。字节码解释器（Interpreter）会逐条解释执行字节码。
• 热点代码优化：在执行过程中，V8引擎会监测哪些代码被频繁执行（热点代码），然后对这些热点代码进行更高级的优化，例如进行JIT编译成本地机器码，以提高性能。
• 垃圾回收（Garbage Collection）：在执行过程中，V8引擎会进行垃圾回收操作，以回收不再使用的内存资源，确保内存的高效利用。
事件循环（Event Loop）：在Web浏览器环境中，V8引擎还需要与浏览器的事件循环（Event Loop）进行交互，实现异步操作和事件处理。展开评论点赞 - day3 浏览器输入一个URL到页面显示的过程
a. 用户输入URL --> 用户在浏览器输入要访问的网页的域名
b. DNS解析 --> 浏览器将URL地址发送到DNS服务器 通过DNS服务器解析对应的IP地址 （如果浏览器缓存了对应的IP地址 将会跳过解析的过程）
c. 建立TCP连接 --> 浏览器根据IP地址 通过三次握手 与服务器建立TCP连接
d. 发送HTTP请求 --> 在建立连接后 浏览器向服务器发送HTTP请求 包含所要请求的资源 请求方式 请求头等信息
e. 服务器处理HTTP请求 --> 服务器接收到请求后 根据请求准备相应的响应数据
f. 服务器返回HTTP响应 --> 服务器将响应数据返回给浏览器 包括响应数据 响应状态 响应头等信息
g. 浏览器接收响应 --> 浏览器接收相应的响应数据
h. 渲染页面 --> 浏览器根据接收到的数据 开始解析数据中相应的html页面 构建dom树 根据css样式表 构建规则树 将规则树附着在dom树上 形成渲染树 经过一些布局后形成绘制树 在解析过程出现的其他资源 图片 js文件 等等 将向服务器发送相应的请求 将数据请求过来
i. 页面绘制 --> 根据构造的绘制树 将 页面绘制出来 呈现在浏览器上展开评论点赞