qq_34306228的博客

hooks最重要的特点：对于我们来说，不需要关心内部的逻辑，而且与Vue2相比，提供了一个非常合理的方式，使用Vue2的option API很容易写出三五千行的代码，但是对于函数式编程来说，按照逻辑功能拆分下来，一个文件至少包含一个功能，其他功能引用即可。

登录注册真这么简单吗？针对普通的table，数据量特别大的时候，要怎么做呢？Canvas是没有事件机制的，因此这个事件(鼠标点击事件等)需要我们自己代理去做，把这个事件计算，拿到位置等后处理选中单元格现在smooth-dnd属于是年久失修的一个状态了，因为目前已经不支持vue3的这部分内容了，所以我们使用的时候，需要先在他基础上拓展一下将拖拽的逻辑提取出来DndContainer.js文件，做封装DndContainer.js

将components/RightPanel.vue 移到components/RightPanel目录下去这里，只有通过computed、watch、将他的api这些语法全部连接起来，它才会有一个响应式的表现，如果不这样做，只会在初始化进来的时候操作一次，后续的话，是不会再走的，这也是跟React很大的一个区别。之前探讨过更细颗粒度的更新，更细粒度的管理，在React中是通过信号的方式来进行状态的维护的。TextSetting.vueImageSetting.vueChartSetting.v

右侧栏配置主要是表单相关的内容，表单处理是开发中用的特别多的场景；今天从架构师的视角来看下这个表单怎么设计，动态表单、复杂表单、表单联动。先将左侧栏复制一份粘到右侧栏上views/LayoutView.vue全部代码：现在的import包是没有按照顺序去排列的，应该有一个排列顺序才对，这里应该安装一个eslint插件来去自动修复的，全部代码：.eslintrc.cjs全部代码：pnpm i安装LeftPanel.vueLayoutView.vueBlockRenderer.

接下来要做的是，中间区域Block相关的内容，block相关的内容最重要的就是，数据协议设计和整体渲染器的逻辑渲染器概念：简单点说就是，封装他的组件。比如做了一个图表，可以说封装了一个图表组件，如果做了一个表单校验，可以说做了一个表单校验组件，或者写了一些业务组件，但是这些点要是上升一点，就是，表单渲染 – 表单渲染器，表单渲染组件，表单规则约定 – 表单规则校验器；可以美化这些词语，提高简历数据协议：左边物料区有很多的物料列表，将左边的物料拖到中间编排区进行编排，拖拽之后，这些内容区域就能组装成一个页面，

全部代码：LayoutView.vue全部代码：stores/debug.ts全部代码：stores/editor.ts跨模块的数据需要存在store中AppNavigator.vue全部代码：全部代码：store/editor.ts全部代码：LeftPanel.vue全部代码：LayoutView.vue全部代码：

创建LeftPanelLayoutView.vuebase.css全部代码：LeftPanel.vue分类：流式、自由、grid、retoolpackage.json:创建文件componentsSmoothDndSmoothDndContainer.ts - 容器SmoothDndDraggable.ts - 拖拽对象utils.tsSmoothDndContainer.tsutils.tsSmoothDndDraggable.tsLe

stores/counter.ts创建editor.ts文件LayoutView.vueicon-park githubicon-park官网store/debug.ts创建debug.ts文件src/components/AppNavigator.vuesrccomponents_test_AppNavigator.tsAppNavigator.vueAppNavigator.ts:AppNavigator.vue:theme样式创建rese

创建ActionsView、DataSourceView、LayoutView三个文件。删除示例文件AboutView、AboutAboutView、HomeView三个文件。

eslint跑起来的过程中需要指定一个env环境，这个千万不要忘记了。除了已有的基础架子之外，还要在这基础上再加一些规范化的产物。.vue,.js相关的内容用eslint做规范检查。git commit -m “规范化相关内容”全程参与了 - 把控/管控App的生命周期。创建stylelint.config.cjs。创建custom-words.txt。stylelint检查样式相关的。像这样就是暂时没大问题了。设置npm官方下载源。

