Merge pull request #98 from GuoXiCheng/dev-c

Dev c

src/.vitepress/sidebars/ecma-script.yaml

@@ -4,6 +4,7 @@
       - text: ES 的版本
         link: /javascript/ecma-script/es-version
       - text: JavaScript 引擎
+        collapsed: true
         items:
           - text: 调用栈
             link: /javascript/ecma-script/javascript-engine/call-stack
@@ -23,6 +24,7 @@
           - text: 事件循环
             link: /javascript/ecma-script/javascript-engine/event-loop
       - text: 变量声明
+        collapsed: true
         link: /javascript/ecma-script/variable-declaration
         items:
           - text: var
@@ -32,6 +34,7 @@
           - text: const
             link: /javascript/ecma-script/variable-declaration#const
       - text: 比较算法
+        collapsed: true
         link: /javascript/ecma-script/comparison-algorithm
         items:
           - text: 松散相等
@@ -45,6 +48,7 @@
       - text: 浅拷贝和深拷贝
         link: /javascript/ecma-script/shallow-copy-and-deep-copy
       - text: 表达式与操作符
+        collapsed: true
         items:
           - text: 条件访问表达式
             link: /javascript/ecma-script/expression-and-operator/conditional-access-expression
@@ -69,12 +73,14 @@
               - text: 逻辑空值合并赋值 (??=)
                 link: /javascript/ecma-script/expression-and-operator/logical-assignment-operator#空值合并赋值操作符
       - text: 基本引用
+        collapsed: true
         items:
           - text: Date
             link: /javascript/ecma-script/basic-reference/date
           - text: 正则表达式
             link: /javascript/ecma-script/basic-reference/reg-exp
       - text: 集合引用
+        collapsed: true
         items:
           - text: Array
             items:
@@ -110,6 +116,7 @@
           - text: Set
             link: /javascript/ecma-script/collection-reference/set
       - text: 迭代器与生成器
+        collapsed: true
         items:
           - text: 迭代器
             link: /javascript/ecma-script/iterators-and-generators/iterator
@@ -127,6 +134,7 @@
           - text: 生成器
             link: /javascript/ecma-script/iterators-and-generators/generator
       - text: JSON
+        collapsed: true
         items:
           - text: 什么是 JSON
             link: /javascript/ecma-script/json/what-is-json
@@ -144,6 +152,7 @@
           - text: 反序列化
             link: /javascript/ecma-script/json/deserialization
       - text: 函数
+        collapsed: true
         items:
           - text: 定义函数
             link: /javascript/ecma-script/function/define-function
@@ -152,6 +161,7 @@
           - text: 闭包
             link: /javascript/ecma-script/function/closure
       - text: 对象
+        collapsed: true
         items:
           - text: 原型
             link: /javascript/ecma-script/object/prototype
@@ -170,7 +180,20 @@
                 link: /javascript/ecma-script/object/property-descriptor#获取属性描述符
               - text: 获取所有属性描述符
                 link: /javascript/ecma-script/object/property-descriptor#获取所有属性描述符
+      - text: 代理与反射
+        collapsed: true
+        items:
+          - text: 代理
+            link: /javascript/ecma-script/proxy-and-reflect/proxy
+            items:
+              - text: 什么是代理
+                link: /javascript/ecma-script/proxy-and-reflect/proxy#什么是代理
+              - text: 创建代理
+                link: /javascript/ecma-script/proxy-and-reflect/proxy#创建代理
+              - text: 创建可撤销代理
+                link: /javascript/ecma-script/proxy-and-reflect/proxy#创建可撤销代理
       - text: 模块 
+        collapsed: true
         items:
           - text: 理解模块
             link: /javascript/ecma-script/module/understand-module
@@ -187,6 +210,7 @@
           - text: ES6 的模块
             link: /javascript/ecma-script/module/module-in-es6
       - text: 异步
+        collapsed: true
         items:
           - text: 手写 Promise
             link: /javascript/ecma-script/async/write-promise

src/.vitepress/sidebars/vue.yaml

@@ -5,16 +5,20 @@
         link: /frontend/vue/introduction/what-is-vue
   - text: Vue
     items:
-      - text: 核心概念
+      - text: 模版语法
         items:
-          - text: 模版语法
-            link: /frontend/vue/core-concepts/template-syntax
-            items:
-              - text: 文本插值
-                link: /frontend/vue/core-concepts/template-syntax#文本插值
-              - text: 原始 HTML
-                link: /frontend/vue/core-concepts/template-syntax#原始-html
-              - text: 属性绑定
-                link: /frontend/vue/core-concepts/template-syntax#属性绑定
-              - text: 表达式
-                link: /frontend/vue/core-concepts/template-syntax#表达式
+          - text: 插值表达式
+            link: /frontend/vue/template-syntax/interpolation
+      # - text: 核心概念
+      #   items:
+      #     - text: 模版语法
+      #       link: /frontend/vue/core-concepts/template-syntax
+      #       items:
+      #         - text: 文本插值
+      #           link: /frontend/vue/core-concepts/template-syntax#文本插值
+      #         - text: 原始 HTML
+      #           link: /frontend/vue/core-concepts/template-syntax#原始-html
+      #         - text: 属性绑定
+      #           link: /frontend/vue/core-concepts/template-syntax#属性绑定
+      #         - text: 表达式
+      #           link: /frontend/vue/core-concepts/template-syntax#表达式

src/frontend/vue/template-syntax/interpolation.md

@@ -0,0 +1,11 @@
+# 插值表达式
+
+## 什么是插值表达式
+
+插值表达式允许在 HTML 模版中使用双大括号 `{{}}` 包裹 Javascript 表达式，表达式的值会被直接插入到模版中。
+
+## 插值表达式的使用
+
+所有可以被求值的 Javascript 代码都可以用在插值表达式中，例如：文本内容、三元表达式、数字计算、函数调用等。
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/Interpolation.vue

src/javascript/ecma-script/proxy-and-reflect/proxy.md

@@ -0,0 +1,23 @@
+# 代理
+
+## 什么是代理
+
+代理是一个对象，它包装另一个对象并拦截对该对象的访问。代理可以拦截并重定向对目标对象的许多操作，包括属性查找、赋值、函数调用等。
+
+::: warning
+代理与反射是 ES6 的新特性，在 ES6 之前没有类似代理的特性，因此转译器可能无法将代理转译为之前的 ES 代码。
+:::
+
+## 创建代理
+
+需要使用 `Proxy` 构造函数来创建代理对象。
+
+`Proxy` 构造函数接受两个参数：目标对象 `target`和处理程序对象 `handler`。
+
+<<< @/../projects/javascript-sandbox/src/proxy-and-reflect/proxy.ts#create-proxy
+
+## 创建可撤销代理
+
+`Proxy.revocable` 方法可以创建一个可撤销的代理。
+
+<<< @/../projects/javascript-sandbox/src/proxy-and-reflect/proxy.ts#revocable-proxy