该站未曾设置description

iseeitwww.iseeit.cn于2024-06-12 16:34:39由该站站长自助申请提交或根据来路被便民库自助收录，便民库仅展示iseeitwww.iseeit.cn网站的基础信息，www.iseeit.cn的IP地址：121.196.38.64 [中国浙江杭州 阿里云]，www.iseeit.cn的百度权重为0、百度手机权重为0、百度收录为0条、360收录为0条、搜狗收录为0条、谷歌收录为0条、百度来访流量大约在-之间、百度手机端来访流量大约在-之间、www.iseeit.cn的备案号是浙ICP备20012148号、备案人叫景伟荣、被百度收录的关键词有0个、手机端关键词有0个、迄今为止已经创建4年11个月30天。

如此站不想被收录或存在违法违规内容，请联系我们删除

i s e e i t 前 端 工 程 师 的 自 我 修 养 S a m p l e P a g e I S e e I t I , S , E , B , w h i c h q u a d r a n t u a r e ? 探 索 新 技 术 使 用 t a r o 开 发 微 信 小 程 序 之 拾 遗 运 行 环 境 ： t a r o ： 3 . 0 . 1 8 ； t a r o u i ： ^ 3 . 0 . 0 a l p h a . 3 ； 微 信 ： 7 . 0 . 2 2 ； 微 信 开 发 者 工 具 ： 稳 定 版 S t a b l e B u i l d ( 1 . 0 3 . 2 1 0 1 1 5 0 ) ； O S ： m a c O S C a t a l i n a v e r s i o n 1 0 . 1 5 . 7 。 1 . 为 何 选 择 t a r o ？ 背 景 ： 团 队 一 直 使 用 R e a c t 技 术 栈 进 行 w e b 开 发 ， 和 t a r o 同 宗 同 族 。 高 效 开 发 ： t a r o 基 于 R e a c t 开 发 项 目 ， 团 队 成 员 可 快 速 投 入 ， 较 少 的 学 习 成 本 ； 社 区 活 跃 ： g i t h u b 仓 库 s t a r 数 超 2 8 K ； 开 箱 即 用 的 组 件 库 ： t a r o u i ； 多 端 适 配 ： 支 持 微 信 小 程 序 、 支 付 宝 小 程 序 、 百 度 小 程 序 以 及 H 5 等 ； 基 于 以 上 几 点 ， 结 合 团 队 的 实 际 情 况 ， 以 及 紧 张 的 项 目 排 期 ， 最 终 选 择 了 t a r o 作 为 基 础 框 架 。 技 术 选 型 确 定 之 后 ， 就 可 以 进 入 正 式 开 发 了 ， 这 一 块 单 独 放 在 下 面 小 节 来 讲 。 2 . 开 发 微 信 小 程 序 的 完 整 周 期 第 一 步 初 始 化 项 目 基 于 @ t a r o / c l i 初 始 化 项 目 脚 手 架 ， 详 见 文 档 ； 下 载 微 信 开 发 者 工 具 并 安 装 （ 下 载 地 址 ） ， 安 装 完 成 后 ， 在 微 信 开 发 者 工 具 里 选 择 初 始 化 的 项 目 根 目 录 打 开 ； 在 微 信 开 发 者 工 具 的 终 端 里 执 行 n p m r u n d e v : w e a p p 即 可 看 到 类 似 如 下 效 果 ； 微 信 开 发 者 工 具 中 常 用 的 4 个 区 域 1 . 预 览 区 域 ： 模 拟 器 实 时 预 览 ； 2 . 调 试 工 具 ： 同 c h r o m e 开 发 者 工 具 类 似 的 调 试 功 能 ， 可 以 像 开 发 网 页 一 样 方 便 调 试 ； 3 . 终 端 ： 可 以 执 行 n o d e 服 务 的 命 令 以 启 动 本 地 服 务 ， 比 如 n p m r u n d e v : w e a p p ； 4 . 编 辑 器 ： 编 辑 区 域 实 时 编 辑 保 存 ， 左 侧 预 览 区 域 实 时 显 示 。 第 二 步 配 置 账 号 测 试 账 号 测 试 账 号 没 有 复 杂 的 权 限 配 置 ， 更 方 便 开 发 调 试 ， 但 会 缺 少 部 分 正 式 账 号 的 功 能 ， 比 如 无 法 获 取 到 u n i o n I D 。 申 请 测 试 账 号 ， 具 体 见 文 档 地 址 ， 获 取 A p p I D 、 A p p S e c r e t 以 及 配 置 可 信 域 名 ， 业 务 域 名 等 ； 前 端 项 目 中 配 置 A p p I D ， 路 径 是 ： 根 目 录 p r o j e c t . c o n f i g . j s o n a p p i d 替 换 默 认 的 示 例 a p p i d 即 可 ； 后 端 服 务 配 置 A p p I D 、 A p p S e c r e t （ 视 具 体 业 务 决 定 ） ； 正 式 账 号 如 果 需 要 使 用 正 式 账 号 来 开 发 调 试 的 话 ， 可 前 往 微 信 公 众 平 台 申 请 正 式 账 号 ， A p p I D 配 置 同 上 ， 以 下 配 置 和 测 试 账 号 略 有 不 同 ： 开 发 同 学 加 入 项 目 成 员 ： 小 程 序 管 理 后 台 成 员 管 理 项 目 成 员 ， 加 入 项 目 成 员 的 同 学 才 可 以 使 用 完 整 的 开 发 功 能 ， 比 如 真 机 预 览 ； 设 置 服 务 器 域 名 和 业 务 域 名 （ 必 须 是 h t t p s 服 务 ） ： 小 程 序 管 理 后 台 开 发 管 理 开 发 设 置 业 务 域 名 / 服 务 器 域 名 ， 注 意 这 里 的 设 置 有 次 数 限 制 ； 代 码 上 传 配 置 ： 小 程 序 管 理 后 台 开 发 管 理 开 发 设 置 小 程 序 代 码 上 传 密 钥 / I P 白 名 单 ， 只 有 在 白 名 单 内 的 I P 才 可 以 上 传 代 码 ； 第 三 步 c o d i n g 实 现 😁 这 里 有 几 个 小 点 ： 建 议 设 计 稿 以 7 5 0 尺 寸 来 设 计 ， 这 是 t a r o 项 目 脚 手 架 初 始 化 后 的 默 认 配 置 ， 无 需 其 他 转 换 ； 微 信 开 发 者 工 具 中 设 置 开 发 者 设 置 不 校 验 合 法 域 名 建 议 打 开 ， 方 便 开 发 调 试 ； 真 机 预 览 ： 开 发 者 工 具 预 览 （ 微 信 开 发 者 工 具 顶 部 居 中 位 置 有 预 览 按 钮 ） ， 此 时 ， 最 新 的 代 码 会 被 编 译 上 传 到 微 信 的 服 务 器 ， 上 传 完 成 之 后 ， 会 出 现 一 个 二 维 码 ， 微 信 扫 码 即 可 访 问 ； 第 四 步 测 试 小 程 序 未 正 式 发 布 之 前 ， 只 有 开 发 者 本 人 的 微 信 可 以 在 真 机 上 访 问 开 发 版 的 小 程 序 ， 为 方 便 测 试 同 学 测 试 ， 可 以 使 用 体 验 版 ， 具 体 步 骤 如 下 ： 小 程 序 管 理 后 台 成 员 管 理 体 验 成 员 将 测 试 同 学 的 微 信 加 入 体 验 成 员 ； 上 传 代 码 ： 打 包 编 译 之 后 ， 微 信 开 发 者 工 具 上 传 （ 顶 部 中 间 位 置 按 钮 ） ， 提 交 最 新 的 代 码 到 微 信 服 务 器 ； 小 程 序 管 理 后 台 版 本 管 理 开 发 版 本 将 已 经 上 传 的 对 应 版 本 设 置 为 体 验 版 ， 并 下 载 体 验 版 二 维 码 发 给 测 试 同 学 扫 码 访 问 ； … J a n u a r y 2 8 , 2 0 2 1 1 条 评 论 5 3 , 9 5 8 次 阅 读 4 人 点 赞 阅 读 全 文 R e a c t r e a c t r o u t e r 源 码 阅 读 — 之 答 疑 解 惑 环 境 说 明 ： r e a c t r o u t e r 版 本 ： 3 . x （ 及 以 前 版 本 ） ； h i s t o r y 版 本 ： 3 . x （ 及 以 前 版 本 ） （ r e a c t r o u t e r 依 赖 的 一 个 核 心 库 ） ； 面 向 群 体 ： 有 一 定 r e a c t r o u t e r 使 用 经 验 ， 但 对 底 层 实 现 有 疑 惑 的 同 学 ； 本 文 主 要 涉 及 4 部 分 内 容 ， 依 次 是 ： h a s h H i s t o r y 核 心 原 理 ； b r o w s e r H i s t o r y 核 心 原 理 ； 路 由 渲 染 方 式 ： 2 种 不 同 的 路 由 渲 染 方 式 如 何 工 作 ； 异 步 加 载 ： 配 合 w e b p a c k 异 步 加 载 模 块 ； 1 . h a s h H i s t o r y 哈 希 路 由 的 核 心 是 监 听 浏 览 器 h a s h c h a n g e 事 件 ， 获 取 当 前 h a s h 值 作 为 路 由 匹 配 对 应 模 块 并 渲 染 ， 其 伪 代 码 描 述 如 下 ： a d d E v e n t L i s t e n n e r ( h a s h c h a n g e , ( ) = > = w i n d o w . l o c a t i o n ; i f ( h a s h = = = 路 由 1 ) i f ( h a s h = = = 路 由 2 ) } ) ; 其 中 ， 有 以 下 关 键 a p i 1 . 路 由 跳 转 ： h i s t o r y . p u s h ( p a t h ) 实 现 原 理 是 ： ( p a t h ) = > ； 2 . 路 由 替 换 ： h i s t o r y . r e p l a c e ( p a t h ) 实 现 原 理 是 ： ( p a t h ) = > 这 部 分 代 码 来 自 于 r e a c t r o u t e r 依 赖 的 三 方 库 h i s t o r y ， 具 体 位 置 是 h i s t o r y 仓 库 的 m o d u l e s / H a s h P r o t o c o l . j s 文 件 的 第 2 3 至 第 3 2 行 。 2 . b r o w s e r H i s t o r y b r o w s e r H i s t o r y 路 由 的 核 心 是 监 听 p o p s t a t e 事 件 ， 获 取 当 前 浏 览 器 的 路 径 作 为 路 由 ， 并 渲 染 该 路 由 匹 配 的 模 块 ， 其 伪 代 码 描 述 如 下 ： a d d E v e n t L i s t e n n e r ( p o p s t a t e , ( ) = > f r o m m i c r o f r o n t e n d m i n i ; s t a r t ( , / / 子 项 目 的 入 口 文 件 e n t r y : ` / / l o c a l h o s t : 8 0 9 1 / t e m p l a t e r e a c t 1 6 . j s ` , / / 传 递 给 子 项 目 的 数 据 ， 同 R e a c t 的 p r o p s p r o p s : , / / 子 项 目 依 赖 的 R e a c t D O M 对 象 R e a c t D O M : w i n d o w . R e a c t D O M V 1 6 , / / 子 项 目 依 赖 的 R e a c t 对 象 R e a c t : w i n d o w . R e a c t V 1 6 , / / 子 项 目 依 赖 的 前 置 脚 本 s c r i p t s : [ ` / / l o c a l h o s t : 8 0 9 1 / t e m p l a t e r e a c t 1 6 d l l . v e n d o r . j s ` , ] , / / 子 项 目 依 赖 的 前 置 样 式 s t y l e s : [ / / w e b . e w t 3 6 0 . c o m / c o m m o n / a n t d / d e v / 4 . 4 . 2 / a n t d . c s s , ] , } , ] , } ) ; 参 数 解 释 1 . 框 架 对 外 暴 露 一 个 s t a r t 函 数 ， 接 受 2 个 顶 级 参 数 。 r o o t N o d e ： 子 项 目 要 挂 载 的 D O M 节 点 ； p r o j e c t s 子 项 目 配 置 列 表 。 2 . 其 中 p r o j e c t s 是 一 个 数 组 ， 每 个 数 组 元 素 就 是 一 个 项 目 的 配 置 对 象 。 针 对 每 个 项 目 的 配 置 参 数 ， 以 下 是 具 体 说 明 表 ： 参 数 … O c t o b e r 2 7 , 2 0 2 0 0 条 评 论 5 9 1 , 0 2 3 次 阅 读 1 人 点 赞 阅 读 全 文 R e a c t 从 零 开 始 实 现 一 个 微 前 端 框 架 [ 2 ] — — 代 码 实 现 上 一 篇 文 章 ： 从 零 开 始 实 现 一 个 微 前 端 框 架 [ 1 ] — — 理 论 基 础 介 绍 了 微 前 端 框 架 的 核 心 原 理 ， 本 篇 是 上 一 篇 的 续 集 ， 根 据 准 备 好 的 理 论 知 识 ， c o d i n g 实 现 一 个 可 用 的 微 前 端 框 架 。 如 果 对 于 实 现 微 前 端 的 核 心 理 论 知 识 不 够 清 晰 ， 建 议 先 阅 读 上 一 篇 文 章 后 再 回 来 继 续 阅 读 。 根 据 已 知 理 论 知 识 ， 一 个 微 前 端 框 架 有 以 下 几 个 核 心 任 务 要 处 理 ： 全 局 路 由 管 理 ， 判 断 子 项 目 的 加 载 和 卸 载 时 机 ； 加 载 此 时 ， 第 一 步 的 核 心 工 作 就 完 成 了 。 接 下 来 要 处 理 的 逻 辑 就 是 如 上 伪 代 码 的 部 分 ， 根 据 路 由 来 判 断 当 前 应 该 加 载 哪 个 项 目 ， 并 渲 染 它 ， 继 续 往 下 走 。 第 二 步 ： 加 载 2 . 2 子 项 目 的 加 载 加 载 子 项 目 的 入 口 文 件 很 简 单 ， 就 是 s c r i p t 脚 本 的 动 态 加 载 ， 核 心 代 码 如 下 ： … O c t o b e r 2 7 , 2 0 2 0 0 条 评 论 5 , 2 7 8 次 阅 读 1 人 点 赞 阅 读 全 文 R e a c t 从 零 开 始 实 现 一 个 微 前 端 框 架 [ 1 ] — — 理 论 基 础 环 境 要 求 ： 1 . 前 端 采 用 哈 希 路 由 （ 重 点 关 注 ） ； 2 . R e a c t 项 目 ； 动 机 原 始 需 求 ： 经 过 1 0 + 人 2 + 年 的 迭 代 ， 基 于 R e a c t 的 S P A 项 目 越 来 越 大 ， 本 地 开 发 、 打 包 编 译 都 极 其 耗 时 ， 劳 神 劳 心 ； 老 模 块 要 维 持 对 低 版 本 浏 览 器 I E 8 的 支 持 ； 新 模 块 可 以 升 级 到 最 新 版 R e a c t ( v 1 6 ) 并 且 不 再 支 持 I E 1 0 浏 览 器 （ 意 味 着 多 个 R e a c t 版 本 会 并 存 ） ； 既 然 是 巨 无 霸 项 目 ， 第 一 反 应 就 是 采 用 微 前 端 拆 分 项 目 ， 主 要 基 于 以 下 考 虑 ： 项 目 之 间 路 由 切 换 时 ， 按 需 加 载 对 应 项 目 资 源 即 可 ， 不 会 出 现 传 统 页 面 切 换 时 的 白 屏 问 题 ， 体 验 更 丝 滑 ； 只 需 维 护 一 套 公 共 的 H T M L 模 板 ； 开 发 、 打 包 及 编 译 更 快 （ 因 为 项 目 更 小 ， 消 耗 更 少 资 源 ） ； 如 何 落 地 微 前 端 ， 有 很 多 思 路 ， 这 里 就 不 一 一 列 举 了 ， 业 界 也 有 比 较 成 熟 的 微 前 端 框 架 ， 本 以 为 可 以 “ 站 在 巨 人 的 肩 膀 上 ” 看 风 景 ， 只 可 惜 巨 人 说 ： “ I E 8 是 什 么 ， 老 子 不 认 识 它 。 ” （ 为 了 使 用 新 特 性 ， 都 默 契 的 选 择 了 放 弃 对 低 版 本 浏 览 器 的 支 持 ） 。 既 然 如 此 ， 我 还 能 说 什 么 呢 ？ （ 总 得 有 人 独 自 面 对 I E 8 😂 ） 实 现 想 象 一 下 ， 一 个 微 前 端 框 架 运 行 的 时 候 ， 大 概 是 这 样 的 ： 访 问 到 A 项 目 的 某 个 路 由 时 ， 加 载 A 项 目 的 对 应 文 件 进 行 渲 染 ； 切 换 到 B 项 目 的 某 个 路 由 时 ， 先 卸 载 A 项 目 ， 然 后 再 去 加 载 B 项 目 的 对 应 文 件 并 进 行 渲 染 ； 之 后 一 直 循 环 往 复 。 从 以 上 流 程 中 ， 可 以 梳 理 出 几 个 重 要 节 点 ： 管 理 不 同 项 目 的 路 由 ， 并 根 据 不 同 路 由 去 加 载 对 应 项 目 文 件 资 源 ； 项 目 加 载 及 渲 染 ； 项 目 卸 载 （ 环 境 隔 离 ） ； 针 对 整 个 流 程 中 的 关 键 节 点 ， 实 现 思 路 大 致 是 ： 监 听 w i n d o w 的 全 局 h a s h c h a n g e 事 件 ， 当 哈 希 路 由 变 化 时 ， 根 据 不 同 路 由 去 加 载 对 应 项 目 文 件 资 源 ； 将 子 项 目 打 包 为 U M D 格 式 的 文 件 ， 通 过 s c r i p t 标 签 的 形 式 加 载 项 目 文 件 后 ， 对 外 暴 露 一 个 标 准 的 R e a c t 组 件 类 ； 子 项 目 入 口 文 件 加 载 完 成 后 ， 拿 到 暴 露 出 来 的 标 准 R e a c t 组 件 ， 使 用 R e a c t D O M . r e n d e r ( ) 方 法 进 行 渲 染 ； 卸 载 项 目 的 时 候 ， 首 先 使 用 R e a c t D O M . u n m o u n t C o m p o n e n t A t N o d e ( n o d e ) 卸 载 当 前 项 目 ， 然 后 再 删 除 掉 当 前 项 目 引 入 的 所 有 外 部 资 源 ， 以 达 到 环 境 清 理 的 目 的 ； 思 路 有 了 之 后 ， 接 下 来 继 续 实 现 每 一 步 中 的 细 节 即 可 。 第 一 步 ： 全 局 路 由 管 理 ， 判 断 子 项 目 的 加 载 和 卸 载 时 机 这 块 相 对 简 单 ， 因 为 项 目 中 统 一 采 用 了 哈 希 路 由 ， 所 以 只 需 要 在 全 局 框 架 中 监 听 浏 览 器 的 h a s h c h a n g e 事 件 即 可 判 断 当 前 应 该 激 活 哪 个 项 目 ， 具 体 步 骤 是 ： 框 架 加 载 就 绪 后 立 刻 监 听 w i n d o w 的 h a s h c h a n g e 事 件 ； 当 哈 希 路 由 变 化 时 ， 根 据 当 前 路 由 来 判 断 需 要 激 活 哪 个 子 项 目 （ 以 及 卸 载 当 前 已 经 加 载 的 子 项 目 ） ； 这 里 需 要 注 意 的 是 ， 第 一 次 加 载 框 架 时 ， 需 要 默 认 执 行 一 次 哈 希 路 由 分 析 ， 来 确 定 初 始 化 时 应 该 加 载 哪 个 子 项 目 （ h a s h c h a n g e 事 件 的 监 听 只 有 在 后 续 路 由 切 换 时 会 生 效 ） 。 第 二 步 ： 子 项 目 打 包 为 U M D 格 式 文 件 ， 统 一 输 出 R e a c t 组 件 类 w e b p a c k . c o n f i g . j s 的 核 心 配 置 如 下 o u t p u t : , 此 时 ， 子 项 目 打 包 后 的 入 口 文 件 对 外 暴 露 的 是 一 个 以 自 己 项 目 名 称 为 变 量 名 的 对 象 ， 当 子 项 目 的 入 口 文 件 加 载 完 成 时 ， 即 可 得 到 w i n d o w [ 项 目 名 称 ] . d e f a u l t 暴 露 出 来 的 标 准 R e a c t 组 件 类 ， 这 个 组 件 类 是 可 以 用 于 直 接 渲 染 和 卸 载 的 。 关 于 R e a c t 项 目 打 包 为 u m d 格 式 后 ， 会 输 出 一 个 w i n d o w [ 项 目 名 称 ] . d e f a u l t 的 标 准 R e a c t 组 件 ， 具 体 细 节 可 以 阅 读 这 篇 文 章 从 h e l l o w o r l d 示 例 解 析 w e b p a c k 打 包 后 的 r e a c t 项 目 代 码 运 行 原 理 第 三 步 ： 加 载 … O c t o b e r 2 3 , 2 0 2 0 0 条 评 论 9 0 , 3 0 1 次 阅 读 3 人 点 赞 阅 读 全 文 业 务 能 力 U R L 路 径 的 多 单 词 连 接 规 则 目 前 已 知 的 U R L 路 径 多 单 词 连 接 大 概 有 如 下 几 种 形 式 ： 中 横 线 连 接 h t t p s : / / w w w . x x . c o m / b a s k e t / f r u i t / b a n a n a m i l k ； 下 划 线 连 接 h t t p s : / / w w w . x x . c o m / b a s k e t / f r u i t / b a n a n a _ m i l k ; 全 小 写 h t t p s : / / w w w . x x . c o m / b a s k e t / f r u i t / b a n a n a m i l k ; 小 驼 峰 h t t p s : / / w w w . x x . c o m / b a s k e t / f r u i t / b a n a n a M i l k ; 大 驼 峰 h t t p s : / / w w w . x x . c o m / b a s k e t / f r u i t / B a n a n a M i l k ; 采 用 哪 一 种 方 式 最 优 呢 ？ 顺 势 证 明 难 度 较 大 ， 可 以 反 向 思 维 ， 采 取 排 除 法 来 筛 选 。 在 这 之 前 ， 需 要 澄 清 一 个 概 念 就 是 ， U R L 的 大 小 写 敏 感 问 题 。 U R L 的 结 构 是 ： [ 协 议 ] : / / [ 域 名 ] / [ 路 径 ] ， 在 上 述 示 例 中 ， 协 议 为 h t t p s ； 域 名 为 w w w . x x . c o m ； 路 径 则 为 / b a s k e t / f r u i t / * 这 一 部 分 。 按 照 规 则 ， 协 议 和 域 名 不 区 分 大 小 写 ， 但 是 路 径 部 分 则 根 据 服 务 器 平 台 而 定 。 W i n d o w s 和 M a c O S X 系 统 不 区 分 大 小 写 ， 而 U N I X 和 L i n u x 系 统 是 区 分 大 小 写 的 。 准 备 工 作 就 绪 ， 开 始 排 除 法 。 大 小 写 切 换 增 加 输 入 难 度 根 据 这 条 规 则 ， 采 用 小 驼 峰 和 大 驼 峰 都 是 不 建 议 的 ， 常 规 域 名 一 般 都 是 小 写 ， 单 个 单 词 的 路 径 也 是 小 写 ， 而 多 个 单 词 的 路 径 却 要 进 行 大 小 写 切 换 才 能 正 确 拼 写 ， 增 加 了 路 径 拼 写 难 度 ， 所 以 首 先 排 除 上 述 列 表 中 的 4 . 小 驼 峰 和 5 . 大 驼 峰 。 全 小 写 可 读 性 较 差 / b a s k e t / f r u i t / b a n a n a m i l k 这 段 路 径 中 ， 多 个 单 词 部 分 b a n a n a m i l k 采 用 了 全 小 写 的 写 法 ， 导 致 单 词 b a n a n a 和 m i l k 边 界 不 够 清 晰 ， 可 读 性 较 差 ， 暂 时 排 除 。 中 横 线 连 接 和 下 划 线 连 接 ， W h o i s t h e o n e ? 剩 下 的 两 种 方 案 中 ， 貌 似 都 没 有 上 述 已 排 除 方 案 的 明 显 缺 点 ， 即 没 有 大 小 写 切 换 的 门 槛 ， 可 读 性 也 都 较 高 ， 那 么 ， 哪 个 是 最 佳 实 践 呢 ？ 中 横 线 / f r u i t / b a n a n a m i l k 下 划 线 / f r u i t / b a n a n a _ m i l k 一 般 认 为 是 ： 中 横 线 更 优 。 原 因 有 2 ： 1 . 中 横 线 输 入 只 需 要 一 次 键 盘 输 入 ， 按 下 中 横 线 符 号 即 可 ； 而 下 划 线 需 要 组 合 键 s h i f t 才 能 输 入 ； 输 入 便 捷 性 上 ， 中 横 线 略 胜 一 筹 ； 2 . 对 于 默 认 使 用 中 文 输 入 法 的 人 来 说 ， 输 入 中 横 线 也 是 一 次 按 键 即 可 ； 而 下 划 线 需 要 先 将 输 入 法 切 换 为 拼 音 输 入 ， 然 后 按 下 组 合 键 s h i f t 才 能 输 入 ； 输 入 便 捷 性 上 ， 又 增 加 了 一 道 门 槛 ， 鉴 于 此 ， 中 横 线 又 胜 一 筹 。 原 来 认 为 如 此 简 单 的 一 个 多 单 词 路 径 拼 写 都 有 这 么 多 门 道 ， 继 续 加 油 探 索 … … 😂 以 上 。 J u n e 6 , 2 0 2 0 0 条 评 论 6 , 6 3 9 次 阅 读 2 人 点 赞 阅 读 全 文 R e a c t 从 ` h e l l o w o r l d ` 示 例 解 析 ` w e b p a c k ` 打 包 后 的 ` r e a c t ` 项 目 代 码 运 行 原 理 环 境 w e b p a c k 4 . 4 3 . 0 r e a c t 0 . 1 4 . 9 r e a c t d o m 0 . 1 4 . 9 b a b e l l o a d e r : 8 . 1 . 0 @ b a b e l / c o r e : 7 . 9 . 0 先 上 结 论 w e b p a c k 编 译 生 成 的 J a v a S c r i p t 文 件 代 码 基 于 以 下 3 个 核 心 点 ： 入 口 模 块 最 外 层 是 一 个 I I F E （ I m m e d i a t e l y I n v o k e d F u n c t i o n E x p r e s s i o n ） ， 立 即 执 行 函 数 ， 确 保 入 口 模 块 （ 文 件 ） 一 旦 加 载 完 毕 立 刻 执 行 初 始 化 ； I I F E 内 置 一 个 公 共 的 模 块 加 载 函 数 ， 用 于 模 块 加 载 （ 及 缓 存 ） ； 每 个 模 块 都 是 一 个 函 数 ， 加 载 模 块 本 质 其 实 是 执 行 函 数 代 码 并 返 回 其 暴 露 的 对 象 ； 所 以 其 核 心 思 想 就 是 ， 把 不 同 的 模 块 编 译 为 不 同 的 函 数 （ 使 用 函 数 作 用 域 对 代 码 进 行 环 境 隔 离 ） ， 并 在 需 要 加 载 模 块 的 时 候 执 行 该 模 块 对 应 的 函 数 ， o v e r 。 下 文 则 是 对 核 心 代 码 的 抽 丝 剥 茧 。 入 口 模 块 ： 立 即 执 行 函 数 删 减 一 些 非 主 干 分 支 代 码 后 ， 可 以 看 到 ， 入 口 模 块 主 框 架 如 下 ： ( f u n c t i o n ( m o d u l e s ) _ _ w e b p a c k _ r e q u i r e _ _ . * = * ; . . . / / 略 去 若 干 非 主 干 代 码 / / 2 . 加 载 入 口 模 块 r e t u r n _ _ w e b p a c k _ r e q u i r e _ _ ( _ _ w e b p a c k _ r e q u i r e _ _ . s = . / s r c / i n d e x . j s ) ; } ) ( ) , r e a c t : ( f u n c t i o n ( m o d u l e , e x p o r t s ) ) , r e a c t d o m : ( f u n c t i o n ( m o d u l e , e x p o r t s ) ) , } ) ; 继 续 进 行 精 简 可 以 看 到 如 下 结 构 ， 就 是 一 个 立 即 执 行 函 数 嘛 ， 如 下 ： ( f u n c t i o n ( m o d u l e s ) ) ( ) ; 立 即 执 行 函 数 的 实 参 ： 普 通 J a v a S c r i p t 对 象 示 例 代 码 中 ， 实 参 对 象 有 3 个 属 性 ， 其 值 都 是 普 通 函 数 ： ) , r e a c t : ( f u n c t i o n ( m o d u l e , e x p o r t s ) f i l e 文 件 对 象 * @ p a r a m p a r a m s 压 缩 文 件 参 数 * @ p a r a m c b 成 功 回 调 函 数 ， 参 数 为 压 缩 后 的 二 进 制 文 件 流 * / c o n s t L I M I T _ S I Z E = 0 . 5 * 1 0 2 4 * 2 0 1 4 ; / / 限 制 大 小 5 0 0 K B 以 内 l e t c o m p r e s s C o u n t = 0 ; e x p o r t c o n s t c o m p r e s s I m a g e = ( f i l e , c b = ( ) = > , p a r a m s = ) = > = p a r a m s ; c o n s t f i n n a l C a l l B a c k = ( e ) = > ; t r y ; c o n s t h a n d l e C o m p o s i t i o n = ( e ) = > , } = e ; i f ( t y p e = = = c o m p o s i t i o n e n d ) { / * * * 合 成 事 件 结 束 ， 可 以 触 发 输 入 实 时 校 验 * 这 里 多 做 一 次 针 对 c h r o m e 的 逻 辑 是 因 为 c h r o m e 中 * ` c o m p o s i t i o n e n d ` 事 件 在 ` o n C h a n g e ` 事 件 之 后 触 发 * / i s O n C o m p o s i t i o n = … A p r i l 1 8 , 2 0 2 0 0 条 评 论 1 9 , 1 8 8 次 阅 读 1 人 点 赞 阅 读 全 文 C a n v a s 借 助 图 片 旋 转 理 解 c a n v a s 坐 标 系 图 1 0 坐 标 系 基 本 规 则 c a n v a s 坐 标 系 默 认 以 左 上 角 为 原 点 0 , 0 ， x 轴 为 横 轴 ， y 轴 为 纵 轴 。 不 同 于 笛 卡 尔 坐 标 系 的 是 ， c a n v a s 坐 标 系 从 原 点 0 , 0 开 始 ， x 轴 右 侧 部 分 的 横 坐 标 为 正 值 ， 反 之 为 负 值 ； 从 原 点 0 , 0 开 始 ， y 轴 下 侧 部 分 的 纵 坐 标 为 正 值 ， 反 之 为 负 值 ， 如 下 示 例 （ 点 我 查 看 在 线 示 例 ） v a r c a n v a s = d o c u m e n t . c r e a t e E l e m e n t ( c a n v a s ) ; / / 创 建 c a n v a s 画 布 v a r c t x = c a n v a s . g e t C o n t e x t ( 2 d ) ; / / 获 取 c a n v a s 绘 图 上 下 文 c a n v a s . w i d t h = 4 0 0 ; c a n v a s . h e i g h t = 2 0 0 ; c a n v a s . s t y l e . b o r d e r = 1 p x s o l i d # c c c ; / / 设 置 元 素 外 框 样 式 c t x . f i l l R e c t ( 1 0 , 1 0 , 5 0 , 5 0 ) ; / / 第 一 个 方 块 ： 在 坐 标 ( 1 0 , 1 0 ) 位 置 画 一 个 长 宽 各 5 0 的 长 方 形 ， 默 认 黑 色 填 充 c t x . f i l l S t y l e = R G B ( 2 5 5 , 0 , 0 ) ; / / 调 整 填 充 色 为 红 色 c t x . f i l l R e c t ( 6 0 , 6 0 , 5 0 , 5 0 ) ; / / 第 二 个 方 块 ： 在 坐 标 ( 6 0 , 6 0 ) 位 置 画 一 个 长 宽 各 5 0 的 长 方 形 c t x . f i l l R e c t ( 4 0 , 6 0 , 5 0 , 5 0 ) ; / / 第 三 个 方 块 ： 在 坐 标 ( 4 0 , 6 0 ) 位 置 画 一 个 长 宽 各 5 0 的 长 方 形 d o c u m e n t . b o d y . a p p e n d C h i l d ( c a n v a s ) ; 图 1 1 图 1 1 示 例 中 ， 第 三 个 方 块 c t x . f i l l R e c t ( 4 0 , 6 0 , 5 0 , 5 0 ) 只 显 示 了 部 分 ， 这 说 明 当 坐 标 位 于 负 区 间 时 ， 则 该 部 分 不 可 见 ； 同 样 ， 如 果 坐 标 超 出 了 c a n v a s 画 布 范 围 ， 内 容 也 将 不 可 见 。 了 解 了 c a n v a s 坐 标 系 的 基 本 规 则 之 后 ， 接 下 来 进 入 正 文 ， 在 c a n v a s 中 旋 转 图 片 。 图 片 旋 转 9 0 ° 显 示 图 2 0 有 这 样 一 个 妹 纸 ， 你 想 把 她 推 到 ， 哦 不 ， 在 c a n v a s 上 顺 时 针 旋 转 9 0 ° ， 该 怎 么 做 呢 ？ （ 点 我 查 看 在 线 示 例 ） v a r c a n v a s = d o c u m e n t . c r e a t e E l e m e n t ( c a n v a s ) ; / / 创 建 c a n v a s 画 布 v a r c t x = c a n v a s . g e t C o n t e x t ( 2 d ) ; / / 获 取 c a n v a s 绘 图 上 下 文 v a r i m g = … D e c e m b e r 1 2 , 2 0 1 9 1 条 评 论 1 0 , 5 6 9 次 阅 读 4 人 点 赞 阅 读 全 文 1 2 > » 分 类 C a n v a s ( 2 ) H T M L / C S S ( 2 ) J a v a s c r i p t 基 础 ( 8 ) R e a c t ( 7 ) 业 务 能 力 ( 1 ) 前 端 工 程 ( 4 ) 探 索 新 技 术 ( 1 ) 未 分 类 ( 1 ) 框 架 和 类 库 ( 7 ) 计 算 机 基 础 ( 1 ) 最 新 文 章 使 用 t a r o 开 发 微 信 小 程 序 之 拾 遗 r e a c t r o u t e r 源 码 阅 读 — 之 答 疑 解 惑 从 零 开 始 实 现 一 个 微 前 端 框 架 [ 3 ] — — ` m i c r o f r o n t e n d m i n i ` 使 用 介 绍 从 零 开 始 实 现 一 个 微 前 端 框 架 [ 2 ] — — 代 码 实 现 从 零 开 始 实 现 一 个 微 前 端 框 架 [ 1 ] — — 理 论 基 础 C o p y r i g h t 2 0 2 4 i s e e i t . A l l R i g h t s R e s e r v e d . 浙 I C P 备 2 0 0 1 2 1 4 8 号 1     浙 公 网 安 备 3 3 0 1 0 5 0 2 0 0 6 1 1 4 号