编辑器 -> 管理端发布上线 ->应用端但是一般很多公司产品的管理端和应用端结合，进行高度复用。这是因为，在管理端进行拖拽的时候，是比较消耗性能的，要更好的考虑性能，所以很多产品都会用 canvas，用画布的形式画、绘制 对齐的网格线，或者编排过程中的辅助线；但是在渲染过程中，在应用端是没有任何的辅助线和网格线，所以一般将管理端和应用端分开考虑。管理端和应用端中间的联系一般是组件的复用，但是在页面中，编排引擎，渲染器方面，他们俩不是高度复用illaretool。

package.json:图表渲染器(图表组件)一般负责：基于数据协议的图表渲染逻辑渲染逻辑：通用渲染逻辑、特殊渲染逻辑BarRenderer.vue、LineRenderer.vue，统一在ChartsRenderer.vue中进行分发渲染（在这一层将不同的图表类型差异磨平）图表的事件处理图表举例：创建 ChartsRenderer.vuecomponentsChartsRenderer.vueApp.vue项目中：ChartsDataTransformer.t

使用代码分割来解决。不管是useForm，还是自己去封装表单，表格的插件，都需要将UI层（组件）和状态层（CompositionAPI负责产出的状态数据）分离，在用的地方，使用useForm，useTable等等解构出来。1.设计理念比较好 基于hooks实现的/CompositionAPI实现的，能够解决很多事情，例如，表单类型校验规则，动态表单，表单间联动，统一的表单状态处理等等。如果组件多了，渲染引擎变得慢或卡，一家公司的商城，首页用了无代码平台来搭建，首页要等一会才出来，这个如何解决?

git hooks提供的pre-commit等，可以在开发的时候，在提交对应的时机，发生一些作用。2.创建文件pre-commit.mjs 在husky/pre-commit.mjs。pre-commit:预提交 执行提交后会先预提交一下，失败的话全部打回，不会提交。husky是一个钩子工具，但是钩子本身不是husky的，钩子是属于git的。加依赖，devDependencies加。以后写脚本的时候可以尝试用zx写。node版本：20.11.1。pnpm版本：9.0.4。帮助轻松拦截hooks。

App.vuemain.jsApp.vuemain.jsglobal注入到new Vue实例上，然后在App.vue的实例中执行自己当前的data与Vue实例执行顺序有关，先进行当前实例化声明（全局注入），然后再实例化声明的时候注入我们内部的mixin，是外部的的global更高一点像Vue-router、Vuex等也是插件，通过插件注入进去的Vue-routerVue-router关于插件的内容Vuexinstall的方法，将全部内容挂载到Vue的构造函数上，通过use方法挂载到Vue实

webpack：cross-env能够声明不同的环境，dev，prod，test 能够通过dev注入到process.env.NODE_ENV。cross-env 能够注入到全局环境下，在window，linux，mac不同环境下都能使用cross-env做好兼容，只是用于注入变量。当src/server，webpack，babel.config.ts这几个发生变化的时候，才会去解析这个包。当我们的组件发生变化时，只要在外面包裹ErrorBoundary，就能避免页面报错，展示的是兜底错误的提示。

当页面首次加载时候，spa只会返回空节点，内容都是空的，而ssr会将页面的骨架，内容等提前加载出来，提高效率。spa首屏加载很慢。SSR:利于首屏加载CSR:(spa)不利于首屏加载，页面结构为空节点本次项目可以执行在浏览器，也可以执行在客户端中。

d.ts是所有类型的集合，全称是：declaration type 都是通过 @types/react去管理的。针对不同场景下参数的兼容，参数不同，则场景不同，考虑到的情况也不一样。以上两种写法，一般都用第一种写法，比较规范，考虑到代码扩展性等。引入的是文件的类型，导出的时候也是按照文件模块/类型引用。关于ts配置项，tsconfig.json。再 tsconfig includes注入。@types是约定俗成的。全局模块，是全局直接用。

