Merge branch 'main' of https://github.com/dddssw/blog

Author: zhangdong

.vitepress/config.mts

@@ -98,7 +98,7 @@ export default defineConfig({
         text: "构建工具",
         items: [
           { text: "Vite", link: "bundle/vite/initial" },
-          { text: "Webpack", link: "/bundle/webpack/treeShaking" },
+          { text: "Webpack", link: "/bundle/webpack/webpack" },
         ],
       },
     ],
@@ -377,6 +377,10 @@ export default defineConfig({
         {
           text: "webpack",
           items: [
+            {
+              text: "webpack",
+              link: "/bundle/webpack/webpack",
+            },
             {
               text: "树摇",
               link: "/bundle/webpack/treeShaking",

bundle/webpack/webpack.md

@@ -0,0 +1,52 @@
+---
+layout: doc
+outline: deep
+---
+## 流程
+* 初始化：读取合并配置信息，加载plugin，实例化compiler
+* 编译：从entry出发，针对每个module调用对应的loader去翻译源代码，再找到该module依赖的module，递归的进行编译处理
+* 输出：将编译后的module组合成chunk，将chunk转化为文件，输出到文件系统中
+## loader
+一个loader其实就是一个Node.js模块，这个模块需要导出一个函数，接收原内容，返回处理之后的内容。
+
+由于loader运行在node.js上，所以我们可以调用任意node.js自带的api,或者按照第三方模块进行调用
+
+```js
+const { validate } = require('schema-utils'); // 配置验证工具 [4](@ref)
+const loaderUtils = require('loader-utils'); // 工具库（Webpack 内置）
+
+// 1. 定义配置的 JSON Schema（用于参数校验）
+const schema = {
+  type: 'object',
+  properties: {
+    prefix: { type: 'string' }, // 示例参数
+    debug: { type: 'boolean' }
+  },
+  additionalProperties: false // 禁止额外参数
+};
+
+// 2. Loader 主体函数
+module.exports = function(source) {
+  // 异步模式（通过回调返回结果）
+  const callback = this.async();
+  
+  // 3. 获取并验证配置项
+  const options = loaderUtils.getOptions(this) || {};
+  validate(schema, options, { name: 'My Loader' }); // 校验失败时抛出错误 [4](@ref)
+
+  // 4. 处理内容（示例：为文本添加前缀）
+  let result = source;
+  if (options.prefix) {
+    result = options.prefix + result;
+  }
+
+  // 5. 返回结果（支持多种格式）
+  callback(null, result);
+};
+
+// 6. 声明是否处理二进制文件（默认处理文本）
+module.exports.raw = false; // 若需处理图片等二进制数据，设为 true [6](@ref)
+```
+## plugin
+* compiler:Webpack的​​全局单例对象​​，代表​​整个构建环境
+* compilation:代表一次新的编译

javascript/algorithm.md

@@ -1127,4 +1127,81 @@ var findDuplicate = function (nums) {
 };
 // o(n)
 // o(1)
+```
+
+## 二分查找
+### [搜索插入位置](https://leetcode.cn/problems/search-insert-position/description/?envType=study-plan-v2&envId=top-100-liked)
+```js
+var searchInsert = function (nums, target) {
+  let left = 0;
+  let right = nums.length - 1;
+  while (left <= right) {
+    let mid = Math.floor((left + right) / 2);
+    if (nums[mid] === target) {
+      return mid;
+    }
+    if (target < nums[mid]) {
+      right = mid - 1;
+    } else {
+      left = mid + 1;
+    }
+  }
+  return left;
+};
+```
+### [搜索旋转排序数组](https://leetcode.cn/problems/search-in-rotated-sorted-array/description/)
+每次二分后，子数组 [left, mid] 或 [mid, right] ​​至少有一个是有序的
+```js
+var search = function (nums, target) {
+  let left = 0;
+  let right = nums.length - 1;
+  while (left <= right) {//子数组长度为 1
+    let mid = Math.floor((left + right) / 2);
+    if (nums[mid] === target) {
+      return mid;
+    }
+    if (nums[left] <= nums[mid]) {//不加=会以为右边是有序的
+      if (target >= nums[left] && target <= nums[mid]) {
+        right = mid - 1;
+      } else {
+        left = mid + 1;
+      }
+    } else {
+      if (target >= nums[mid] && target <= nums[right]) {
+        left = mid + 1;
+      } else {
+        right = mid - 1;
+      }
+    }
+  }
+  return -1;
+};
+```
+## 快速排序
+```js
+function sort(arr) {
+  function dfs(left, right) {
+    if (left >= right) {
+      return;
+    }
+    let i = left;
+    let j = right;
+    let tar = arr[left];
+    while (left < right) {
+      while (left < right && arr[right] >= tar) {
+        right--;
+      }
+      while (left < right && arr[left] <= tar) {
+        left++;
+      }
+      [arr[left], arr[right]] = [arr[right], arr[left]];
+    }
+    [arr[left], arr[i]] = [arr[i], arr[left]];
+    dfs(i, left - 1);
+    dfs(left + 1, j);
+  }
+  dfs(0, arr.length - 1);
+  return arr;
+}
+console.log(sort([9, 7, 5, 3, 1]));
 ```

javascript/grammar/summary.md

@@ -5,9 +5,12 @@ layout: doc
 
 1. [闭包](closure)
 2. 原型  
-   对象有一个特殊的隐藏属性 prototype,它要么为 null,要么就是另一个对象的引用,该对象被称为原型",  
+   对象有一个特殊的隐藏属性 [[prototype]],它要么为 null,要么就是另一个对象的引用,该对象被称为原型",  
    属性 [[Prototype]] 是内部的而且是隐藏的,但是使用特殊的名字 **proto** 可以设置它,  
    当访问一个对象的属性,如果没找到就会到原型里找,原型里又有它的原型,这样一直寻找,就是一条原型链,原型链的终点是 null,
+   F.prototype 指的是 F 的一个名为 "prototype" 的常规属性。这听起来与“原型”这个术语很类似，但这里我们实际上指的是具有该名字的常规属性。设置 Rabbit.prototype = animal 的字面意思是：“当创建了一个 new Rabbit 时，把它的 [[Prototype]] 赋值为 animal,被他实例化出的对象就可以使用animal上的方法。构造函数-prototype,对象-__proto__
+
+   对于一个构造函数，prototype是一个常规属性，例如Array.prototype他是一个包含了一组数组方法的对象，这个对象的原型(__proto__)是Object.prototype
 3. 迭代器
    for...of 只能遍历可迭代对象，如果遍历对象,  
    需要实现一个 Symbol.iterator 方法,  
@@ -122,3 +125,5 @@ let d = {
 c.a().fn();
 d.a().fn();
 ```
+7. promise打印
+执行代码，遇到同步任务执行，如果有微任务，宏任务加入队列。执行后面可以执行的同步代码。同步代码处理完，开始处理微任务，最后是宏任务。