高飞宇 | Goofy – 乍一看很正经

网站标签

该站未曾设置keywords

---

网站描述

该站未曾设置description

---

上一篇：杭州橡胶接头|杭州单球橡胶膨胀节|杭州双球橡胶避震喉-淞江集团杭州网

下一篇：深圳市诺值文化传播有限公司

seo综合信息

SEO信息	百度来访IP：- | 移动端来访IP：- | 出站链接：1 | 站内链接：156
IP网速：	IP地址：115.28.178.43 [中国山东青岛 阿里云] | 网速：582毫秒
ALEXA排名	世界排名：- | 预估IP：- | 预估PV：-
备案信息	登录可见 | 名称：登录可见 | 已创建：10年9个月5天

收录	百度	360	搜狗	谷歌
查询	0	0	0	0

电脑关键词	手机关键词	页面友好	首页位置	索引	近期收录
0	0	电脑端优秀	-	0	0

协议类型HTTP/1.1 200 OK 页面类型text/html; charset=UTF-8 服务器类型nginx 是否压缩是 原网页大小133235 压缩后大小37681 压缩比71.72%

网站快照

高 飞 宇 | G o o f y – 乍 一 看 很 正 经 关 闭 搜 索 搜 索 ： 搜 索 跳 转 到 内 容 高 飞 宇 | G o o f y 乍 一 看 很 正 经 菜 单 前 端 开 发 C S S H t m l J a v a S c r i p t T y p e S c r i p t 算 法 移 动 端 开 发 A c t i o n S c r i p t 交 互 效 率 本 地 存 储 专 题 A C G P C N i n t e n d o S o n y 影 视 乐 图 更 多 搜 索 ： 搜 索 打 开 搜 索 聊 一 聊 n p m i n i t 2 0 2 3 年 2 月 1 9 日 2 0 2 3 年 2 月 2 0 日 由 G o o f y 发 布 在 前 端 开 发 本 文 内 容 适 用 的 n o d e 版 本 范 围 是 1 4 + （ n p m 6 + ） ， 相 关 例 子 实 在 n o d e 1 6 + （ n p m 8 + ） 下 运 行 的 。 在 n p m 使 用 还 比 较 初 级 的 时 代 ， 如 果 想 做 一 些 项 目 初 始 化 的 脚 手 架 ， 主 要 是 依 靠 g u l p 、 g r u n t 、 y e o m a n 等 工 具 进 行 搭 建 。 项 目 初 始 化 ， 主 要 是 将 一 套 代 码 的 模 板 （ t e m p l a t e ） 进 行 一 系 列 互 动 和 文 件 操 作 ， 拷 贝 到 用 户 的 项 目 目 录 ， 来 进 行 提 效 。 而 现 在 我 们 有 了 更 多 更 简 单 的 选 择 ， 比 如 n p m i n i t 。 如 果 你 有 一 些 做 项 目 初 始 化 的 需 求 ， 那 这 篇 文 章 应 该 可 以 帮 到 你 。 什 么 是 n p m i n i t 如 果 你 阅 读 过 c r e a t e r e a c t a p p 和 v u e 的 官 方 指 引 ， 那 再 Q u i c k S t a r t 中 都 提 到 了 ， 一 段 代 码 。 # r e a c t n p m i n i t r e a c t a p p m y a p p # v u e n p m i n i t v u e @ l a t e s t 通 过 执 行 这 些 命 令 ， 你 会 被 问 及 一 些 问 题 ， 根 据 需 要 完 成 后 ， 你 就 能 创 建 一 个 r e a c t 应 用 或 者 v u e 的 应 用 。 这 就 是 文 章 前 面 说 的 ， 项 目 初 始 化 。 发 现 v i t e 用 的 是 n p m c r e a t e 在 v i t e 快 速 创 建 项 目 的 时 候 ， 会 发 现 文 档 中 的 命 令 有 些 变 化 。 n p m c r e a t e v i t e @ l a t e s t 这 里 的 n p m c r e a t e 其 实 和 n p m i n i t 等 价 ， 是 个 别 名 根 据 n p m ， v e r s i o n 8 版 本 的 文 档 ， 以 下 三 种 命 令 是 等 价 的 n p m i n i t n p m c r e a t e n p m i n n i t 还 发 现 有 用 n p x 的 前 面 提 到 的 c r e a t e r e a c t a p p 中 ， 还 会 看 到 这 样 的 命 令 。 n p x c r e a t e r e a c t a p p m y a p p n p x 又 和 n p m i n i t 有 什 么 关 系 呢 ， 让 我 们 先 来 看 下 n p m i n i t 的 执 行 逻 辑 。 n p m i n i t 是 如 何 工 作 的 n p m i n i t c a n b e u s e d t o s e t u p a n e w o r e x i s t i n g n p m p a c k a g e . i n i t i a l i z e r i n t h i s c a s e i s a n n p m p a c k a g e n a m e d c r e a t e , w h i c h w i l l b e i n s t a l l e d b y n p m e x e c , a n d t h e n h a v e i t s m a i n b i n e x e c u t e d — p r e s u m a b l y c r e a t i n g o r u p d a t i n g p a c k a g e . j s o n a n d r u n n i n g a n y o t h e r i n i t i a l i z a t i o n r e l a t e d o p e r a t i o n s . h t t p s : / / d o c s . n p m j s . c o m / c l i / v 8 / c o m m a n d s / n p m i n i t ? v = t r u e # d e s c r i p t i o n n p m i n i t 的 工 作 方 式 ， 其 实 官 网 说 的 是 比 较 清 楚 的 ， 就 是 将 包 名 前 面 加 上 c r e a t e 后 到 n p m p a c k a g e 中 找 到 对 应 包 ， 并 执 行 包 中 配 置 的 b i n 。 也 就 是 说 执 行 的 是 n p m i n i t v u e @ l a t e s t ， 实 际 去 找 的 包 其 实 是 n p m i n i t c r e a t e v u e @ l a t e s t 除 了 会 自 动 在 包 名 前 面 加 c r e a t e 去 查 找 ， 还 有 一 些 其 他 的 规 则 n p m i n i t f o o n p m e x e c c r e a t e f o o n p m i n i t @ u s r / f o o n p m e x e c @ u s r / c r e a t e f o o n p m i n i t @ u s r n p m e x e c @ u s r / c r e a t e n p m i n i t @ u s r @ 2 . 0 . 0 n p m e x e c @ u s r / c r e a t e @ 2 . 0 . 0 n p m i n i t @ u s r / f o o @ 2 . 0 . 0 n p m e x e c @ u s r / c r e a t e f o o @ 2 . 0 . 0 而 文 档 中 也 很 明 确 的 说 明 了 ， n p m i n i t 其 实 是 依 赖 n p m e x e c 去 执 行 的 命 令 ， 因 此 你 也 可 以 通 过 n p m e x e c 实 现 所 有 n p m i n i t 的 能 力 ， 就 是 命 令 会 复 杂 很 多 罢 了 。 传 递 参 数 给 b i n 大 家 可 能 知 道 n p m 的 传 参 方 式 ， 这 里 以 v i t e 举 例 # n p m 6 . x n p m c r e a t e v i t e @ l a t e s t m y v u e a p p t e m p l a t e v u e # n p m 7 + , e x t r a d o u b l e d a s h i s n e e d e d : n p m c r e a t e v i t e @ l a t e s t m y v u e a p p t e m p l a t e v u e 从 v i t e 文 档 中 给 出 的 命 令 可 以 发 现 ， n p m 不 同 的 版 本 传 参 方 式 还 有 所 不 同 。 这 源 于 各 个 版 本 的 p r o c e s s . a r g v 的 实 现 各 不 相 同 ， n p m 6 会 将 第 一 个 解 析 到 结 果 中 ， 而 n p m 7 + 则 不 会 在 p r o c e s s . a r g v 体 现 第 一 个 。 而 如 果 你 想 让 你 的 用 户 不 感 知 版 本 问 题 可 以 在 代 码 中 做 个 简 单 的 兼 容 ， 将 参 数 统 一 为 n p m 7 + 的 效 果 ， 如 ： f u n c t i o n r e m o v e F i r s t A r g B y S t r i n g ( a r g v , s = ) r e t u r n n e w A r g v ; } r e m o v e F i r s t A r g B y S t r i n g ( p r o c e s s . a r g v ) ; 深 入 n p m i n i t 文 章 写 到 这 里 ， 动 手 能 力 强 的 同 学 ， 就 可 以 开 始 对 自 己 已 有 的 复 制 代 码 的 工 具 进 行 一 些 改 造 了 。 使 用 命 令 的 时 候 你 也 会 发 现 一 些 现 象 。 比 如 在 使 用 这 个 命 令 进 行 项 目 创 建 的 时 候 ， 命 令 行 会 先 提 出 一 个 问 题 。 n p m c r e a t e v i t e @ l a t e s t N e e d t o i n s t a l l t h e f o l l o w i n g p a c k a g e s : c r e a t e v i t e @ 4 . 1 . 0 O k t o p r o c e e d ? ( y ) 命 令 行 的 问 题 是 ， 你 需 要 安 装 对 应 的 安 装 包 。 那 有 经 验 的 同 学 可 能 就 会 有 一 些 问 题 了 ： 命 令 行 为 什 么 会 知 道 我 没 有 装 这 个 包 这 个 包 安 装 后 存 到 了 哪 里 这 个 安 装 包 中 带 了 版 本 号 ， 后 续 这 个 包 更 新 了 ， 要 如 何 更 新 以 前 做 脚 手 架 的 话 这 些 问 题 是 都 要 考 虑 的 。 而 n p m i n i t 的 优 势 就 是 在 于 ， 将 这 些 问 题 都 考 虑 到 了 ， 即 使 你 不 了 解 这 些 问 题 ， 也 不 会 遇 到 什 么 问 题 。 而 为 了 更 严 谨 ， 我 还 是 研 究 了 一 下 这 块 的 逻 辑 。 前 文 提 到 了 n p m i n i t 其 实 就 是 基 于 n p m e x e c 实 现 的 ， 那 咱 们 就 看 看 对 应 的 代 码 。 h t t p s : / / g i t h u b . c o m / n p m / c l i / b l o b / v 8 . 1 9 . 4 / w o r k s p a c e s / l i b n p m e x e c / l i b / i n d e x . j s 怎 么 判 断 有 没 有 这 个 包 简 单 来 说 ， 这 部 分 代 码 的 逻 辑 就 是 ： 检 查 当 前 路 径 下 是 否 有 目 标 的 包 ， 如 果 有 返 回 ， 没 有 往 下 检 查 全 局 （ 通 过 g 安 装 的 包 ） 是 否 有 目 标 的 包 ， 如 果 有 返 回 ， 没 有 往 下 检 查 缓 存 是 否 有 目 标 包 ， 如 果 有 返 回 ， 没 有 往 下 去 当 前 全 局 配 置 的 源 中 招 是 否 有 目 标 包 ， 如 果 有 返 回 ， 如 果 没 有 报 错 并 结 束 通 过 上 面 的 流 程 ， 就 能 确 定 是 不 是 有 这 个 包 了 。 包 安 装 到 了 哪 里 首 先 你 会 发 现 这 个 包 不 在 你 执 行 命 令 的 子 目 录 下 ， 另 外 你 也 会 发 现 这 个 包 也 没 有 存 储 到 全 局 包 的 位 置 。 那 这 个 包 去 哪 里 了 呢 … 他 其 实 在 你 n p m 的 缓 存 目 录 中 ， 通 常 在 ~ / . n p m / _ n p x 中 以 包 名 的 h a s h 方 式 命 名 的 目 录 下 存 储 。 你 可 以 通 过 n p m c o n f i g g e t c a c h e 来 找 到 缓 存 目 录 已 经 安 装 了 包 ， 但 是 包 有 了 新 的 版 本 如 何 更 新 前 面 说 了 n p m 已 经 考 虑 了 这 一 点 ， 在 上 面 的 代 码 中 有 一 个 g e t M a n i f e s t 方 法 ， 在 检 查 包 的 过 程 会 通 过 n p m 的 p a c o t e 包 获 取 当 前 源 中 的 最 新 版 本 ， 最 后 检 查 缓 存 中 目 标 包 的 时 候 ， 会 c h e c k 是 否 是 最 新 版 本 ， 如 果 不 是 就 仍 然 会 提 示 需 要 安 装 包 。 其 他 需 要 注 意 的 前 面 提 到 的 示 例 都 没 有 提 到 指 定 版 本 号 @ u s r / f o o @ 2 . 0 . 0 的 场 景 ， 如 果 指 定 了 版 本 ， 存 入 缓 存 的 目 录 名 也 会 带 上 版 本 号 进 行 h a s h 处 理 ， 因 此 同 一 个 包 的 不 同 版 本 会 分 别 缓 存 。 另 外 这 里 虽 然 说 是 缓 存 ， 但 当 前 其 实 并 不 会 被 动 清 理 ， 需 要 主 动 去 对 应 缓 存 目 录 下 清 理 。 如 果 你 是 使 用 n p m i g 的 方 式 安 装 了 c r e a t e 能 力 的 包 ， 就 不 会 走 n p m i n i t 的 流 程 ， 也 就 不 会 检 验 包 是 否 需 要 升 级 ， 而 是 需 要 工 具 包 自 己 实 现 这 个 能 力 ， 并 且 需 要 自 定 义 一 个 执 行 的 命 令 ， 使 用 者 还 需 要 记 一 个 使 用 的 命 令 ， 体 验 不 是 很 好 。 总 结 之 前 都 是 在 使 用 n p m i n i t 初 始 化 各 个 框 架 ， 并 没 有 想 到 是 如 此 方 便 ， 如 果 在 工 作 上 有 类 似 的 需 要 ， 不 放 赶 快 尝 试 一 下 ， 为 自 己 和 小 伙 伴 提 效 吧 。 相 关 链 接 ： C R A ： h t t p s : / / c r e a t e r e a c t a p p . d e v / d o c s / g e t t i n g s t a r t e d / V U E ： h t t p s : / / v u e j s . o r g / g u i d e / q u i c k s t a r t . h t m l # c r e a t i n g a v u e a p p l i c a t i o n V i t e ： h t t p s : / / c n . v i t e j s . d e v / g u i d e / N p m ： h t t p s : / / d o c s . n p m j s . c o m / c l i / v 8 / c o m m a n d s / n p m i n i t ? v = t r u e # d e s c r i p t i o n 设 计 无 侵 入 性 的 低 代 码 编 辑 器 2 0 2 3 年 2 月 1 1 日 2 0 2 3 年 2 月 1 1 日 由 G o o f y 发 布 在 前 端 开 发 低 代 码 （ 此 处 的 低 代 码 是 广 义 的 低 代 码 ， 也 包 含 零 代 码 场 景 ， 后 面 都 以 低 代 码 代 称 ） 是 当 前 技 术 圈 话 题 点 比 较 多 的 一 项 技 术 。 一 些 是 商 业 化 地 A P a a S 或 者 S a a S 等 系 统 给 客 户 使 用 的 ， 一 些 是 给 团 队 内 部 提 效 使 用 的 ， 虽 然 大 同 小 异 ， 但 是 场 景 不 同 针 对 点 也 有 所 不 同 。 本 篇 文 章 主 要 针 对 开 发 团 队 内 部 使 用 的 低 代 码 编 辑 器 来 进 行 展 开 。 动 机 之 前 碰 到 团 队 是 一 个 多 业 务 、 多 端 、 多 组 件 库 、 多 框 架 、 多 平 台 的 大 前 端 团 队 ， 在 一 些 场 景 有 大 量 的 同 质 化 页 面 ， 开 发 每 次 复 制 粘 贴 虽 然 能 解 决 问 题 ， 但 是 对 开 发 同 学 的 成 长 没 有 什 么 帮 助 ， 沟 通 成 本 也 非 常 高 。 希 望 可 以 通 过 一 些 方 案 解 放 开 发 ， 进 行 提 效 ， 用 低 代 码 构 建 页 面 是 我 能 想 到 的 方 案 之 一 。 低 代 码 这 个 想 法 开 始 于 2 1 年 初 ， 选 用 低 代 码 的 核 心 思 路 其 实 主 要 是 想 让 需 求 的 沟 通 链 变 短 ， 让 参 与 需 求 的 开 发 尽 可 能 少 ， 最 好 做 到 不 需 要 开 发 。 预 研 当 时 市 面 上 的 低 代 码 编 辑 器 为 了 更 好 地 把 控 编 辑 的 过 程 ， 通 常 将 画 布 中 要 展 示 的 组 件 和 编 辑 器 本 身 用 一 个 技 术 栈 ， 且 是 编 辑 器 所 支 持 的 组 件 库 来 实 现 的 ， 有 一 定 的 封 闭 性 。 也 因 此 你 想 要 选 择 一 个 好 用 的 第 三 方 低 代 码 编 辑 器 ， 就 要 跟 他 使 用 同 一 个 技 术 栈 ， 甚 至 同 一 套 组 件 库 ， 那 如 果 原 有 的 项 目 不 是 匹 配 的 技 术 ， 就 需 要 对 自 己 原 有 的 技 术 进 行 改 造 会 支 持 。 而 即 使 使 用 了 同 一 套 技 术 栈 同 一 套 组 件 库 ， 因 为 要 支 持 低 代 码 编 辑 器 的 使 用 ， 可 能 还 要 在 组 件 代 码 本 体 中 进 行 声 明 和 标 注 等 操 作 满 足 编 辑 器 的 圈 选 等 定 制 逻 辑 。 这 样 的 设 计 在 一 定 程 度 上 降 低 了 开 发 时 的 知 识 成 本 ， 更 讲 究 开 发 的 约 定 来 让 业 务 、 组 件 、 编 辑 器 三 位 一 体 ， 更 好 掌 控 ， 比 较 适 合 一 个 技 术 栈 规 范 严 谨 的 团 队 闭 环 ， 但 是 对 于 外 部 团 队 ， 或 者 业 务 模 块 或 技 术 栈 较 多 的 团 队 用 起 来 就 比 较 痛 苦 ， 也 因 为 组 件 库 和 编 辑 器 的 联 动 导 致 了 必 然 的 侵 入 性 。 也 可 能 正 是 因 为 这 种 原 因 ， 业 内 出 现 了 低 代 码 的 百 家 争 鸣 ， 主 流 大 厂 基 本 人 手 一 个 ， 有 的 厂 子 甚 至 有 一 堆 低 代 码 相 关 的 建 设 ， 大 家 都 在 以 自 己 的 思 考 和 自 己 擅 长 的 方 式 输 出 了 各 种 类 型 的 低 代 码 编 辑 器 ， 像 阿 里 也 在 A I 到 低 代 码 上 有 了 较 深 度 的 实 践 ， 让 人 钦 佩 。 但 这 样 的 低 代 码 编 辑 器 满 足 不 了 团 队 的 多 样 性 场 景 ， 总 不 能 每 个 场 景 都 做 一 个 低 代 码 编 辑 器 吧 。 那 如 果 要 自 己 做 一 个 低 代 码 编 辑 器 ， 满 足 需 求 ， 又 要 做 成 一 个 什 么 样 的 东 西 呢 ： 需 要 一 个 编 辑 器 支 持 所 有 场 景 需 要 跨 技 术 栈 不 希 望 对 原 有 的 技 术 做 改 造 提 出 假 设 仔 细 分 析 上 面 的 问 题 和 矛 盾 点 会 发 现 ， 如 果 让 业 务 、 组 件 、 编 辑 器 三 项 内 容 分 别 解 耦 ， 然 后 通 过 某 种 约 定 再 将 他 们 相 连 ， 是 不 是 就 可 以 满 足 上 面 的 要 求 了 ， 这 似 乎 正 应 该 是 一 个 在 多 元 化 团 队 中 低 代 码 编 辑 器 该 有 的 样 子 。 低 代 码 编 辑 器 只 是 个 工 具 ， 简 单 来 看 主 要 做 了 拖 拉 拽 组 件 元 素 ， 生 成 布 局 ， 修 改 配 置 ， 产 生 页 面 这 几 步 。 不 论 你 是 什 么 样 的 团 队 ， 要 做 怎 样 的 编 辑 器 ， 只 要 需 要 人 工 介 入 ， 这 几 步 都 是 避 免 不 了 的 ， 而 如 果 想 让 开 发 尽 可 能 不 介 入 ， 只 要 在 这 个 前 提 下 做 好 体 验 就 可 以 了 （ 当 然 做 好 这 个 体 验 也 是 个 非 常 艰 难 的 工 程 ， 本 篇 文 章 先 不 做 该 角 度 的 讨 论 ） 。 那 是 不 是 可 以 就 针 对 这 个 流 程 做 编 辑 器 ， 跟 流 程 不 直 接 相 关 的 内 容 都 分 离 出 去 ， 以 接 入 的 方 式 接 入 到 低 代 码 编 辑 器 里 面 。 当 前 ， 阿 里 （ l o w c o d e e n g i n e ） 和 腾 讯 （ t m a g i c e d i t o r ） 各 有 一 个 类 似 的 方 案 已 经 开 源 ， 虽 然 我 的 解 决 方 案 并 不 相 同 ， 但 是 大 方 向 的 思 考 相 似 ， 大 家 有 兴 趣 可 以 对 比 了 解 下 。 画 布 设 计 先 来 从 下 图 看 下 低 代 码 通 常 的 基 本 结 构 和 行 为 ： 从 图 中 可 以 了 解 到 ： 页 面 中 有 三 个 主 要 元 素 ， 组 件 、 画 布 、 配 置 组 件 和 配 置 都 是 输 入 ， 画 布 中 主 要 是 输 出 每 次 有 输 入 行 为 的 变 化 都 有 可 能 让 画 布 重 新 渲 染 前 面 有 说 过 ， 之 所 以 现 有 的 低 代 码 编 辑 器 有 侵 入 性 ， 主 要 还 是 在 于 对 组 件 库 中 的 组 件 有 干 预 ， 做 这 些 干 预 的 主 要 目 的 ， 就 是 为 了 能 便 捷 地 拖 拽 、 点 选 、 配 置 组 件 。 这 些 行 为 其 实 也 主 要 是 发 生 在 画 布 上 的 ， 如 果 我 能 让 画 布 和 组 件 实 体 产 生 解 耦 ， 那 么 无 侵 入 的 设 计 就 迈 出 了 关 键 的 一 步 。 实 际 上 低 代 码 侵 入 业 务 的 原 因 也 是 多 样 的 ， 一 些 低 代 码 平 台 也 会 从 打 包 甚 至 业 务 流 程 上 侵 入 ， 只 是 当 编 辑 器 做 到 了 无 侵 入 的 时 候 ， 其 他 环 境 的 侵 入 就 能 做 到 更 多 的 选 择 。 最 容 易 想 到 的 方 式 是 让 低 代 码 部 分 和 传 统 开 发 的 部 分 完 全 走 两 条 线 ， 而 这 不 是 本 文 的 重 点 ， 就 不 再 过 多 展 开 。 此 时 我 想 到 了 现 在 手 机 的 触 摸 操 作 ， 在 触 摸 手 机 进 行 操 作 的 行 为 时 ， 其 实 也 不 是 在 直 接 操 作 手 机 的 显 示 屏 本 身 ， 而 是 在 操 作 电 容 屏 上 的 导 电 膜 ， 然 后 将 信 号 传 递 给 各 种 程 序 再 转 换 出 画 面 的 。 受 到 这 个 思 路 的 启 发 ， 我 想 低 代 码 编 辑 器 也 可 以 以 这 个 思 路 进 行 设 计 。 和 手 机 屏 幕 的 结 构 对 应 ， 我 也 做 了 一 些 类 似 的 分 层 ： 手 机 上 的 触 点 就 像 是 我 在 低 代 码 上 要 点 选 的 元 素 ， 我 称 之 为 编 辑 层 产 生 触 发 或 者 交 互 行 为 就 会 有 行 为 信 号 传 递 给 系 统 ， 也 就 是 低 代 码 编 辑 器 手 机 系 统 回 家 行 为 信 号 处 理 成 机 器 语 言 给 到 应 用 ； 而 编 辑 器 则 对 行 为 信 号 进 行 解 析 ， 变 成 约 定 的 领 域 语 言 给 到 渲 染 引 擎 应 用 和 渲 染 引 擎 根 据 对 应 的 语 言 情 况 ， 进 行 渲 染 ， 就 会 产 生 用 户 能 看 到 的 结 果 在 这 个 分 层 中 ， 其 实 已 经 将 组 件 与 画 布 本 身 进 行 了 一 定 程 度 地 解 耦 。 想 接 入 这 样 低 代 码 编 辑 器 的 团 队 ， 预 计 只 需 要 了 解 D S L 并 开 发 渲 染 引 擎 即 可 ， 其 他 环 节 由 低 代 码 编 辑 器 进 行 管 理 ， 也 就 能 在 低 代 码 中 想 手 机 引 入 各 种 软 件 一 样 ， 引 入 渲 染 引 擎 和 组 件 库 了 。 同 时 低 代 码 的 结 构 和 操 作 流 程 也 会 变 成 下 面 的 样 子 。 现 在 解 耦 的 设 计 有 了 ， 那 具 体 要 怎 么 让 开 发 团 队 接 入 呢 ？ D S L 和 渲 染 引 擎 又 是 什 么 ？ D S L 领 域 特 定 语 言 （ D o m a i n S p e c i f i c L a n g u a g e ） ， 在 低 代 码 领 域 中 几 乎 已 经 成 为 标 配 ， 通 常 用 来 作 为 中 间 语 法 的 设 计 ， 来 抹 平 不 同 技 术 间 的 差 异 性 ， 做 到 一 码 多 用 。 因 此 我 也 选 用 了 D S L 做 低 代 码 编 辑 器 和 组 件 库 及 画 布 之 间 的 媒 介 。 以 一 个 图 片 （ I m a g e ） 的 节 点 进 行 举 例 ： 这 就 是 一 个 节 点 的 基 本 结 构 ， 而 开 发 者 就 是 要 做 一 个 将 这 个 D S L 节 点 解 析 成 对 应 技 术 栈 布 局 节 点 的 引 擎 ， 比 如 前 端 就 是 要 解 析 成 并 渲 染 到 浏 览 器 中 。 D S L 节 点 根 据 前 面 图 片 中 的 流 程 ， 是 需 要 编 辑 器 来 生 成 的 。 这 需 要 用 户 对 画 布 操 作 的 时 候 ， 可 以 将 对 组 件 进 行 的 操 作 转 变 为 节 点 的 D S L ， 现 在 设 计 的 目 标 是 编 辑 器 可 以 和 组 件 库 解 耦 ， 那 这 里 就 不 能 让 编 辑 器 直 接 去 操 作 组 件 。 因 此 可 以 使 用 声 明 的 方 式 ， 将 组 件 的 描 述 给 到 编 辑 器 。 通 过 以 上 的 操 作 ， 就 能 做 到 编 辑 器 生 产 这 套 节 点 信 息 ， 渲 染 引 擎 也 就 是 开 发 者 消 费 、 解 析 、 渲 染 这 套 信 息 ， 让 上 面 画 布 的 设 计 成 为 可 能 。 上 图 就 是 触 发 画 布 编 辑 后 ， 而 后 借 助 编 辑 器 中 的 D S L 转 换 器 ， 将 用 户 的 操 作 信 号 转 为 D S L 并 将 其 给 到 渲 染 引 擎 ， 而 渲 染 层 则 会 根 据 这 段 描 述 结 合 真 实 的 组 件 画 出 页 面 ， 至 此 一 套 无 侵 入 性 的 低 代 码 编 辑 器 就 算 是 有 了 雏 形 了 。 复 制 代 码 下 面 再 看 看 渲 染 层 和 编 辑 层 是 如 何 设 计 的 。 渲 染 层 渲 染 层 最 主 要 的 职 责 就 是 给 渲 染 引 擎 和 组 件 库 一 个 容 器 ， 根 据 页 面 描 述 渲 染 出 对 应 的 页 面 内 容 。 从 细 节 来 看 ， 还 需 要 具 备 ： 组 件 的 使 用 组 件 相 关 技 术 栈 的 运 行 时 组 件 解 析 页 面 的 渲 染 按 照 这 样 的 设 计 ， 渲 染 层 相 当 于 一 个 沙 箱 将 组 件 库 和 页 面 渲 染 的 行 为 隔 离 在 了 自 己 的 容 器 中 。 而 关 于 沙 箱 ， 我 的 目 标 是 尽 可 能 避 免 低 代 码 编 辑 器 和 渲 染 层 的 互 相 影 响 ， 可 能 的 影 响 会 有 ： 样 式 影 响 脚 本 影 响 显 示 元 素 的 影 响 因 此 ， 可 选 的 有 S h a d o w D O M 、 i f r a m e 两 种 方 案 ， 在 尝 试 了 两 种 方 案 以 后 ， 发 现 如 果 要 编 辑 对 话 框 之 类 的 组 件 ， 往 往 会 有 一 个 蒙 版 ， 而 这 个 蒙 版 往 往 会 去 尝 试 让 整 个 页 面 被 遮 盖 ， 而 S h a d o w D O M 的 方 案 并 不 能 很 好 的 对 这 个 问 题 进 行 控 制 ， 因 此 我 最 终 选 择 了 i f r a m e 方 案 。 相 对 的 ， 组 件 本 身 的 使 用 也 完 全 不 感 知 编 辑 器 本 身 ， 两 边 无 法 因 为 环 境 因 素 互 相 影 响 ， 只 能 通 过 主 动 的 操 作 让 两 边 进 行 通 信 。 通 过 这 个 设 计 ， 甚 至 可 以 让 这 个 渲 染 层 画 出 与 生 产 环 境 完 全 相 同 的 页 面 ， 达 到 真 正 的 所 见 即 所 得 。 低 代 码 编 辑 器 的 职 责 是 构 建 和 编 辑 页 面 描 述 ， 现 在 把 绘 制 出 来 的 可 视 内 容 隔 离 了 ， 那 怎 么 编 辑 内 容 呢 ？ 这 就 要 靠 编 辑 层 了 。 编 辑 层 从 前 面 的 流 程 图 可 以 看 出 操 作 后 的 页 面 描 述 同 时 给 了 渲 染 层 和 编 辑 层 ， 也 就 是 说 ， 编 辑 层 也 要 绘 制 一 个 页 面 的 模 型 ， 只 不 过 这 个 模 型 是 一 个 只 有 标 注 和 布 局 的 触 发 器 。 从 上 图 可 以 更 形 象 地 看 出 编 辑 层 和 渲 染 层 的 关 系 ， 其 实 就 是 将 组 件 的 布 局 和 大 小 映 射 到 了 编 辑 层 ， 让 用 户 操 作 组 件 的 时 候 感 觉 是 点 击 到 了 渲 染 后 的 组 件 ， 其 实 用 户 点 击 的 是 编 辑 层 的 透 明 触 点 ， 以 此 来 进 行 页 面 内 容 编 辑 行 为 的 触 发 。 如 果 想 让 点 击 选 框 的 时 候 准 确 的 识 别 到 对 应 的 组 件 ， 就 需 要 编 辑 层 的 选 框 和 对 应 的 组 件 完 全 贴 合 ， 想 要 做 到 这 个 贴 合 ， 只 需 要 将 组 件 的 布 局 信 息 进 行 收 集 ， 传 递 给 低 代 码 编 辑 器 ， 再 由 低 代 码 编 辑 器 给 到 编 辑 层 按 照 坑 位 进 行 布 局 即 可 ， 而 确 定 一 对 一 的 关 系 ， 只 要 在 页 面 描 述 生 成 的 时 候 给 每 个 组 件 节 点 一 个 唯 一 的 I D 即 可 。 因 此 就 可 以 通 过 传 统 低 代 码 编 辑 器 的 开 发 能 力 对 页 面 进 行 编 辑 ， 完 整 的 编 辑 器 运 作 流 程 如 下 ： 再 说 无 侵 入 性 讲 到 这 里 ， 再 回 顾 一 下 最 开 始 的 动 机 ， 这 套 设 计 能 不 能 解 决 问 题 。 多 样 性 的 问 题 ， 前 端 部 分 比 较 典 型 的 就 是 有 多 个 组 件 库 。 当 前 的 设 计 ， 团 队 不 同 业 务 模 块 的 组 件 库 各 自 包 装 一 层 组 件 库 的 声 明 ， 再 加 上 对 应 的 渲 染 引 擎 ， 就 可 以 把 一 个 低 代 码 编 辑 器 多 用 的 流 程 跑 起 来 了 。 有 同 学 看 到 这 里 可 能 下 意 识 觉 得 做 多 个 渲 染 引 擎 的 成 本 似 乎 很 高 ， 而 在 实 践 中 也 发 现 ， 其 实 R e a c t 同 一 个 技 术 栈 只 用 一 套 渲 染 引 擎 就 可 以 了 ， 因 为 解 析 的 方 式 都 是 相 同 的 。 而 想 用 小 程 序 这 种 也 可 以 扩 展 类 似 T a r o 这 种 R e a c t 的 引 擎 就 可 以 进 行 接 入 了 。 引 擎 的 大 部 分 代 码 其 实 也 都 趋 于 源 生 ， 在 V u e 上 也 有 一 定 的 复 用 性 ， 甚 至 可 以 做 到 S S R ， 因 此 随 着 实 践 这 样 的 成 本 将 会 越 来 越 低 ， 总 归 是 比 建 设 多 个 低 代 码 编 辑 器 好 太 多 了 。 抛 砖 引 玉 整 体 设 计 简 单 来 说 就 是 ， 给 传 统 的 低 代 码 编 辑 器 加 一 层 渲 染 层 。 在 原 编 辑 器 产 生 编 辑 行 为 后 生 成 的 页 面 描 述 给 到 渲 染 层 的 容 器 ， 只 要 渲 染 层 能 解 析 上 层 的 描 述 ， 就 可 以 渲 染 任 何 的 组 件 库 。 基 于 这 一 句 话 ， 可 以 说 当 前 任 何 一 个 低 代 码 编 辑 器 都 可 以 进 行 跨 技 术 栈 跨 组 件 库 的 改 造 。 而 理 论 在 实 践 后 将 不 出 意 外 地 会 遇 到 一 系 列 的 挑 战 ： 编 辑 层 如 何 和 渲 染 层 的 布 局 进 行 同 步 如 何 让 渲 染 层 和 低 代 码 编 辑 器 很 好 的 进 行 隔 离 隔 离 后 是 否 可 以 完 全 像 传 统 的 方 式 进 行 开 发 编 辑 … 当 前 我 正 在 尝 试 以 这 样 的 模 式 写 一 个 可 以 快 速 接 入 到 团 队 的 低 代 码 拖 拽 框 架 ， 当 前 还 只 是 d e m o 阶 段 ， 欢 迎 交 流 。 w h i m s i c a l : h t t p s : / / g i t h u b . c o m / g a o f e i y u / w h i m s i c a l W h i m s i c a l 开 发 第 三 个 月 总 结 2 0 2 3 年 1 月 1 1 日 2 0 2 3 年 1 月 2 8 日 由 G o o f y 发 布 在 J a v a S c r i p t 进 度 本 月 比 较 刺 激 ， 全 家 老 小 都 阳 了 ， 工 作 也 是 斗 转 星 移 ， 不 过 项 目 本 来 的 计 划 没 有 太 耽 误 。 补 充 了 主 要 功 能 的 单 元 测 试 构 建 了 基 本 的 文 档 å 处 理 了 一 些 运 维 问 题 å 添 加 了 m o n a c o 编 辑 增 加 了 类 型 转 为 J S O N S C H E M A 的 能 力 启 动 了 数 据 绑 定 功 能 的 开 发 重 构 了 部 分 底 层 配 置 原 本 的 计 划 基 本 完 成 了 ， 但 是 进 度 还 是 不 快 ， 随 着 新 一 年 的 到 来 ， 我 会 开 始 对 结 构 树 及 数 据 绑 定 的 你 能 力 进 行 开 发 ， 希 望 能 在 2 月 份 完 成 p l a y g r o u n d 的 上 线 。 一 些 心 得 随 着 开 发 的 深 入 ， 也 发 现 了 自 己 开 发 越 来 越 多 的 问 题 ， 一 边 开 发 一 边 学 习 ， 也 是 我 启 动 这 个 项 目 的 目 的 。 T S 类 型 定 义 做 项 目 之 前 整 体 的 T S 类 型 定 义 还 比 较 基 础 ， 1 2 月 份 的 开 发 中 发 现 自 己 类 型 会 的 那 点 东 西 完 全 不 够 用 ， 从 项 目 现 有 的 代 码 也 可 以 很 清 晰 地 看 到 这 一 点 。 不 过 我 现 在 正 在 通 过 h t t p s : / / g i t h u b . c o m / t y p e c h a l l e n g e s / t y p e c h a l l e n g e s 项 目 进 行 类 型 的 联 系 ， 还 是 很 有 收 获 的 ， 1 月 份 我 会 对 全 局 的 类 型 进 行 一 次 重 构 ， 希 望 可 以 尽 可 能 地 弄 透 类 型 的 使 用 。 J S O N S c h e m a 经 过 1 2 月 的 开 发 ， 发 现 J S O N S c h e m a 的 应 用 范 围 还 是 挺 广 的 。 D S L 标 准 m o n a c o 编 辑 器 语 法 提 示 J S O N 格 式 验 证 因 此 后 面 我 会 对 J S O N S c h e m a 也 加 大 理 解 的 力 度 ， 这 个 和 T S 类 型 定 义 也 是 相 辅 相 成 的 ， 现 在 J S O N S c h e m a 和 T S 的 类 型 是 可 以 做 到 一 定 程 度 的 互 转 的 ， 而 这 个 互 转 还 不 仅 限 于 这 两 个 技 术 ， 后 面 做 各 种 工 具 和 B F F 的 时 候 应 该 也 用 得 到 。 2 3 年 1 月 规 划 过 年 月 ， 还 是 想 休 息 一 下 ： ） 如 上 文 所 说 ， 本 月 主 要 想 在 类 型 上 多 动 动 脑 ， 争 取 分 享 个 相 关 文 章 出 来 。 编 辑 器 功 能 上 ， 本 月 争 取 把 数 据 绑 定 的 交 互 写 好 ， 提 前 祝 大 家 新 年 快 乐 。 W h i m s i c a l 开 发 第 二 个 月 总 结 2 0 2 2 年 1 2 月 1 1 日 2 0 2 3 年 1 月 2 7 日 由 G o o f y 发 布 在 J a v a S c r i p t 进 度 新 增 功 能 产 物 的 导 出 和 内 容 的 导 入 属 性 配 置 表 单 能 力 样 式 配 置 的 模 块 表 达 式 解 析 能 力 数 据 绑 定 能 力 及 相 关 表 达 式 画 布 自 适 应 其 他 对 工 具 包 的 功 能 进 行 了 丰 富 补 充 部 分 单 元 测 试 v i t e 升 级 到 4 . 0 . 0 b e t a . 0 版 本 （ 为 了 处 理 库 打 包 多 入 口 问 题 ） 引 擎 及 组 件 库 支 持 按 需 加 载 增 加 了 性 能 比 对 工 具 一 些 问 题 和 思 考 使 用 v i t e 做 支 持 按 需 加 载 的 组 件 库 v i t e 默 认 打 包 是 单 入 口 的 ， 也 就 是 在 b u i l d . l i b . e n t r y 里 面 只 能 穿 一 个 字 符 串 。 而 支 持 按 需 加 载 主 要 是 要 将 打 包 产 物 的 内 容 进 行 分 离 ， 那 这 个 v i t e 也 在 不 断 做 改 进 。 根 据 我 现 有 项 目 的 样 本 v i t e 2 . x 版 本 支 持 通 过 r o l l u p O p t i o n s 中 的 i n p u t 来 实 现 多 入 口 分 包 ， 但 是 e n t r y 需 要 传 空 字 符 串 ， 来 保 证 路 径 和 命 名 符 合 预 期 。 v i t e 3 . 2 . x 这 个 机 制 产 生 了 变 化 ， 用 2 . x 的 配 置 进 行 打 包 会 报 错 ， 因 为 e n t r y 不 允 许 传 空 字 符 串 了 ， 而 在 看 源 码 的 时 候 发 现 m a i n 分 支 已 经 进 入 到 4 . 0 . 0 b e t a . 0 版 本 了 v i t e 4 . x 在 我 使 用 的 时 候 还 没 发 布 正 式 版 ， 但 是 打 包 的 时 候 b u i l d . l i b . e n t r y 配 置 实 现 了 r o l l u p O p t i o n s . i n p u t 相 似 的 功 能 了 ， 可 以 看 代 码 段 g i t h u b . c o m / v i t e j s / v i t e … 。 而 这 个 功 能 在 3 . 2 . 0 好 像 就 支 持 了 ， 只 是 可 能 有 b u g ， 可 参 考 更 新 文 档 ： g i t h u b . c o m / v i t e j s / v i t e … 属 性 配 置 能 力 选 型 f o r m i l y 因 为 之 前 做 相 关 建 设 就 选 用 的 f o r m i l y ， 所 以 这 次 还 是 用 了 f o r m i l y ， 但 是 没 用 全 家 桶 ， 状 态 管 理 仍 然 使 用 了 m o b x ， 这 里 会 有 一 些 冗 余 ， 但 不 是 当 前 的 重 点 ， 后 续 再 进 行 优 化 。 引 擎 解 析 性 能 比 预 计 的 好 一 些 这 里 测 试 性 能 的 样 本 使 用 了 深 度 为 4 ， 每 个 节 点 广 度 为 1 0 的 全 树 总 计 1 0 0 0 0 个 节 点 进 行 1 0 0 次 渲 染 的 测 试 ， 下 面 可 以 看 下 结 果 。 从 图 中 可 以 看 出 ， 还 是 多 了 一 些 解 析 代 价 的 ， 毕 竟 要 在 运 行 时 构 建 J S X 接 口 再 生 成 V N o d e ， 在 上 面 的 样 本 中 有 多 接 近 1 0 % 的 解 析 代 价 ， 在 正 常 业 务 场 景 是 可 以 接 受 的 ， 而 且 这 个 解 析 思 路 也 可 以 做 到 S S R 上 ， 那 这 个 解 析 代 价 就 会 变 得 更 小 ， 这 里 还 有 很 多 细 节 ， 后 面 单 独 写 文 章 说 一 下 。 不 过 这 不 是 最 终 的 数 据 ， 后 面 随 着 功 能 的 增 加 还 会 做 增 量 的 更 复 杂 场 景 的 对 比 ， 如 ： 有 大 量 表 达 式 的 时 候 打 包 文 件 和 D S L 文 件 因 大 小 差 异 带 来 的 优 势 和 代 价 ， 从 当 前 的 用 例 来 看 ， 用 D S L 的 包 大 小 会 比 J S X 打 包 出 来 的 大 小 更 大 ， 这 个 跟 我 之 前 的 预 期 是 有 差 距 的 ， 但 是 这 也 是 因 为 节 点 都 是 最 简 单 的 节 点 导 致 的 。 因 状 态 变 化 带 来 的 重 新 渲 染 的 代 价 。 那 就 结 而 论 ， 这 个 结 果 是 比 我 预 计 要 好 的 ， 在 对 性 能 要 求 没 那 么 极 致 ， 但 是 对 搭 建 有 需 求 的 场 景 ， 是 很 O K 的 。 1 2 月 规 划 前 面 两 个 月 的 工 作 积 累 了 一 些 功 能 ， 1 2 月 我 会 暂 停 新 功 能 的 开 发 ， 对 项 目 补 充 单 元 测 试 和 文 档 ， 争 取 一 个 月 把 现 有 的 内 容 稳 定 下 来 。 W h i m s i c a l 开 发 第 一 个 月 总 结 2 0 2 2 年 1 1 月 1 1 日 由 G o o f y 发 布 在 J a v a S c r i p t 、 交 互 效 率 进 度 项 目 已 经 启 动 了 一 个 月 了 ， 编 辑 器 部 分 的 整 体 进 度 在 1 5 % 左 右 ， 进 度 不 是 很 快 ， 当 前 核 心 内 容 已 经 有 了 雏 形 ， 主 要 实 现 了 一 下 功 能 ： 编 辑 器 L a y o u t 事 件 调 度 历 史 快 照 画 布 分 层 属 性 配 置 联 动 设 计 了 l o g o 演 示 一 些 技 术 选 型 这 里 部 分 内 容 借 鉴 了 f o r m i l y 的 编 辑 器 d e s i g n a b l e ， 属 性 配 置 联 动 部 分 的 表 单 更 是 选 用 了 f o r m i l y 进 行 驱 动 。 但 是 在 事 件 调 度 和 状 态 管 理 上 方 案 有 所 不 同 状 态 管 理 ： m o b x 使 用 m o b x 是 为 了 降 低 项 目 维 护 的 复 杂 度 m o b x 使 用 了 严 格 模 式 ， 不 允 许 直 接 通 过 赋 值 进 行 状 态 改 变 事 件 调 度 ： r x j s 当 前 使 用 r x j s 是 为 了 不 去 仔 细 考 虑 这 里 的 设 计 ， 将 重 点 放 在 整 体 框 架 上 因 为 仅 使 用 了 r x j s 中 的 s u b j e c t ， 后 续 可 能 会 对 该 部 分 进 行 重 写 拖 拽 系 统 使 用 了 r e a c t D N D 为 了 能 更 快 速 的 开 发 ， 干 脆 对 r e a c t D N D 进 行 了 汉 化 ， 当 前 是 用 到 什 么 汉 化 什 么 ， 预 计 今 年 内 会 将 文 档 全 部 汉 化 这 里 没 有 详 细 写 技 术 选 型 中 的 思 考 ， 如 果 有 需 要 可 以 私 信 我 ， 我 可 以 多 水 一 篇 文 章 。 感 想 项 目 启 动 至 今 ， 基 本 每 天 会 抽 1 个 小 时 左 右 写 一 点 代 码 ， 从 现 在 的 心 态 上 来 看 还 O K ， 很 充 实 。 中 间 有 一 段 时 间 还 有 一 些 功 利 心 作 祟 ， 想 着 无 论 如 何 要 提 交 些 什 么 ， 为 了 提 交 而 提 交 ， 现 在 就 很 释 然 了 ， 尽 力 而 为 ， 心 态 放 松 后 好 像 效 率 反 而 更 高 了 。 总 体 来 说 ， 是 个 不 错 的 尝 试 ， 当 前 除 了 时 间 比 较 少 ， 还 没 有 什 么 太 大 的 瓶 颈 。 1 1 月 也 会 努 力 更 新 ， 期 待 感 兴 趣 的 同 学 和 我 交 流 。 项 目 地 址 ： h t t p s : / / g i t h u b . c o m / g a o f e i y u / w h i m s i c a l 我 有 一 个 W h i m s i c a l 的 项 目 启 动 了 2 0 2 2 年 1 0 月 1 日 2 0 2 2 年 1 0 月 9 日 由 G o o f y 发 布 在 J a v a S c r i p t 、 T y p e S c r i p t 、 交 互 效 率 I h a v e a W h i m s i c a l p r o j e c t s t a r t e d W h i m s i c a l [ ˈ w ɪ m z ɪ k l ] 是 异 想 天 开 的 、 古 怪 的 、 怪 诞 的 意 思 ， 在 我 准 备 做 这 个 项 目 之 前 并 不 认 识 这 个 单 词 ， 只 是 在 想 用 什 么 作 为 项 目 名 字 的 时 候 ， 想 找 个 n p m 包 中 没 有 的 名 字 ， 无 意 中 碰 到 了 这 个 词 ， 而 这 个 词 意 外 地 和 我 做 这 件 事 的 目 标 和 可 执 行 性 有 些 贴 合 ， 且 为 我 要 做 的 这 件 事 的 半 途 而 废 找 到 了 一 个 很 好 的 后 路 ， 就 很 完 美 。 我 想 做 的 东 西 是 一 个 以 低 ( 零 ) 代 码 编 辑 器 为 中 心 辐 射 出 的 一 套 工 具 包 。 面 对 这 个 时 间 点 的 低 代 码 发 展 情 况 ， 这 个 赛 道 已 经 是 一 块 让 个 人 难 以 耕 耘 的 盐 碱 地 了 ， 而 我 想 做 的 不 是 一 个 低 代 码 的 整 体 平 台 ， 而 是 平 台 中 每 一 块 的 零 件 ， 为 低 代 码 平 台 的 整 体 架 构 进 行 解 构 ， 对 页 面 编 辑 器 、 d e b u g T o o l s 、 设 计 稿 自 动 解 析 、 P R D 自 动 解 析 、 数 据 层 等 等 方 面 输 出 针 对 的 工 具 包 和 思 路 。 我 做 低 代 码 相 关 的 工 作 已 经 有 较 长 一 段 时 间 了 ， 在 技 术 职 场 中 ， 低 代 码 是 一 个 大 多 数 人 都 用 过 ， 技 术 团 队 总 想 要 ， 但 又 被 团 队 十 分 嫌 弃 的 一 个 课 题 。 尤 其 是 在 重 业 务 的 团 队 ， 低 代 码 相 关 的 开 发 者 在 搞 出 惊 天 动 地 的 结 果 之 前 ， 都 是 一 直 要 被 否 定 和 挑 战 的 。 不 过 这 些 困 难 和 实 践 让 我 产 生 了 更 多 的 思 考 ， 于 是 我 便 启 动 这 个 项 目 ， 想 将 我 的 一 些 思 考 和 实 践 ， 且 跟 现 有 工 作 不 直 接 相 关 的 内 容 提 炼 出 来 ， 期 望 能 在 更 开 放 的 平 台 学 习 和 产 出 ， 解 决 一 些 低 代 码 的 通 用 问 题 。 对 我 的 意 义 这 是 一 个 从 利 己 角 度 出 发 ， 产 出 利 他 结 果 的 项 目 。 为 什 么 是 利 己 ？ 我 是 一 个 互 联 网 某 厂 的 码 工 ， 工 作 节 奏 快 且 充 实 ， 而 长 时 间 投 入 在 业 务 和 实 操 让 我 对 技 术 最 原 始 的 驱 动 力 变 得 懒 惰 和 迟 缓 ， 简 单 讲 就 是 生 锈 了 。 我 想 通 过 这 个 项 目 来 给 自 己 一 些 强 制 的 训 练 ， 复 习 以 前 的 知 识 ， 并 跟 进 新 的 知 识 ， 因 此 我 在 该 项 目 中 不 会 考 虑 兼 容 性 的 问 题 ， 会 使 用 一 些 我 感 兴 趣 的 技 术 栈 和 方 案 。 项 目 会 尽 可 能 以 开 源 项 目 的 思 路 进 行 一 边 学 习 一 边 建 设 ， 因 为 还 有 本 职 工 作 ， 原 则 上 是 有 时 间 就 多 做 点 没 时 间 就 少 做 点 ， 但 不 会 不 做 ， 且 有 时 也 会 为 了 我 现 有 的 工 作 当 做 试 验 场 。 利 他 的 结 果 是 什 么 ？ 虽 然 这 是 以 “ 我 ” 为 中 心 任 性 的 项 目 ， 但 是 我 仍 然 想 要 产 出 的 内 容 有 附 加 价 值 ， 在 项 目 出 现 里 程 碑 结 果 的 时 候 ， 我 也 会 进 行 一 些 运 营 ， 把 我 认 为 好 的 内 容 分 享 给 社 区 ， 即 使 我 的 项 目 只 是 一 个 试 错 的 炮 灰 。 比 如 该 项 目 的 第 一 个 课 题 即 是 一 个 通 用 的 低 代 码 编 辑 器 ， 这 个 通 用 的 目 标 是 可 以 融 合 任 何 技 术 栈 的 组 件 库 的 可 拖 拽 低 代 码 编 辑 器 。 因 为 个 人 当 前 的 知 识 储 备 优 先 ， 因 此 第 一 阶 段 只 面 向 w e b 端 ， 随 着 时 间 和 阅 历 的 推 移 ， 我 会 以 整 个 大 前 端 平 台 为 目 标 进 行 学 习 和 推 进 。 具 体 要 做 个 什 么 东 西 低 代 码 是 一 个 大 课 题 ， S a a S 和 a P a a S 的 低 代 码 、 流 程 图 的 低 代 码 、 页 面 搭 建 的 低 代 码 、 低 代 码 的 上 下 游 支 撑 ， 只 从 基 本 内 容 来 看 就 能 看 出 其 建 设 成 本 之 高 往 往 让 团 队 望 而 却 步 ， 这 也 是 当 前 低 代 码 相 关 建 设 被 人 主 要 诟 病 的 原 因 ， 也 是 为 什 么 很 多 大 厂 都 在 做 低 代 码 相 关 的 付 费 服 务 。 如 何 将 投 入 开 发 低 代 码 的 成 本 从 逆 差 变 成 顺 差 ， 是 每 个 相 关 开 发 团 队 需 要 解 决 的 问 题 ， 这 不 免 要 进 入 鸡 生 蛋 和 蛋 生 鸡 的 扯 皮 循 环 。 那 我 想 以 我 对 低 代 码 部 分 内 容 的 理 解 ， 做 出 低 代 码 整 体 建 设 中 的 零 件 ， 让 相 关 团 队 在 进 行 开 发 时 少 走 一 些 弯 路 ， 或 者 可 以 直 接 使 用 我 的 部 分 成 果 为 低 代 码 的 同 僚 们 的 K P I 或 O K R 加 把 柴 。 项 目 在 当 前 主 要 涉 及 的 内 容 包 括 ： 主 要 内 容 看 到 这 里 是 不 是 觉 得 更 加 W h i m s i c a l 了 呢 ？ 写 在 最 后 我 喜 欢 踢 足 球 ， 但 是 不 爱 看 球 赛 ； 我 喜 欢 打 d o t a ， 但 是 一 个 电 竞 选 手 都 叫 不 出 ； 我 喜 欢 编 程 ， 但 是 已 经 很 流 行 而 我 却 不 知 道 的 技 术 和 框 架 越 来 越 多 ； 我 喜 欢 网 上 冲 浪 ， 但 很 少 写 文 章 ， 不 知 道 看 文 章 的 你 是 不 是 像 我 一 样 ， 习 惯 把 自 己 缩 成 一 团 。 2 0 2 2 年 里 我 接 触 了 很 多 新 东 西 ， 也 尝 试 了 不 少 ， 挫 败 感 很 多 ， 但 也 总 有 新 鲜 的 事 物 吸 引 我 的 注 意 力 ， 而 重 要 的 是 我 舒 展 了 自 己 ， 敢 于 去 拥 抱 我 自 以 为 距 离 我 很 远 的 事 物 。 我 想 藉 由 这 个 项 目 ， 为 我 已 经 定 型 的 脑 袋 敲 出 一 些 新 花 样 ， 这 篇 文 章 可 能 短 期 不 会 有 人 能 看 到 ， 但 希 望 有 那 么 一 天 会 有 人 挖 出 这 个 文 章 来 刺 激 一 下 未 来 的 那 个 不 争 气 的 我 ， 要 么 就 不 要 异 想 天 开 ， 要 么 就 坚 持 到 底 。 项 目 地 址 ： h t t p s : / / g i t h u b . c o m / g a o f e i y u / w h i m s i c a l 在 q i a n k u n 微 前 端 中 做 性 能 统 计 2 0 2 2 年 9 月 1 0 日 2 0 2 2 年 1 0 月 2 0 日 由 G o o f y 发 布 在 前 端 开 发 我 所 在 的 团 队 中 跨 业 务 、 跨 平 台 的 内 容 比 较 多 ， 微 前 端 越 来 越 广 泛 的 应 用 到 了 团 队 中 ， 当 前 从 易 用 性 来 讲 还 是 q i a n k u n 比 较 适 合 我 的 团 队 ， 但 是 在 最 近 看 数 据 的 时 候 感 觉 报 表 上 的 页 面 性 能 数 据 好 的 超 出 了 我 的 预 期 ， 深 入 思 考 一 下 ， 猛 然 想 到 ， 这 些 该 不 会 都 只 是 主 应 用 的 数 据 ， 完 全 没 统 计 到 子 应 用 吧 。 为 什 么 统 计 不 到 q i a n k u n 微 前 端 工 程 是 主 应 用 加 载 后 再 进 行 子 应 用 文 档 的 请 求 进 行 挂 载 的 。 而 主 应 用 加 载 后 子 应 用 挂 在 前 当 前 页 面 已 经 完 成 了 L C P 的 指 标 收 集 ， 也 就 是 说 还 没 等 主 体 内 容 被 渲 染 ， 页 面 的 性 能 统 计 行 为 已 经 结 束 了 … 为 了 让 数 据 更 准 确 ， 我 决 定 追 加 自 定 义 埋 点 ， 获 取 更 可 靠 的 性 能 数 据 。 解 决 思 路 以 及 问 题 在 网 上 搜 索 资 料 的 时 候 ， 竟 然 没 有 发 现 这 方 面 的 讨 论 和 方 案 ， 那 只 能 完 全 自 己 动 手 了 。 我 的 目 标 是 获 取 子 应 用 完 全 加 载 后 的 时 间 是 一 个 介 于 L C P 和 T T I 之 间 的 指 标 。 关 于 页 面 指 标 的 说 明 可 以 查 看 ： h t t p s : / / w e b . d e v / m e t r i c s / 想 要 达 到 这 个 目 标 ， 第 一 反 应 就 是 在 页 面 挂 载 后 如 r e a c t 的 c o m p o n e n t D i d M o u n t 或 v u e 中 的 m o u n t e d 进 行 自 定 义 埋 点 ， 即 可 统 计 到 相 对 准 确 的 性 能 数 据 。 但 是 想 要 这 么 做 需 要 项 目 使 用 了 r o u t e r 统 一 管 理 路 由 ， 才 能 比 较 简 单 便 捷 的 进 行 这 个 埋 点 ， 否 则 可 能 就 要 每 个 页 面 都 做 单 独 的 埋 点 ， 或 者 对 页 面 组 件 进 行 统 一 的 封 装 ， 不 是 很 通 用 。 而 且 还 有 一 些 更 麻 烦 的 场 景 ， 如 ： 一 些 项 目 是 使 用 目 录 方 式 管 理 路 由 的 ， 没 有 统 一 的 挂 载 入 口 同 一 个 主 应 用 不 同 子 应 用 间 切 换 ， 只 走 了 挂 载 钩 子 ， 如 何 正 常 统 计 到 对 应 的 性 能 下 面 我 介 绍 一 些 我 的 团 队 实 际 场 景 中 的 一 些 解 决 方 案 。 实 际 方 案 统 一 R o u t e r 场 景 我 的 团 队 统 一 r o u t e r 的 都 是 r e a c t 场 景 ， 其 他 场 景 请 举 一 反 三 ， 或 评 论 区 补 充 。 如 果 你 没 有 使 用 R e a c t . l a z y 进 行 页 面 组 件 的 加 载 ， 那 么 只 要 在 R o u t e r 的 c o m p o n e n t D i d M o u n t 时 机 进 行 自 定 义 质 量 埋 点 即 可 . 那 如 果 你 使 用 了 R e a c t . l a z y 那 r o u t e r 里 面 c o m p o n e n t D i d M o u n t 执 行 时 ， 你 的 页 面 组 件 还 没 加 载 ， 那 埋 点 的 数 据 还 是 有 误 的 ， 但 是 我 也 不 想 埋 到 每 个 页 面 上 ， 那 我 还 能 怎 么 做 呢 ？ 借 助 S u s p e n s e 的 f a l l b a c k ， 示 例 代 码 如 下 ： i m p o r t R e a c t , f r o m r e a c t ; i m p o r t f r o m r e a c t r o u t e r d o m ; c o n s t s t a r t T i m e = w i n d o w . p e r f o r m a n c e . t i m i n g . n a v i g a t i o n S t a r t ; c o n s t R e n d e r F a l l b a c k = ( ) = > ; } , [ ] ) ; r e t u r n 页 面 加 载 中 ， 请 稍 后 . . . ; } ; c o n s t I n d e x = ( ) : R e a c t . R e a c t E l e m e n t = > > i m p o r t ( @ / p a g e s / t e s t ) ) } > ) ; } ; e x p o r t d e f a u l t I n d e x ; 什 么 是 S u s p e n s e ？ 主 要 是 用 来 配 合 R e a c t . l a z y 进 行 使 用 的 ， 在 l a z y 的 组 件 未 加 载 好 之 前 ， 通 过 f a l l b a c k 中 的 内 容 进 行 临 时 的 填 充 如 l o a d i n g ， 详 细 内 容 参 考 ： h t t p s : / / z h h a n s . r e a c t j s . o r g / d o c s / r e a c t a p i . h t m l # r e a c t s u s p e n s e 通 过 目 录 自 动 产 生 路 由 的 场 景 这 里 以 v u e 的 n u x t 的 场 景 举 例 ， 其 他 场 景 请 举 一 反 三 或 大 家 评 论 补 充 。 n u x t 这 个 场 景 前 面 有 提 到 ， 因 为 没 有 显 式 的 路 由 组 件 进 行 声 明 ， 通 过 上 面 的 思 维 就 无 法 解 决 这 个 问 题 了 ， 因 此 探 索 了 一 下 其 他 的 方 案 ， 我 最 终 选 择 了 为 n u x t 增 加 p l u g i n 的 方 式 进 行 处 理 。 大 概 思 路 是 为 全 局 注 入 一 个 m i x i n ， 如 果 当 前 是 p a g e 组 件 就 在 m o u n t e d 的 时 候 进 行 埋 点 操 作 。 实 现 步 骤 我 在 n u x t . c o n f i g . j s 文 件 中 ， 增 加 了 一 个 p e r f o r m a n c e . t s 的 配 置 ， 并 且 关 闭 s s r p l u g i n 文 档 请 参 考 ： h t t p s : / / n u x t j s . o r g / d o c s / c o n f i g u r a t i o n g l o s s a r y / c o n f i g u r a t i o n p l u g i n s # t h e p l u g i n s p r o p e r t y p l u g i n s : [ ] 编 写 p e r f o r m a n c e . t s i m p o r t V u e f r o m v u e d e c l a r e g l o b a l } c o n s t s t a r t T i m e = w i n d o w . p e r f o r m a n c e . t i m i n g . n a v i g a t i o n S t a r t c o n s t s t a r t F r o m M a i n A p p = ! ! w i n d o w . _ _ P O W E R E D _ B Y _ Q I A N K U N _ _ l e t S U B M I X _ P E R F O R M A N C E _ T R A C K E R _ D O N E = f a l s e V u e . m i x i n ( } } ) 在 代 码 中 有 个 我 通 过 判 断 某 个 组 件 的 t h i s . $ p a r e n t 为 空 ， 来 确 定 这 是 个 是 当 前 页 面 的 p a g e 组 件 ， 而 在 埋 点 后 ， 还 要 记 录 一 下 埋 点 状 态 ， 避 免 场 景 考 虑 的 不 周 到 带 来 的 误 埋 点 。 单 页 面 应 用 性 能 统 计 子 应 用 间 切 换 跟 单 页 面 跳 转 和 上 述 情 况 还 不 太 一 样 ， 因 为 会 重 新 请 求 资 源 ， 子 应 用 也 要 重 新 渲 染 ， 不 关 注 性 能 也 会 有 很 大 的 隐 患 ， 但 是 乾 坤 本 身 给 到 的 挂 载 钩 子 并 不 能 满 足 统 计 的 需 要 ， 那 我 如 何 统 计 呢 ？ 上 面 两 个 方 案 解 决 了 第 一 次 进 入 应 用 时 的 解 决 方 案 ， 但 是 单 页 面 应 用 和 子 应 用 间 切 换 时 又 统 计 不 到 了 。 可 以 在 页 面 卸 载 的 时 候 ， 在 子 应 用 全 局 注 入 一 个 新 的 页 面 起 始 时 间 ， 以 此 来 进 行 子 应 用 切 换 场 景 的 性 能 埋 点 。 我 还 是 以 n u x t 的 p l u g i n 代 码 为 例 。 i m p o r t V u e f r o m v u e d e c l a r e g l o b a l } l e t s t a r t T i m e = w i n d o w . p e r f o r m a n c e . t i m i n g . n a v i g a t i o n S t a r t l e t s t a r t F r o m M a i n A p p = ! ! w i n d o w . _ _ P O W E R E D _ B Y _ Q I A N K U N _ _ l e t S U B M I X _ P E R F O R M A N C E _ T R A C K E R _ P A T H = w i n d o w . l o c a t i o n . p a t h n a m e l e t S U B M I X _ P E R F O R M A N C E _ T R A C K E R _ D O N E = f a l s e c o n s t s t a r t R e n d e r T i m e = + n e w D a t e ( ) s t a r t T i m e V u e . m i x i n ( } , d e s t r o y e d ( ) } } ) 单 页 面 应 用 因 为 往 往 做 了 应 用 级 别 的 预 加 载 ， 后 续 页 面 的 加 载 性 能 不 是 一 个 很 复 杂 的 课 题 ， 课 题 往 往 在 页 面 中 的 交 互 ， 所 以 性 能 这 部 分 的 性 能 根 据 场 景 也 可 以 选 择 性 忽 略 。 单 页 面 应 用 其 实 和 微 前 端 关 系 不 大 ， 只 是 给 子 应 用 切 换 做 一 个 铺 垫 ， 下 面 我 们 来 看 下 子 应 用 切 换 的 性 能 统 计 。 子 应 用 切 换 的 性 能 统 计 子 应 用 切 换 的 成 本 比 单 页 面 切 换 的 成 本 高 不 少 ， 因 为 新 挂 载 的 子 应 用 的 行 为 ， 会 重 新 请 求 资 源 ， 且 重 新 渲 染 ， 不 关 注 性 能 也 会 有 很 大 的 隐 患 ， 但 是 乾 坤 本 身 给 到 的 挂 载 钩 子 并 不 能 满 足 统 计 的 需 要 ， 那 我 如 何 统 计 呢 ？ 那 经 过 前 面 单 页 面 应 用 性 能 统 计 的 启 发 ， 统 计 是 单 页 面 应 用 统 计 的 一 个 升 级 版 ， 差 异 在 于 需 要 在 主 应 用 上 更 新 启 动 时 间 。 这 个 时 候 如 果 你 的 项 目 有 类 似 的 需 要 就 封 装 一 个 更 新 时 间 的 A P I 通 过 给 到 子 应 用 ， 或 者 干 脆 将 主 应 用 的 w i n d o w 传 递 给 子 应 用 （ 不 推 荐 ） 。 w i n d o w . u p d a t e S t a r t T i m e = f u n c t i o n ( n e w T i m e ) ; / / 给 子 应 用 配 置 要 传 递 的 方 法 } 结 语 至 此 ， 虽 然 我 列 举 的 场 景 可 能 不 全 ， 但 是 通 过 上 面 的 方 案 对 有 需 要 的 同 学 应 该 能 提 供 一 些 灵 感 ， 如 果 你 有 更 好 的 方 案 可 以 在 评 论 区 给 出 你 的 想 法 。 自 从 上 线 了 这 套 自 定 义 性 能 统 计 的 埋 点 ， 才 发 现 之 前 的 性 能 数 据 真 的 都 是 虚 假 繁 荣 ， 而 没 有 很 快 发 现 ， 也 是 因 为 q i a n k u n 主 应 用 的 性 能 本 身 也 是 个 问 题 ， 先 说 到 这 里 ， 我 要 和 同 学 们 琢 磨 优 化 的 事 情 去 了 。 项 目 代 码 规 范 2 0 2 2 年 6 月 2 7 日 2 0 2 2 年 1 0 月 6 日 由 G o o f y 发 布 在 J a v a S c r i p t 、 前 端 开 发 接 手 的 业 务 和 团 队 走 过 了 一 段 适 应 期 ， 想 要 对 团 队 的 代 码 风 格 开 始 进 行 规 范 ， 在 渐 进 落 地 后 整 理 出 一 套 比 较 通 用 的 方 案 。 这 里 主 要 描 述 结 论 ， 选 型 和 团 队 中 方 案 P K 的 流 程 暂 且 先 跳 过 ， 后 面 单 独 起 一 个 专 题 讨 论 。 我 的 团 队 技 术 栈 主 要 是 R e a c t + T S ， 比 较 有 针 对 性 ， 因 此 请 选 择 性 食 用 。 下 面 的 规 范 主 要 分 美 化 和 l i n t 两 个 部 分 ， 且 只 讨 论 自 动 的 部 分 ， 不 讨 论 风 格 指 南 相 关 ， 那 我 们 直 接 开 始 。 L i n t 什 么 是 L i n t ？ 什 么 是 L i n t ？ I n c o m p u t e r p r o g r a m m i n g , l i n t i s a U n i x u t i l i t y t h a t f l a g s s o m e s u s p i c i o u s a n d n o n p o r t a b l e c o n s t r u c t s ( l i k e l y t o b e b u g s ) i n C l a n g u a g e s o u r c e c o d e ; g e n e r i c a l l y , l i n t o r a l i n t e r i s a n y t o o l t h a t f l a g s s u s p i c i o u s u s a g e i n s o f t w a r e w r i t t e n i n a n y c o m p u t e r l a n g u a g e . T h e t e r m l i n t l i k e b e h a v i o r i s s o m e t i m e s a p p l i e d t o t h e p r o c e s s o f f l a g g i n g s u s p i c i o u s l a n g u a g e u s a g e . L i n t l i k e t o o l s g e n e r a l l y p e r f o r m s t a t i c a n a l y s i s o f s o u r c e c o d e . E S L i n t l i n t 的 核 心 毫 无 疑 问 是 e s l i n t ， 但 是 e s l i n t 中 用 哪 些 p l u g i n 就 比 较 有 讲 究 了 。 必 须 ： e s l i n t p l u g i n r e a c t h o o k s R e a c t 官 方 提 供 的 专 门 针 对 h o o k s 的 p l u g i n ： h t t p s : / / z h h a n s . r e a c t j s . o r g / d o c s / h o o k s r u l e s . h t m l e s l i n t p l u g i n p r e t t i e r 、 e s l i n t c o n f i g p r e t t i e r 因 为 要 求 了 美 化 的 部 分 所 以 p r e t t i e r 部 分 的 p l u g i n 在 我 的 团 队 中 是 必 装 的 e s l i n t c o n f i g p r e t t i e r 是 e s l i n t p l u g i n p r e t t i e r 的 辅 助 插 件 ， 用 来 禁 用 e s l i n t 本 身 的 格 式 化 规 则 的 h t t p s : / / g i t h u b . c o m / p r e t t i e r / e s l i n t p l u g i n p r e t t i e r e s l i n t p l u g i n i m p o r t E S 6 + 导 入 导 出 语 法 的 l i n t 不 赘 述 ： h t t p s : / / g i t h u b . c o m / i m p o r t j s / e s l i n t p l u g i n i m p o r t e s l i n t p l u g i n r e a c t 没 啥 好 说 的 … ： h t t p s : / / g i t h u b . c o m / j s x e s l i n t / e s l i n t p l u g i n r e a c t 可 选 ： j s x a 1 1 y ： h t t p s : / / g i t h u b . c o m / j s x e s l i n t / e s l i n t p l u g i n j s x a 1 1 y 该 p l u g i n 按 说 对 开 发 功 能 没 有 很 直 接 的 印 象 ， 但 是 为 了 体 验 和 j s x 的 书 写 遍 历 ， 还 是 建 议 进 行 安 装 e s l i n t c o n f i g s t a n d a r d ： h t t p s : / / g i t h u b . c o m / s t a n d a r d / e s l i n t c o n f i g s t a n d a r d e s l i n t p l u g i n n o d e ： h t t p s : / / g i t h u b . c o m / m y s t i c a t e a / e s l i n t p l u g i n n o d e e s l i n t p l u g i n p r o m i s e ： h t t p s : / / g i t h u b . c o m / e s l i n t c o m m u n i t y / e s l i n t p l u g i n p r o m i s e S t y l e L i n t c s s 出 现 b u g 的 几 率 比 较 小 ， 不 太 容 易 引 起 人 们 的 重 视 ， 但 其 实 c s s 亦 是 组 件 质 量 的 重 要 部 分 ， 在 很 多 场 景 仍 然 要 消 耗 大 量 的 开 发 成 本 ， 因 此 有 个 好 的 写 c s s 习 惯 是 非 常 重 要 的 。 我 们 的 项 目 中 并 没 有 严 格 采 用 B E M （ 窟 窿 比 较 多 ， 这 个 优 先 级 很 低 ） ， 因 此 为 了 让 有 好 习 惯 的 同 学 看 其 他 人 的 代 码 不 会 太 痛 苦 ， 就 采 用 了 S t y l e L i n t ， S t y l e L i n t 也 是 前 端 项 目 必 备 的 L i n t 。 这 里 不 需 要 太 多 的 配 置 ， 在 我 们 的 项 目 中 仅 使 用 了 s t y l e l i n t c o n f i g i d i o m a t i c o r d e r 插 件 来 控 制 大 家 代 码 的 c s s 样 式 顺 序 。 美 化 P r e t t i e r 团 队 中 对 使 不 使 用 P r e t t i e r 有 一 些 争 议 ， 不 建 议 使 用 的 主 要 观 点 是 认 为 e s l i n t 可 以 c o v e r 这 一 块 了 ， 那 针 对 这 个 疑 问 和 一 些 其 他 疑 问 下 面 给 了 一 些 思 考 和 解 答 ： 主 要 处 理 代 码 风 格 ， w h y c o d i n g s t y l e m a t t e r s 在 线 查 看 格 式 和 配 置 的 工 具 ： h t t p s : / / p r e t t i e r . i o / p l a y g r o u n d / 为 什 么 要 使 用 P r e t t i e r h t t p s : / / p r e t t i e r . i o / d o c s / e n / w h y p r e t t i e r . h t m l 核 心 原 因 主 要 是 两 点 ： 全 自 动 的 风 格 格 式 化 开 发 人 员 无 需 再 为 代 码 风 格 讨 论 （ 除 非 很 闲 ） P r e t t i e r 给 出 的 配 置 比 较 少 ， 默 认 的 配 置 ： m o d u l e . e x p o r t s = ; 和 其 他 l i n t 配 合 使 用 ， 值 得 一 提 的 是 ， 配 合 使 用 的 方 式 就 是 将 p r e t t i e r 的 配 置 整 合 到 对 应 l i n t 中 ， 也 就 是 说 不 使 用 p r e t t i e r 也 将 是 一 种 可 能 。 工 作 流 相 关 工 具 除 了 增 加 l i n t 和 美 化 的 配 置 来 让 辅 助 让 代 码 符 合 规 范 ， 为 了 让 代 码 更 确 切 的 能 达 到 规 范 的 目 的 ， 我 们 还 希 望 可 以 在 提 交 代 码 的 时 候 进 行 一 次 自 动 验 证 并 进 行 f i x ， 因 此 还 需 要 一 些 其 他 的 工 具 。 L i n t s t a g e d 在 代 码 提 交 前 进 行 l i n t ， 以 此 来 强 制 仓 库 的 代 码 格 式 ， 这 个 l i n t 是 对 当 前 提 交 增 量 的 文 件 进 行 l i n t 的 ， 官 网 ： h t t p s : / / g i t h u b . c o m / o k o n e t / l i n t s t a g e d 执 行 流 程 ： h t t p s : / / s e g m e n t f a u l t . c o m / a / 1 1 9 0 0 0 0 0 1 9 4 6 6 4 5 9 / / p a c k a g e . j s o n : e s l i n t e x t . j s , . j s x , . t s , . t s x , / / 对 j s 文 件 检 测 * * / * . : s t y l e l i n t f i x / / 对 c s s 文 件 进 行 检 测 } } H u s k y 在 g i t 执 行 的 生 命 周 期 钩 子 中 追 加 能 力 ， 官 网 ： h t t p s : / / t y p i c o d e . g i t h u b . i o / h u s k y / # / 使 用 p o s t i n s t a l l 进 行 了 h u s k y 的 预 安 装 p o s t i n s t a l l 是 n p m 生 命 周 期 的 一 环 ： h t t p s : / / d o c s . n p m j s . c o m / c l i / v 8 / u s i n g n p m / s c r i p t s # l i f e c y c l e o p e r a t i o n o r d e r 为 什 么 v 8 版 本 不 再 支 持 配 置 而 只 支 持 脚 本 h t t p s : / / b l o g . t y p i c o d e . c o m / h u s k y g i t h o o k s j a v a s c r i p t c o n f i g / h t t p s : / / b l o g . t y p i c o d e . c o m / h u s k y g i t h o o k s a u t o i n s t a l l / 整 体 来 看 是 因 为 作 者 想 让 h u s k y 控 制 最 小 粒 度 的 g i t h o o k s 因 为 机 器 使 用 的 命 令 行 不 同 导 致 无 法 运 行 对 应 的 脚 本 对 应 文 档 ： h t t p s : / / t y p i c o d e . g i t h u b . i o / h u s k y / # / ? i d = c o m m a n d n o t f o u n d 从 文 档 来 看 这 个 问 题 可 以 根 据 用 户 的 路 径 信 息 进 行 一 个 钩 子 处 理 掉 ， 但 是 整 个 行 为 不 是 自 动 的 ， 所 以 要 再 考 虑 下 用 n p m 似 乎 会 尽 可 能 避 免 该 问 题 这 也 可 能 跟 命 令 行 文 件 的 安 装 方 式 有 关 （ 待 验 证 ） 在 脚 本 中 加 入 获 取 p a t h 的 能 力 可 以 快 速 知 道 问 题 在 哪 # ! / u s r / b i n / e n v s h . $ ( d i r n a m e $ 0 ) / _ / h u s k y . s h e c h o $ P A T H n p m r u n t e s t 命 令 输 出 后 会 展 示 当 前 的 环 境 变 量 ， 如 果 命 令 找 不 到 说 明 命 令 不 在 环 境 变 量 中 C o m m i t L i n t 对 提 交 的 c o m m i t 的 m e s s a g e 进 行 l i n t ， 官 网 ： h t t p s : / / c o m m i t l i n t . j s . o r g / # / 如 果 自 己 不 会 写 ， 或 者 想 增 加 更 规 范 化 的 提 交 消 息 ， 可 以 再 增 加 个 C o m m i t i z e n c o n f i g c o n v e n t i o n a l 提 供 的 默 认 规 则 h t t p s : / / g i t h u b . c o m / c o n v e n t i o n a l c h a n g e l o g / c o m m i t l i n t / t r e e / m a s t e r / % 4 0 c o m m i t l i n t / c o n f i g c o n v e n t i o n a l c o m m i t l i n t 相 关 包 的 依 赖 关 系 其 他 工 具 k o r o F i l e H e a d e r h t t p s : / / g i t h u b . c o m / O B K o r o 1 / k o r o 1 F i l e H e a d e r . g i t 这 是 一 个 中 国 开 发 者 制 作 的 V S C o d e 的 插 件 ， 用 来 自 动 往 文 件 头 部 写 文 件 被 操 作 的 信 息 的 ， 非 常 实 用 。 支 持 很 多 自 定 义 配 置 ， 我 现 在 使 用 这 个 工 具 主 要 记 录 文 件 创 建 者 + 创 建 时 间 + 文 件 最 后 修 改 者 + 修 改 时 间 信 息 。 M a c M 1 下 面 安 装 低 版 本 n o d e 2 0 2 1 年 5 月 1 2 日 2 0 2 1 年 6 月 1 7 日 由 G o o f y 发 布 在 J a v a S c r i p t N o d e 1 5 以 下 的 版 本 不 支 持 M 1 芯 片 ， 需 要 在 终 端 输 入 命 令 。 a r c h x 8 6 _ 6 4 z s h 进 入 R o s e t t a 模 式 ， 然 后 再 进 行 低 版 本 的 安 装 就 可 以 了 。 具 体 细 节 可 以 查 看 h t t p s : / / g i t h u b . c o m / n v m s h / n v m / i s s u e s / 2 3 5 0 # i s s u e c o m m e n t 7 3 4 1 3 2 5 5 0 页 面 F P S 分 析 2 0 2 0 年 1 2 月 2 2 日 2 0 2 1 年 3 月 3 0 日 由 G o o f y 发 布 在 J a v a S c r i p t c h r o m e 现 在 有 一 个 高 大 上 的 f p s 观 测 工 具 ， 你 可 以 不 用 再 去 分 析 p e r f o r m a n c e 面 板 的 跑 分 了 。 开 启 F P S 工 具 方 法 一 打 开 d e v T o o l s ， 如 果 你 是 m a c 请 按 组 合 键 c o m m e n d + s h i f t + p ( w i n 系 统 自 行 翻 译 ) ， 然 后 再 搜 索 框 中 输 入 f p s ， 你 会 看 到 如 下 的 状 态 。 选 择 第 一 个 结 果 回 车 即 可 方 法 二 在 更 多 工 具 的 R e n d e r i n g 面 板 下 面 ， 选 中 “ F r a m e R e n d e r i n g S t a t s ” 即 可 这 个 工 具 有 个 缺 点 是 位 置 不 能 移 动 。 根 据 工 具 分 析 F P S 看 下 面 这 张 图 就 够 了 总 结 来 说 就 是 ： 左 上 角 的 百 分 比 越 高 越 好 红 色 块 越 少 越 好 红 色 块 越 均 匀 越 好 参 考 资 料 ： h t t p s : / / g r o u p s . g o o g l e . c o m / a / c h r o m i u m . o r g / g / b l i n k d e v / c / i H U L o S y U x O Q ? p l i = 1 文 章 导 航 1 2 … 2 1 近 期 文 章 聊 一 聊 n p m i n i t 设 计 无 侵 入 性 的 低 代 码 编 辑 器 W h i m s i c a l 开 发 第 三 个 月 总 结 W h i m s i c a l 开 发 第 二 个 月 总 结 W h i m s i c a l 开 发 第 一 个 月 总 结 归 档 归 档 选 择 月 份 2 0 2 3 年 2 月   ( 2 ) 2 0 2 3 年 1 月   ( 1 ) 2 0 2 2 年 1 2 月   ( 1 ) 2 0 2 2 年 1 1 月   ( 1 ) 2 0 2 2 年 1 0 月   ( 1 ) 2 0 2 2 年 9 月   ( 1 ) 2 0 2 2 年 6 月   ( 1 ) 2 0 2 1 年 5 月   ( 1 ) 2 0 2 0 年 1 2 月   ( 4 ) 2 0 2 0 年 1 0 月   ( 2 ) 2 0 2 0 年 9 月   ( 5 ) 2 0 1 9 年 6 月   ( 1 ) 2 0 1 9 年 5 月   ( 2 ) 2 0 1 9 年 4 月   ( 6 ) 2 0 1 8 年 1 2 月   ( 1 ) 2 0 1 7 年 7 月   ( 1 ) 2 0 1 7 年 6 月   ( 1 ) 2 0 1 6 年 1 1 月   ( 2 ) 2 0 1 5 年 1 2 月   ( 3 ) 2 0 1 5 年 1 1 月   ( 7 ) 2 0 1 5 年 1 0 月   ( 2 ) 2 0 1 5 年 8 月   ( 4 ) 2 0 1 5 年 7 月   ( 7 ) 2 0 1 5 年 6 月   ( 3 ) 2 0 1 5 年 4 月   ( 2 ) 2 0 1 5 年 3 月   ( 9 ) 2 0 1 5 年 2 月   ( 9 ) 2 0 1 4 年 1 1 月   ( 1 ) 2 0 1 4 年 1 0 月   ( 1 ) 2 0 1 4 年 9 月   ( 3 ) 2 0 1 4 年 8 月   ( 1 ) 2 0 1 4 年 7 月   ( 5 ) 2 0 1 4 年 6 月   ( 2 ) 2 0 1 4 年 5 月   ( 4 ) 2 0 1 4 年 4 月   ( 1 3 ) 2 0 1 4 年 3 月   ( 7 ) 2 0 1 4 年 2 月   ( 6 ) 2 0 1 4 年 1 月   ( 1 ) 2 0 1 3 年 1 2 月   ( 5 ) 2 0 1 3 年 7 月   ( 1 ) 2 0 1 3 年 4 月   ( 1 ) 2 0 1 3 年 3 月   ( 6 ) 2 0 1 3 年 2 月   ( 2 ) 2 0 1 3 年 1 月   ( 2 ) 2 0 1 2 年 1 1 月   ( 1 ) 2 0 1 2 年 1 0 月   ( 7 ) 2 0 1 2 年 9 月   ( 1 1 ) 2 0 1 2 年 8 月   ( 2 ) 2 0 1 2 年 6 月   ( 3 ) 2 0 1 2 年 2 月   ( 2 ) 2 0 1 1 年 1 2 月   ( 4 ) 2 0 1 1 年 1 1 月   ( 3 ) 2 0 1 1 年 1 0 月   ( 2 ) 2 0 1 1 年 9 月   ( 6 ) 2 0 1 1 年 7 月   ( 4 ) 2 0 1 0 年 1 1 月   ( 1 ) 2 0 1 0 年 6 月   ( 2 ) 2 0 1 0 年 4 月   ( 1 ) 2 0 1 0 年 1 月   ( 4 ) 2 0 0 9 年 1 2 月   ( 3 ) 2 0 0 9 年 1 1 月   ( 5 ) 2 0 0 9 年 6 月   ( 1 ) 2 0 0 9 年 3 月   ( 3 ) 2 0 0 9 年 1 月   ( 1 ) 文 件 夹 文 件 夹 选 择 分 类 A C G     ( 1 7 )       N i n t e n d o     ( 3 )       P C     ( 9 )       S o n y     ( 1 )       模 型 手 办     ( 3 ) 其 他     ( 4 )       周 报     ( 1 ) 前 端 开 发     ( 1 8 1 )       A c t i o n S c r i p t     ( 1 2 )       C S S     ( 3 9 )       H t m l     ( 2 9 )       J a v a S c r i p t     ( 7 0 )       p h p     ( 4 )       T y p e S c r i p t     ( 7 )       U I 相 关     ( 6 )       交 互 效 率     ( 2 4 )       建 站 相 关     ( 1 4 )       本 地 存 储 专 题     ( 4 )       移 动 端 开 发     ( 1 7 ) 影 视 乐 图     ( 5 ) 自 我 辩 证     ( 2 ) 标 签 3 d s a n d r i o d A n g u l a r a n g u l a r J s a s a s 2 a s 3 c h r o m e c s s c s s 3 f l a s h g r u n t h t m l h t m l 5 i e i e 6 i f r a m e i n p u t j q u e r y j s m a c n o d e j s p h p p n g R e a c t N a t i v e t y p e s c r i p t w i n w o r d p r e s s 事 件 兼 容 性 十 字 军 之 王 图 片 处 理 图 表 媒 体 小 米 3 总 结 手 机 拖 动 效 率 模 玩 正 则 游 戏 生 活 移 动 端 织 梦 c m s 项 目 总 结 C o p y r i g h t © 2 0 2 4 . A l l R i g h t s R e s e r v e d . 沪 I C P 备 1 4 0 0 5 3 1 5 号 1

站点概括

关于www.gaofeiyu.com说明：
www.gaofeiyu.com由网友主动性提交被址汇收录整理收录的，址汇收录仅提供www.gaofeiyu.com的基础信息并免费向大众网友展示，www.gaofeiyu.com的是IP地址：115.28.178.43 [中国山东青岛 阿里云]，www.gaofeiyu.com的百度权重为0、百度手机权重为0、百度收录为0条、360收录为0条、搜狗收录为0条、谷歌收录为0条、百度来访流量大约在-之间、百度手机端来访流量大约在-之间、www.gaofeiyu.com的备案号是登录可见、备案人叫登录可见、被百度收录的关键词有0个、手机端关键词有0个、该站点迄今为止已经创建10年9个月5天。

内容声明：

1、本站收录的内容来源于大数据收集，版权归原网站所有！
2、本站收录的内容若侵害到您的利益，请联系我们进行删除处理！
3、本站不接受违规信息，如您发现违规内容，请联系我们进行清除处理！
4、本文地址：https://www.y333.cn/links/6010a9f44b4cb6984366.html，复制请保留版权链接！

---