在JavaScript中，o?这个操作符用于在访问对象属性时进行安全的操作，即使对象的某个属性不存在或者为null或undefined，也不会导致运行时错误。.a表示如果对象o存在且具有属性a，则返回o.a的值；如果对象o不存在或者属性a不存在，则返回undefined，而不会抛出错误。一方面，css in js 相对不好处理，但是有对应的方案， 而且比较符合正常开发者定义组件，维护对应的内容。这种语法的引入使得代码更加简洁并且更安全，特别是在处理深层嵌套的对象属性时。看具体原理，内部具体是怎么做的。

标记清除（Mark-Sweep），目前在 JavaScript引擎 里这种算法是最常用的，到目前为止的大多数浏览器的 JavaScript引擎 都在采用标记清除算法，各大浏览器厂商还对此算法进行了优化加工，且不同浏览器的 JavaScript引擎 在运行垃圾回收的频率上有所差异。标记清除算法有一个很大的缺点，就是在清除之后，剩余的对象内存位置是不变的，也会导致空闲内存空间是不连续的，出现了 内存碎片（如下图），并且由于剩余空闲内存不是一整块，它是由不同大小内存组成的内存列表。

CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案；AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅；CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在Node.js中运行；

因为 new 的结果是一个新对象，所以在模拟实现的时候，我们也要建立一个新对象，假设这个对象叫 obj，因为 obj 会具有 Person 构造函数里的属性，我们可以使用 Person.apply(obj, arguments)来给 obj 添加新的属性。当传递 value 到函数 foo 中，相当于拷贝了一份 value，假设拷贝的这份叫 _value，函数中修改的都是 _value 的值，而不会影响原来的 value 值。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

结合着之前讲的变量对象和执行上下文栈，我们来总结一下函数执行上下文中作用域链和变量对象的创建过程checkscope 函数被创建，保存作用域链到 内部属性[[scope]]执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数[[scope]]属性创建作用域链。

JavaScript采用静态作用域，于是执行 foo 函数，先从 foo 函数内部查找是否有局部变量 value，如果没有，就根据书写的位置，查找上面一层的代码，也就是 value 等于 1，所以结果会打印 1。如果没有，就从调用函数的作用域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。但是使用var表达式定义函数add1，只有变量声明提前了，变量初始化代码仍然在原来的位置，没法提前执行。用函数语句创建的函数add2，函数名称和函数体均被提前，在声明它之前就使用它。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。// 页面窗口改变 / 视窗大小改变时。// 1. 做纵向的可见判断。// 3. 防止图片重复加载。// 加载需要懒加载的图片。// 判断图片是否可见。// 横纵方向改变时。

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链。继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript中大多是借助原型对象实现继承的特性。男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响。正常的原型链都会终止于 Object 的原型对象，Object 原型的原型是 null。//女人 构造函数 继承 想要继承 Person。

所有的数据和方法都被封装在对象内，由开发者自己选择性的去公开哪些属性和方法，对于创建的实例来说他能访问的只能是这些公开的属性和方法，而对于其他对象来说是无权访问此类或者进行更改，封装这一特性为程序提供了更高的安全性。对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。所以，我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有。

逻辑与操作符是一种短路操作符，意思就是如果第一个操作数决定了结果，那么永远不会对第二个操作数求值。对逻辑与操作符来说，如果第一个操作数是 false，那么无论第二个操作数是什么值，结果也不可能等于 true。，只有当两个操作数的数据类型和值都相等时，才会返回true。一元减由一个减号（-）表示，放在变量前头，主要用于把数值变成负值，如把 1 转换为-1。其中一个操作数是NaN，相等运算符会返回false，不相等运算符会返回true。，只有两个操作数在不进行类型转化的情况下是不相等的，才会返回true。

var name="张三",age=18,sex="男";

