diff --git a/src/.vitepress/sidebars/ecma-script.yaml b/src/.vitepress/sidebars/ecma-script.yaml index c4c6776..da4ee7a 100644 --- a/src/.vitepress/sidebars/ecma-script.yaml +++ b/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 \ No newline at end of file diff --git a/src/.vitepress/sidebars/vue.yaml b/src/.vitepress/sidebars/vue.yaml index d93055c..e86c304 100644 --- a/src/.vitepress/sidebars/vue.yaml +++ b/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#表达式 \ No newline at end of file + - 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#表达式 \ No newline at end of file diff --git a/src/frontend/vue/template-syntax/interpolation.md b/src/frontend/vue/template-syntax/interpolation.md new file mode 100644 index 0000000..4c60126 --- /dev/null +++ b/src/frontend/vue/template-syntax/interpolation.md @@ -0,0 +1,11 @@ +# 插值表达式 + +## 什么是插值表达式 + +插值表达式允许在 HTML 模版中使用双大括号 `{{}}` 包裹 Javascript 表达式，表达式的值会被直接插入到模版中。 + +## 插值表达式的使用 + +所有可以被求值的 Javascript 代码都可以用在插值表达式中，例如：文本内容、三元表达式、数字计算、函数调用等。 + +<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/Interpolation.vue diff --git a/src/javascript/ecma-script/proxy-and-reflect/proxy.md b/src/javascript/ecma-script/proxy-and-reflect/proxy.md new file mode 100644 index 0000000..65351cc --- /dev/null +++ b/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