init

Author: guozhengzhong-tal

.editorconfig

@@ -0,0 +1,11 @@
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newnewline = true
+singleQuote= true

.gitignore

@@ -0,0 +1,6 @@
+/node_modules
+**/.temp
+**/.cache
+.idea
+.DS_Store
+.vscode

docs/.vuepress/config.js

@@ -0,0 +1,108 @@
+module.exports = {
+  lang: "zh-CN",
+  title: "码力全开",
+  description: "vue react javascript 前端 面试 js",
+  theme: "@vuepress/default",
+  themeConfig: {
+    logo: "https://vuejs.org/images/logo.png",
+    editLink: false,
+    home: "/",
+    navbar: [
+      // 嵌套 Group - 最大深度为 2
+      {
+        text: "前端框架",
+        children: [
+          {
+            text: "React",
+            children: [
+              {
+                text: "源码",
+                link: "/framework/react/source",
+              },
+            ],
+          },
+          {
+            text: "Vue",
+            children: [
+              {
+                text: "源码(vue2)",
+                link: "/framework/vue2-source/source",
+              },
+              {
+                text: 'vue 3',
+                link: '/framework/vue3'
+              }
+            ],
+          },
+        ],
+      },
+      {
+        text: "JavaScript",
+        children: [
+          {
+            text: "语言基础",
+            children: [
+              {
+                text: "原生API",
+                link: "/js/basic",
+              },
+            ],
+          },
+          {
+            text: '进阶提升',
+            children: [
+              {
+                text: 'ES6+',
+                link: "/js/es6"
+              },
+              {
+                text: '设计模式',
+                link: "/js/design-pattern"
+              }
+            ]
+          },
+          {
+            text: "函数式编程",
+            children: [
+              {
+                text: "高阶函数",
+                link: "/js/function/higher-function",
+              },
+            ],
+          },
+        ],
+      },
+      // {
+        // text: "前端工程化",
+        // children: [
+        //   {
+        //     text: "前端工程化",
+        //     children: [
+        //       {
+        //         text: "原生API",
+        //         link: "/js/basic",
+        //       },
+        //     ],
+        //   },
+        // ],
+      // },
+      {
+        text: "项目构建",
+        children: [
+          {
+            text: "代码打包",
+            children: [
+              {
+                text: "Tree Shaking",
+                link: "/bundle/treeshaking",
+              },
+            ],
+          },
+        ],
+      }
+    ],
+    // 侧边栏对象
+    // 不同子路径下的页面会使用不同的侧边栏
+    sidebar: "auto",
+  },
+};

docs/.vuepress/public/banner.jpeg

@@ -0,0 +1,16 @@
+---
+home: true
+heroImage: /banner.jpeg
+heroText: 前端资源
+tagline: 一起精进前端技术
+actionText: 马上开始 →
+actionLink: /basic/html
+features:
+- title: 大
+  details: 资源量大
+- title: 全
+  details: 种类齐全
+- title: 精
+  details: 详细整理
+footer: null
+---

docs/.vuepress/public/favicon.ico

@@ -0,0 +1,23 @@
+---
+lang: zh-CN
+title: tree shaking
+description: tree shaking
+---
+# tree shaking
+> 基于 ES Module 规范的 Dead Code Elimination 技术
+## 实现的理论基础
+ES 模块规范要求所有的导入导出语句只能出现在模块顶层，且导入导出的模块名必须为字符串常量。所以，ESM 下模块之间的依赖关系是确定的，编译工具只需要对 ES Module 做静态分析就可以从代码字面量中推断出模块导出的哪些值未曾被其他模块使用，进而将其标记和删除，以此实现打包产物的优化
+## webpack 中的 tree shaking
+首先 「标记」 出模块导出值中哪些没有被用过，其次使用 Terser、UglifyJS 等插件删除掉这些没有被用到的导出语句，以此实现完整的 tree shaking 功能
+## 实际配置
+准备一个 entry.js 和 utils.js
+### webpack v4
+源码如下：
+@[code js](./src/webpack4-treeshaking/enable.js)
+打包结果 tree shaking 生效
+
+但当有函数调用时：
+@[code js](./src/webpack4-treeshaking/disable.js)
+此时的打包结果为：
+![](./images/disable00.png)
+可以看到，将整个导出的模块代码都打包了进去，包括我们没有用到的 cube 等方法