页面有很多的图片，在发送请求访问HTML，也可能包含其他的资源、所以我们每一次请求都要建立一次TCP的链接和断开增加了通信量的开销。表示服务器接收的请求已经成功处理，但是返回的响应报文中不包含实体的主体部分，而且不返回任务实体的主体。表示对请求资源的访问被服务器拒绝了。服务器接收到附带的条件的请求后，只有判断指定条件为真，才会执行请求。目的: 保护客户端的安全，防止不受信任的网站利用用户的浏览器向其他网站发送恶意请求。实体标记(ETag) 值和请求资源的ETag的值不一致的时候，告诉服务器处理请求。

标准提升 hc周末统一面试 7~30天。

搭建 HTTP 服务，响应一个 4 行 3 列的表格，并且要求表格有隔行换色效果，且点击单元格能高亮显示。浏览器打开form表单，输入账户密码，点击提交。按照以下要求搭建 HTTP 服务。提交之后页面跳转链接。

IP 也称为 「IP 地址」，本身是一个数字标识。例如 192.168.1.3ip本身是一个32Bit的二进制数字，例如，11000000101010000000000100000011但是为了标识，将每8个分为一组，转成十进制数字，并每组加上“.”来组合类型说明本机回环IP地址局域网IP (私网 IP)广域网 IP (公网 IP)除上述之外端口：应用程序的数字标识一台现代计算机有65536个端口（0~65535）一个应用程序可以使用一个或多个端口。

HTTP（hypertext transport protocol）协议；在浏览器输入百度网址，并按下回车，fiddler出现的是按下回车之后的所有请求。然后为了更好的监听浏览器请求，将所有进程选择浏览器进程。需求：删除其中一个文件，序号中断，需要后续的序号顺连。JSON格式的数据或者是GET参数形式的数据等方式。不懂的也可在mdn上查到（与请求头查询链接一致）__filename 文件的绝对路径。协议：双方必须共同遵从的一组约定。key：value的格式。重新启动fiddler。百度的响应体是HTML。

在 Node.js 中，我们可以使用 rename 或 renameSync 来移动或重命名 文件或文件夹。在 Node.js 中，我们可以使用 readdir 或 readdirSync 来读取文件夹。在 Node.js 中，我们可以使用 stat 或 statSync 来查看资源的详细信息。在 Node.js 中，我们可以使用 rmdir 或 rmdirSync 来删除文件夹。在 Node.js 中，我们可以使用。

同步处理 JavaScript 主线程 会等待 其他线程的执行结果，然后再继续执行主线程的代码，效率较低。异步处理 JavaScript 主线程 不会等待 其他线程的执行结果，直接执行后续的主线程代码，效率较好。文件复制：复制【资料】文件夹下的【动画1.gif】到 【复制文件】文件夹下一份。注意的是，实质上读取速度是比写入速度要快的，所以一般是读取几块才会写一块。因为第一种是一次性将文件读取到内存，然后再执行之后的工作。第二种是读一块到内存，然后再写一块到文件中。流式读取：分块读取（分块加载到内存）

Buffer中文译为【缓冲区】，是一个类似于Array的对象，用于表示固定长度的字节序列。换句话说，Buffer就是一段固定长度的内存空间，用于处理二进制数据。程序一般保存在硬盘中，软件安装的过程就是将程序写入硬盘的过程。程序在运行时会加载进入内存，然后由 CPU 读取并执行程序。以上都不能使用，都会像上面一样报错。线程是一个进程中执行的一个执行流。toString默认是按照。注：pkg是mac电脑的。进程是程序的一次执行过程。一个线程是属于某个进程的。

全部代码：Login.vue全部代码：CommonAside.vue全部代码：router/index.js全部代码：全部代码：CommonHeader.vue全部代码：main.js全部代码：项目到此Vue2部分也就结束了

新增的代码：mock.js全部代码：全部代码：安装cookie全局代码：router/index.js全部代码：mock.js全部代码：api/index.js全部代码：Login.vue全部代码：CommonHeader.vue全部代码：

使用的组件和前面的表格使用的一致。mock.js新增代码：全部代码：index.js新增代码全部代码：Users.vue新增代码全部代码：新增和编辑功能Users.vue新增代码：全部代码：新增代码：全部代码：