echo的前端成长之路

问题描述： 在一个编辑器中开发页面组件，组件内部对子元素设置了position:absolute定位，并且元素内容区域设置了overflow:hidden属性。 启动项目后，可以在编辑器中可以对该组件

相关概念： 命令式 VS 声明式 从范式上来看，视图层框架通常分为： 命令式框架 更加关注过程，代码本身描述的是“做事的过程”，符合逻辑直觉 声明式框架 更加关注结果，主要是提升代码的可维护性 更新时

在开发页面过程中需要实现两个有意思的布局样式，在此记录并分享一下。 样式一： 实现思路: 通过分析，上图布局可以明确分为 3行 2列，各图片占位如下图： 通过使用grid-template-areas

在vue项目中，一般说到状态管理，我们会想到pinia，它可以帮助我们管理需要在多个页面、组件间共享的数据，并且根据数据的更新触发相关的渲染更新。但如果是数据变化不会引起页面刷新的全局数据呢？

Vue Router是Vue官方的客户端路由解决方案。用于在单页应用中将浏览器的URL和用户看到的内容绑定起来。 使用Vue Router 通过createRouter创建路由器实例 可设置属性有：

一直对nginx处于比较浅显的了解，趁着这次调试项目，对了解到的nginx也做一次总结。 问题背景： 本地vite项目运行正常，但是部署到对应环境后，页面无法正常访问。

前端工程化是通过工具和规范，提升开发效率、代码质量和团队协作的系统化方案。大致包含以下内容： 代码规范 Git Hooks 环境变量 构建优化 本文内容包含： 使用 vite 创建 vue 项目 配置

cookie 在客户端存储用户信息 Web Storage 解决客户端存储不需要频繁发送cookie回服务器的问题 indexedDB 是浏览器中存储结构化数据的一个方案

XHR 把Ajax推到历史舞台上的关键技术是XMLHttpRequest（XHR）对象。 Fetch API替代了XHR。 WebSocket是与服务器的全双工、双向通信渠道。

JS与HTML的交互是通过事件实现的。 可以使用仅在事件发生时执行的监听器订阅事件。在传统软件工程领域，这个模型叫“观察者模式”，其能够做到页面行为与页面展示的分离 浏览器的事件系统非常复杂。

同步行为和异步行为的对立统一是计算机科学的一个基本概念。特别是在JS这种单线程事件循环模型中，同步操作和异步操作更是代码所要依赖的核心机制

节点类型 文档对象模型（DOM）是HTML和XML文档的编程接口，表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。 document节点表示每个文档的根节点。根节点的唯一子节

表单基础 Web表单在HTML中以<form>元素表示，在JS中则以HTMLFormElement类型表示。

BOM是使用JS开发Web应用程序的核心。 Window对象 BOM的核心是window对象，表示浏览器的实例。 window对象在浏览器中有两重身份，一个是ECMAScript中的Global对象，

函数实际上是对象，每个函数都是Function类型的实例 定义函数的方法有 函数表达式 函数声明 箭头函数 Function构造函数 (不推荐) 函数名 因为函数是对象，所以函数名就是指向函数对象的指

ES6规范新增了两个高级特性：迭代器（iterator）和生成器。 使用这两个特性，能够更清晰、高效、方便地实现迭代

引入概念点 代理 代理是目标对象的抽象。目标对象既可以直接被操作，也可以通过代理来操作。 defineProperty 在proxy之前，使用defineProperty的set和get对数据进行拦截

有几种不同的JS操作会调用同一个捕获器处理程序。不过，对于在代理对象上执行的任何一种操作，只会有一个捕获处理程序被调用。不会存在重复捕获的情况。

JS中的对象是引用值，可以通过几种内置引用类型创建特定类型的对象。 ES6新增了一批引用类型：Map、WeakMap、Set和WeakSet。这些类型为组织应用程序数据和简化内存管理提供了新能力。

Array Array类型表示一组有序的值，并提供了操作和转换值的能力。 ECMAScript数组是动态大小的，每个元素都可以存储任意类型的数据。 创建数组 使用Array构造函数 let color