docs/.vuepress/public/logo.png

@@ -0,0 +1,5 @@
+// entry.js
+
+import obj from './utils';
+// console.log(obj.foo);
+obj.add(2,3);

docs/README.md

@@ -0,0 +1,14 @@
+// utils.js
+const bar  = 'bar';
+const foo  = 'foo';
+
+function add() {}
+function cube() {}
+
+export default {
+  bar, foo, add, cube
+}
+
+// entry.js
+import obj from './utils';
+console.log(obj.foo);

docs/bundle/treeshaking/README.md

@@ -0,0 +1 @@
+react

docs/bundle/treeshaking/images/disable00.png

@@ -0,0 +1 @@
+react 源码

docs/bundle/treeshaking/src/webpack4-treeshaking/disable.js

@@ -0,0 +1 @@
+vue

docs/bundle/treeshaking/src/webpack4-treeshaking/enable.js

@@ -0,0 +1,24 @@
+# vue 源码
+
+## 响应式原理
+
+通过数据劫持结合观察者模式，使用 Object.defineProperty 劫持目标对象的属性的 getter 和 setter，在目标对象改变时发送消息给观察者，触发对应回调
+
+### 先来实现 Observer
+
+@[code js{4}](./src//segmentfault//mvvm.js)
+此时执行脚本，第四行就会输出变化，这样我们已经可以监听每个数据的变化了，那么监听到变化之后就是怎么通知订阅者了
+
+所以接下来，要用到观察者模式了，发布者持有订阅者，数据变动触发 notify，调用所有订阅者的 update 方法
+@[code js{4}](./src//segmentfault//mvvm.js)
+
+那么怎么让目标对象持有观察者呢，**如果一个对象属性的 getter 被触发，则它被访问了，也就是说有地方用到了它**，那这个属性就需要被订阅，即需要被 Watcher 观测，如果它后续发生了改变，则需要通知到 watcher 去执行对应的回调
+组件的 render function 执行前，会对数据做响应式化。使用 Object.defineProperty 把对象属性转为 getter 和 setter，并为每个数据添加一个订阅者列表，这个列表会记录所有依赖于这个数据的组件
+
+也就是说，响应式化后的数据相当于发布者
+
+每个组件都对应一个 watcher，这是订阅者的角色
+
+当这个组件的 render function 执行时，都会将本组件的 watcher 放到自己所依赖的响应式数据的订阅者列表里，完成对目标对象的观测，这个过程称为**依赖收集**
+
+当响应式数据发生变化，即目标对象的状态发生了变化，会触发 setter 函数，在其中 notify 该数据的订阅者列表里的 watcher，watcher 会 触发 re-render 来更新视图

docs/bundle/treeshaking/src/webpack5-treeshaking/enable.js

@@ -0,0 +1,73 @@
+// 原文地址：https://segmentfault.com/a/1190000006599500
+var data = { name: "gzz" };
+observe(data);
+data.name = "zl"; // 就会有输出
+
+function observe(data) {
+  if (!data || typeof data !== "object") return;
+  Object.keys(data).forEach((key) => {
+    defineReactive(data, key, data[key]);
+  });
+}
+
+function defineReactive(data, key, val) {
+  var dep = new Dep();
+  observe(val); // 子属性也是对象
+  Object.defineProperty(data, key, {
+    enumerable: true,
+    configurable: false,
+    get: function () {
+      Dep.target && dep.addSub(Dep.target);
+      return val;
+    },
+    set: function (newVal) {
+      if (val === newVal) return;
+      console.log("哈哈哈，监听到值变化了 ", val, " --> ", newVal);
+      val = newVal;
+      dep.notify();
+    },
+  });
+}
+class Dep {
+  constructor() {
+    this.subs = [];
+  }
+  addSub(sub) {
+    this.subs.push(sub);
+  }
+  notify() {
+    this.subs.forEach((sub) => sub.update());
+  }
+}
+
+class Watcher {
+  get(key) {
+    Dep.target = this;
+    this.value = data[key]; // 访问一下data的属性，就会触发 getter 劫持，从而添加订阅者
+    Dep.target = null;
+  }
+}
+
+// 为了提升性能，会先将根节点 el 转换成文档碎片 fragment 进行解析编译操作，解析完成，再将 fragment 添加回原来的真实 dom 节点中
+function Compile(el) {
+  this.$el = this.isElementNode(el) ? el : document.querySelector(el);
+  if (this.$el) {
+    this.$fragment = this.node2Fragment(this.$el);
+    this.init();
+    this.$el.appendChild(this.$fragment);
+  }
+}
+Compile.prototype = {
+  init: function () {
+    this.compileElement(this.$fragment);
+  },
+  node2Fragment: function (el) {
+    var fragment = document.createDocumentFragment(),
+      child;
+    // 将原生节点拷贝到fragment
+    while ((child = el.firstChild)) {
+      fragment.appendChild(child);
+    }
+    return fragment;
+  },
+};

docs/framework/react/README.md

@@ -0,0 +1,31 @@
+---
+lang: zh-CN
+title: vue3
+description: 熟练使用 vue3
+---
+# vue3
+## 新的代码组织方式 `Composition API + <script setup>`
+```vue
+<template>
+  <div>
+    <h1 @click="add">{{count}}</h1>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+let count = ref(1)
+function add(){
+    count.value++
+}
+</script>
+
+<style>
+h1 {
+  color: red;
+}
+</style>
+```
+上面的代码简单实现了一个累加器，我们使用 `template` 标签放置模板，`script` 标签放置逻辑代码，并且用 `setup` 标记我们使用 `<script setup>` 语法。**而在 `<script setup>` 标签内定义的变量和函数，都可以直接在模板里使用**
+### import { ref } from "vue"
+在使用 ref 包裹响应式数据时，注意要修改响应式数据的 value 属性

docs/framework/react/source.md

@@ -0,0 +1 @@
+常用api

docs/framework/vue2-source/README.md

@@ -0,0 +1,8 @@
+---
+lang: zh-CN
+title: 设计模式
+description: 设计模式
+---
+
+# 行为型设计模式
+## [观察者模式](./observer.md)

docs/framework/vue2-source/source.md

@@ -0,0 +1,44 @@
+## 观察者模式
+
+实现一对多关系解耦的行为型设计模式，主要涉及两个角色：
+
+- 观察目标
+- 观察者
+
+多个观察者对象同时监听某一个目标对象；当目标对象状态发生变化时，通知所有观察者对象，使他们能够自动更新
+
+被观察的目标对象里持有观察自己的观察者对象，它知道自己被哪些观察者对象订阅，有增加订阅者、通知订阅者、移除订阅者这个三个基本能力，当自身状态发生变化时，通过 notify 方法通知所有的观察者 update
+
+观察者非常简单，它的行为只有两个，被通知和去执行，本质上是接受目标对象的调用，并且这一步在目标对象类里已经做掉了，所以 observer 只需要实现 update 方法，供目标对象调用，在 update 方法中可以执行 observer 自定义的业务代码
+
+### 特点
+
+观察者要**直接订阅**观察目标
+
+@[code js](./src/observer.js)
+
+## 发布订阅模式
+
+小明想买房子，但还没开盘，不过他只需要把自己的手机号留给售楼处，等到楼盘开售，售楼处就会打电话通知他
+
+并且想买房子的不止小明，还有小红、小白等人，售楼处都保存了他们的联系方式，在合适的时间去通知所有顾客
+
+如果再有新的购房者出现，售楼处只需要多保存一个联系方式即可
+
+异步编程
+
+对象之间解耦合
+
+一个对象里保存了一份回调列表
+
+### 特点
+
+### 与发布订阅模式比较
+
+> 发布订阅模式基于一个事件总线，希望接收通知的对象即 subscriber 也就是订阅者通过自定义事件订阅事件总线，发布事件的对象即 publisher 通过发布事件的方式通知各个订阅了该事件的 subscriber
+
+**区别在于**
+
+- 观察者模式中观察了 subject 的一系列 Observer 对象在被通知后只能执行同一个特定的更新方法，而发布订阅模式中则可以基于不同主题去执行不同的自定义事件
+- 观察者模式中目标对象和观察者对象之间联系的更紧密，耦合性更高，有很强的依赖关系，目标对象收集和维护观察者，并在状态变化时主动通知观察者更新；发布订阅中则彻底解耦
+- 发布订阅在发布者和订阅者之间需要有一个中间人，发布者发布事件名和参数到中间人，中间人像事件的订阅者发送参数