vivo 快应用官方博客

快应用开发工具 6.6 版本发布

admin — Thu, 07 Dec 2023 10:06:23 GMT

快应用工具开发团队，于 2023 年 12 月 14 日，发布 IDE 最新版本： v6.6.0。

v6.6.0 更新说明

欢迎您阅读快应用 IDE 6.6.0 版本发行说明；在这个版本中，我们对已知问题进行了优化：

修正

对已知问题、以及用户反馈的建议，做了改进优化，提升了开发使用体验。

修复使用 less 混入显示问题

修复打包体积变大问题

此前版本打包出现包体积变大问题。

2023 年 IDE 版本更新时间线：

2022 年 IDE 版本更新时间线：

2022 年 7 月 25 日：快应用开发工具 6.2 版本发布

2021 年 IDE 版本更新时间线：

2020 年 IDE 版本更新时间线：

快应用开发工具 6.5 版本发布

admin — Mon, 31 Jul 2023 03:26:17 GMT

快应用工具开发团队，于 2023 年 8 月 1 日，发布 IDE 最新版本： v6.5.0。

v6.5.0 更新说明

欢迎您阅读快应用 IDE 6.5.0 版本发行说明；在这个版本中，我们做了一些更新，同时对已知问题进行了优化：

优化更新

动态清理项目 dist 目录下旧版 rpk

rpk 作为应用安装包，是开发者进行真机调试的主要对象。旧版 rpk 对于开发者作用甚微，因此本版本开始，每次打包时都会动态清理项目中的旧版 rpk，使得 dist 目录下有且仅有两个rpk（debug 和 release）。

更新 IDE 内置的调试器和引擎

将 IDE 内置的调试器更新至 1.10.0.0 版本，引擎更新至 1.10.0.1 版本。

修正

对已知问题、以及用户反馈的建议，做了改进优化，提升了开发使用体验。

修复编译时 less 报错问题

修复 SMART 模式下打包异常问题

6.4.0 版本打开 SMART 模式，运行 npm run release 打包项目时出现报错。

修复 lottie 组件问题

6.4.0 版本中，lottie 组件在播放动画之后，该组件在预览模块缺失。

修复部分场景下，缺少文件导入提示的问题

之前版本，当style标签中存在lang等属性时，会导致文件导入提示缺失。

2023 年 IDE 版本更新时间线：

2023 年 7 月 03 日：快应用开发工具 6.4.0 版本发布
2023 年 4 月 26 日：快应用开发工具 6.3.0 版本发布

2022 年 IDE 版本更新时间线：

2022 年 7 月 25 日：快应用开发工具 6.2 版本发布

2021 年 IDE 版本更新时间线：

2020 年 IDE 版本更新时间线：

如何在快应用开发中使用 Tailwind CSS 提升开发效率？

admin — Wed, 19 Jul 2023 06:50:18 GMT

Tailwind CSS，在 Web 开发领域，已经成为各种框架、开发人员标配；已经有大量实例证明，基于 Tailwind CSS 来编写样式，可以为开发者节省诸多时间；而且，能够优化减小代码体积、提升运行性能，是非常棒的技术套件。快应用开发，同样基于 Web 技术栈，理论上也完全可以使用 Tailwind CSS；在实际开发过程中，该如何使用 Tailwind CSS 呢？请详细说说。

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板的类名，生成相应的样式，然后将它们写入静态 CSS 文件。它快速、灵活、可靠，且运行时间为零。官方提供 Tailwind CLI 、PostCSS、Play CDN 等使用方式；下面主要讲下如何基于 Tailwind CLI 方式，在应用开发中使用 Tailwind CSS：

Tailwind CSS 可为快应用开发带来哪些好处？

Tailwind CSS 是一种现代的 CSS 框架，它提供了一组预定义的 CSS 类，用于快速开发现代 Web 应用程序。Tailwind 的核心理念是为开发者提供一种灵活的方法来构建自定义的 UI 组件，而不需要编写大量的 CSS 代码。

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板的类名，生成相应的样式，然后将它们写入静态 CSS 文件。它快速、灵活、可靠，且运行时间为零。

在快应用开发中引入，可以为项目带来四方面的好处：更快的编写效率、更小的代码总体积、更高的运行效率、更易于项目维护。更详细说明如下：

预定义的 CSS 类可以减少样式的冗余，从而减小 CSS 文件的体积。
大量配套设施，可以提高开发效率，不必手动编写大量的 CSS 代码。
提供了自动优化工具，可以删除未使用的 CSS 代码。
不用耗时去为 CSS class 取语义化类名，不再需要关注 style 标签；
代码体积减小，可以减少下载、加载、解析等步骤耗时。
使 CSS 样式更规范化，避免冗余的样式和复杂的选择器，优化运行性能。
Tailwind CSS 拥有活跃的社区和文档，可以帮助开发者快速上手和解决问题。

如何在项目中使用 Tailwind CSS？

安装 Tailwind CSS 依赖

通过 npm 安装 tailwindcss 并创建 tailwind.config.js 文件，具体命令如下：

pnpm install -D tailwindcss 
# OR 
# npm install -D tailwindcss 
npx tailwindcss init

配置您的模板路径

在文件中添加所有模板文件的路径 tailwind.config.js，参考性配置如下：

const colors = require('tailwindcss/colors')

const selfCustomColors = {
  brand: {
    DEFAULT: '#1e293b',
  },
  warn: {
    DEFAULT: '#f59e0b',
  },
  link: {
    DEFAULT: '#0ea5e9',
  },
  mark: {
    DEFAULT: '#ff4582',
  },
}

module.exports = {
  mode: 'jit',
  content: [
    './src/**/*.{ux,html,js,svelte,vue,ts}',
    './node_modules/flowbite/**/*.js',
  ],
  purge: {
    enabled: true,
    content: [
      './src/**/*.{ux,html,js,svelte,vue,ts}',
      './node_modules/flowbite/**/*.js',
    ],
  },
  // https://tailwindcss.com/docs/configuration#core-plugins
  corePlugins: {
    preflight: false, // disable base/reset styles
    container: false, // disable container component
    content: false, // disable `content` utility
    accentColor: false, // disable `accent-color` utility
    accessibility: false, // disable `appearance` utility
    appearance: false, // disable `appearance` utility 
    aspectRatio: false, // disable `aspect-ratio` utility
    backgroundOpacity: false, // disable `background-opacity` utility
    backdropBlur: false, // disable `backdrop-blur` utility
    backdropBrightness: false, // disable `backdrop-brightness` utility
    backdropContrast: false, // disable `backdrop-contrast` utility
    backdropGrayscale: false, // disable `backdrop-grayscale` utility
    backdropHueRotate: false, // disable `backdrop-hue-rotate` utility
    backdropInvert: false, // disable `backdrop-invert` utility
    backdropOpacity: false, // disable `backdrop-opacity` utility
    backdropSaturate: false, // disable `backdrop-saturate` utility
    backdropSepia: false, // disable `backdrop-sepia` utility
    blur: false, // disable `blur` utility
    borderCollapse: false, // disable `border-collapse` utility
    borderOpacity: false, // disable `border-opacity` utility
    borderSpacing: false, // disable `border-spacing` utility
    boxShadow: false, // disable `box-shadow` utility
    boxShadowColor: false, // disable `box-shadow-color` utility
    boxDecorationBreak: false, // disable `box-decoration-break` utility
    boxSizing: false, // disable `box-sizing` utility
    breakAfter: false, // disable `break-after` utility
    breakBefore: false, // disable `break-before` utility
    breakInside: false, // disable `break-inside` utility
    brightness: false, // disable `brightness` utility
    captionSide: false, // disable `caption-side` utility
    caretColor: false, // disable `caret-color` utility
    clear: false, // disable `clear` utility
    contrast: false, // disable `contrast` utility
    divideColor: false, // disable `divide-color` utility
    divideOpacity: false, // disable `divide-opacity` utility
    divideStyle: false, // disable `divide-style` utility
    divideWidth: false, // disable `divide-width` utility
    float: false, // disable `float` utility
    fontVariantNumeric: false, // disable `font-variant-numeric` utility
    hyphens: false, // disable `hyphens` utility
    isolation: false, // disable `isolation` utility
    lineClamp: false, // disable `line-clamp` utility
    mixBlendMode: false, // diable `mix-blend-mode` utility
    listStyleImage: false, // disable `list-style-image` utility
    listStylePosition: false, // disable `list-style-position` utility
    listStyleType: false, // disable `list-style-type` utility
    objectPosition: false, // disable `object-position` utility
    opacity: false, // disable `opacity` utility
    outlineColor: false, // disable `outline-color` utility
    outlineOffset: false, // disable `outline-offset` utility
    outlineStyle: false, // disable `outline-style` utility
    outlineWidth: false, // disable `outline-width` utility
    overscrollBehavior: false, // disable `overscroll-behavior` utility
    placeContent: false, // disable `place-content` utility
    placeItems: false, // disable `place-items` utility
    placeSelf: false, // disable `place-self` utility
    placeholderOpacity: false, // disable `placeholder-opacity` utility
    resize: false, // disable `resize` utility
    ringColor: false, // disable `ring-color` utility
    ringOffsetColor: false, // disable `ring-offset-color` utility
    ringOffsetWidth: false, // disable `ring-offset-width` utility
    ringOpacity: false, // disable `ring-opacity` utility
    space: false, // disable `space-between` utility
    textDecorationThickness: false, // disable `text-decoration-thickness` utility
    textOpacity: false, // disable `text-opacity` utility
    textTransform: false, // disable `text-transform` utility
    textUnderlineOffset: false, // disable `text-underline-offset` utility
    touchAction: false, // disable `touch-action` utility
    userSelect: false, // disable `user-select` utility
    verticalAlign: false, // disable `vertical-align` utility
    whitespace: false, // disable `whitespace` utility
    wordBreak: false, // disable `word-break` utility
    willChange: false, // disable `will-change` utility
  },
  darkMode: false,
  theme: {
    colors: { ...colors, ...selfCustomColors },
    extend: {
      width: ({ theme }) => ({
        auto: 'auto',
        ...theme('spacing'),
      }),
      height: ({ theme }) => ({
        auto: 'auto',
        ...theme('spacing'),
      }),
      spacing: {
        '1/2': '2px',
        '1': '4px',
        '3/2': '6px',
        '2': '8px',
        '5/2': '10px',
        '3': '12px',
        '7/2': '14px',
        '4': '16px',
        '5': '20px',
        '6': '24px',
        '7': '28px',
        '8': '32px',
        '9': '36px',
        '10': '40px',
        '11': '44px',
        '12': '48px',
        '14': '56px',
        '16': '64px',
        '20': '80px',
        '24': '96px',
        '28': '112px',
        '32': '128px',
        '36': '144px',
        '40': '160px',
        '44': '176px',
        '48': '192px',
        '52': '208px',
        '56': '224px',
        '60': '240px',
        '72': '288px',
        '80': '320px',
        '96': '384px',
      },
      borderWidth: {
        'DEFAULT': '1px',
        '0': '0px',
        '2': '2px',
        '4': '4px',
        '8': '8px',
      },
      borderRadius: {
        'none': '0',
        '': '1px',
        'sm': '2px',
        'DEFAULT': '4px',
        'md': '6px',
        'lg': '8px',
        'xl': '12px',
        '2xl': '16px',
        '3xl': '24px',
      },
      fontSize: {
        'xm': ['12px', { lineHeight: '16px' }],
        'sm': ['14px', { lineHeight: '20px' }],
        'base': ['16px', { lineHeight: '24px' }],
        'lg': ['18px', { lineHeight: '28px' }],
        'xl': ['20px', { lineHeight: '28px' }],
        '2xl': ['24px', { lineHeight: '32px' }],
        '3xl': ['30px', { lineHeight: '36px' }],
        '4xl': ['36px', { lineHeight: '40px' }],
        '5xl': ['48px', { lineHeight: '60px' }],
        '6xl': ['60px', { lineHeight: '60px' }],
        '7xl': ['72px', { lineHeight: '60px' }],
        '8xl': ['96px', { lineHeight: '60px' }],
        '9xl': ['128px', { lineHeight: '60px' }],
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到您的 CSS 中

@tailwind 将 Tailwind 每个层的指令添加到您的主 CSS 文件中。

/* input.css */

/* @tailwind base; */
@tailwind components;
@tailwind utilities;

启动 Tailwind CLI 构建过程

运行 CLI 工具来扫描模板文件中的类并构建 CSS，参考性命令如下：

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

这是看起来路径简短的方式，实际上这个 input.css 和 output.css，无论是名字，或是它存在的路径，皆可以自行指定，您可以按照自己喜欢的方式、或是团队约定俗成的形式；譬如统一存放在：src/assets/styles 目录下。

需要补充说明的是：在团队开发中，输入上述命令，略显繁琐，可以在 package.json 注入命令（如下示例）；如此以下，您只需在「终端」运行 pnpm tailwindcss 或 npm run tailwindcss 命令即可。

"scripts": {
  "tailwindcss": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch",
}

开始在 UX 中使用 Tailwind CSS

将已编译的 CSS 文件，在 .ux （非 app.ux）文件中，通过 @import 方式引入；

现在，即可在 .ux 的 template 中，开始使用 Tailwind 的实用程序类来设置内容的样式，如下面这段代码示例：

当您写完保存之后，打开 output.css 即可如下的 CSS 代码：

/* @tailwind base; */

.flex {
  display: flex
}

.w-full {
  width: 100%
}

.flex-col {
  flex-direction: column
}

.items-center {
  align-items: center
}

.justify-center {
  justify-content: center
}

.bg-blue-300 {
  background-color: #93c5fd
}

.text-red-600 {
  color: #dc2626
}

至此，在快应用开发中引入 Tailwind CSS 的准备工作，已经初步完成，您可以与 Tailwind CSS 开启愉快合作之旅，从而促使高效编码、提前完工。假如，您对 Tailwind CSS 尚不熟悉，可通过查阅 Tailwind CSS Doc ，亦可在线体验—— Tailwind Playground 。

需要补充说明的是，使用 Tailwind CSS 并不破坏您原来的 CSS 书写✍🏻方式；您完全可以结合喜欢的预处理器（如 Sass、Less、Stylus），来共同工作，而无需做更多设置（如下代码示例）；但我以为当您熟悉 Tailwind CSS 之后，大有可能也会“移情而别恋”。

如何基于 Tailwind CSS 提升开发效率？

安装 Tailwind CSS IntelliSense 扩展

您可以在应用开发工具的「扩展市场」，通过关键字 Tailwind 检索”Tailwind CSS IntelliSense“扩展——适用于 Visual Studio Code 的智能 Tailwind CSS 工具，用户提供自动完成、语法突出显示和 linting 等高级功能来增强 Tailwind 开发体验；略作适配即可支持 *.ux；详细设置，可参见： Tailwind CSS IntelliSense 。

默认情况下，编辑“字符串”内容时（例如在 JSX 属性值中），开发工具中不会触发完成。更新设置 editor.quickSuggestions 可能会改善您的体验：

"editor.quickSuggestions": {
  "strings": "on"
}

参考基于 Tailwind CSS 组件的开源库

Tailwind CSS 生态发展繁荣超乎想象，就连其衍生产品也不可胜数；如 Flowbite ——包含 600 多个 UI 组件、部分和页面的开源库进行开发，该库使用 Tailwind CSS 的实用程序类构建并在 Figma 中设计。它不仅能充当 Tailwind CSS 插件使用，也可以拷贝到项目直接使用，还可以在线查阅效果（支持多种屏幕设备类型），挑选匹配实现方案；在仍是基于组件树构建页面的时代，极大提升页面搭建效率。如： pagination 组件：

常见问题及说明

如果您熟悉 Web 开发，针对上述教程，您可能会有诸多疑惑；实际上，笔者在实践之时，也有发现，只不过因为各种机制限制，目前只能如此。下面就与诸君分享，期可解惑：

不能在 `script` 标签中，引入输出 CSS 文件么**？

按 Web 开发习惯，在 app.ux 文件中可以直接 import 输出 CSS 文件（如下代码所示），那为何未建议如此呢？

因为这样做会报如下错误；具体是缺乏与之匹配的 loader；当然，可以使用 css-loader 和 style-loader 来处理 CSS 文件，详见 ChatGPT | You may need an appropriate loader.... 。

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| /* @tailwind base; */

但在快应用开发过程中，却不能生效；因为 style-loader 的作用是将 CSS 注入 DOM，其中用到了诸多浏览器 API（document），而快应用的开发虽然是基于前端技术栈，但其运行环境止于 v8，实际的渲染是由 Android 底层完成，并未走浏览器这条路，因此无法工作。在构建工具优化、兼容之前，通过 style 标签中引入 CSS，成了主要选择。

为何在 `tailwind.config.js` 禁用如此多样式？

Tailwind corePlugins 部分允许您完全禁用 Tailwind 通常默认生成的类（如果您的项目不需要它们）；这个设计对于快应用实在必要的紧，在上述示例中，对 text-opacity 等样式进行禁用，也是无奈之举。具体原因在于以下两点：

其一：快应用标准虽然基于 Web 技术栈，但只是 Web 标准子集，如蛮多 CSS 属性并不能很好的支持；其二：默认情况下，TailwindCSS 会将样式属性的值存储为 CSS 变量（例如 --tw-text-opacity），以便进行动态计算和响应式设计。

如此一来，在 template 中使用类 text-red-300、border-spacing-1，输出的便是如下 CSS；这样的写法，在快应用中并不能得到正确解析，也就无法起到期待效果，于是禁用便成了必须要做之事。当然，这样禁用也好处：利于输出更小提及的 CSS 文件。其他属性亦复如是。

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity))
}
.border-spacing-1 {
  --tw-border-spacing-x: 4px;
  --tw-border-spacing-y: 4px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y)
}

为何要在 `input.css` 中移除 `@tailwind base;` ？

这么做主要未解决问题： How disable default styles for : before and : after 。

/* input.css */

/* @tailwind base; */
@tailwind components;
@tailwind utilities;

在一般 Web 开发过程中，会将 base、components、utilities 等指令，都添加到 CSS 文件项目中；但，在快应用开发过程中，这无疑是累赘；因为它的存在，会使得 output.css 输出较多对项目没有裨益额外内容（如下代码所示），故而移除；这与通过 corePlugins 禁用基础样式（preflight）、禁用容器组件（container）作用类似。

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  ......
}
::backdrop {
  --tw-border-spacing-x: 0;
  ......
}

为什么要在配置中通过 `theme` 自定义长度单位？

修改长度单位从 rem 到 px，这也是不得已而为之。快应用标准对长度单位的支持，在 1070 及以下版本仅支持长度单位 px 和 %。从 1080 版本开始，新增了长度单位 dp。它无法支持 rem，就只能自定义设置为 px；在通过 theme 自定义长度单位，是 Tailwind CSS 官方提供的功能，以此能够实现更精细的样式控制；虽然操作不难，但属性较多、约定繁杂。后续时间如果允许，将探索 rem to px 批量转换插件来实现，以达到快速修改。如果您感兴趣，可以查阅 Tailwind CSS 完整版本配置—— config.full.js 。

其他暂未解决问题

少部分类名写法，快应用构建不支持

在 Tailwind CSS 机制中，支持使用类名诸如 h-[100px] w-1/3 （对应生成 CSS 如下），然而，在快应用构建工具暂不支持这类名，于是乎这样写便不会生效，当然也不会造成什么问题；后续亟待打包工具优化。

.h-\[100px\] {
  height: 100px
}
.w-1\/3 {
  width: 33.333333%
}

在打包（Toolkit）未解决该问题之前，您可以手动写一个 class，或者使用内联样式（style）来兼容；在这种情况下，更推荐后者；因为引入 Tailwind CSS 的开发模式中，基本不用手写 class，即无需滚动到 style 标签或跳转 less、(s)css、文件，那么直接在 template 中使用内联更为便捷。

快应用构建，资源存在重复引用问题

前文中提到，在 script 标签中 import CSS 资源，暂时未得到支持；但，在 style 标签中 @import 的 CSS 文件，被 A、B 两个页面（*.ux）引入，那么对应的 css 内容，就会被打入对应页面（即便有的内容没有被使用），从而导致代码体积略有增加（即便参考如何优化「快应用」rpk 包体积？一文中的方法，也不可避免）。这是快应用构建本身存在的问题，使用 Tailwind CSS 也不例外。后续需要打包工具优化。

以上，就是在 快应用 开发过程中，引入 Tailwind CSS 所需的操作、以及常见问题说明。肯定还有异常更多情况没有考虑到，后续会逐步补充；如果您在实际运用过程中，欢请留言交流、反馈、分享。

2023 年 07 月 05 日写于〔深圳福田〕

快应用开发工具 6.4 版本发布

vivo-developer — Wed, 28 Jun 2023 09:18:05 GMT

快应用工具开发团队，于 2023 年 7 月 3 日，发布 IDE 最新版本： v6.4.0。

v6.4.0 更新说明

在这个版本中，快应用工具开发团队做了一些更新，同时对已知问题进行了优化；下面跟大家分享下，在此次迭代中，我们做的一些主要改进。

优化更新

卡片工程增加分类

新建快应用卡片，选择模版时，区分了不同的厂商和卡片类型。

rpk 名称中增加环境变量的信息

如下图，点击「打包」，打出的 rpk 名称，带有环境变量，便于开发者区分不同环境的 rpk。例如，选择正式包，则 NODE_ENV为 production，打包出来的 rpk 名称带有 production。

修正

对已知问题、以及用户反馈的建议，做了改进优化，提升了开发使用体验。

修复 git 插件失效问题

6.3.0 版本，文件修改后，左侧git图标显示出文件修改，点击列表中某个修改的文件，提示找不到该文件。

修复 qaui 预览显示问题

修复了 qaui 图标无法显示的问题

修复设置 SMART 后，出现白屏的问题

修复 Network 面板无法展示的问题

之前版本，Network 面板白屏，需要点击「刷新预览和 Devtools 」按键才能恢复

修复新建工程版本不对应的问题

之前版本，新建工程弹框中的版本号，与 IDE 真实版本号不对应

2023 年 IDE 版本更新时间线：

2023 年 7 月 03 日：快应用开发工具 6.4.0 版本发布
2023 年 4 月 26 日：快应用开发工具 6.3.0 版本发布

2022 年 IDE 版本更新时间线：

2022 年 7 月 25 日：快应用开发工具 6.2 版本发布

2021 年 IDE 版本更新时间线：

2020 年 IDE 版本更新时间线：

vivo 发布快应用「小说」组件

admin — Fri, 30 Dec 2022 09:44:10 GMT

快应用是基于手机硬件平台的新型应用形态，历经多年打磨，已成为主流轻应用平台。小说类应用具备用户规模大(中国网文用户 5 亿+)，用户阅读频率、用户粘度和营收相对高的特点，越来越多开发者，基于快应用平台，发布小说类应用。但，其中也会存在诸多痛点，基于如此背景，快应用联盟推出快应用「小说组件」，在此与广大快应用开发者分享。

温馨提醒：截至目前，此小说组件 vivo 已经支持，联盟其他厂商将会陆续开放。

快应用小说开发现状

目前，基于快应用开发「小说」品类应用，尚有诸多痛点，大致列举如下：

1、完成多个组件组合装配

例如使用 swiper 组件和 text 组件组合的横向小说阅读
例如使用 list 组件和 text 组件组合的竖向小说阅读
且组合方案很难做到两者兼容的动态切换，开发者开发起来工作量相对也比较大。

2、完成小说数据处理

需要开发者获取到小说内容后，进行分段、分行、分页，然后将数据塞入text组件中，数据处理逻辑是比较多的。

3、完成大屏适配

需要开发者对于折叠屏手机大屏做额外的文字适配，又多了一层适配的工作。

4、完成广告开发

需要额外在 list 组件或者 swiper 组件中加入广告，广告需要额外判断，未有预留广告位容器。

5、阅读体验选择少

阅读体验上无法动态的横竖屏阅读选择，限制了用户的阅读喜好选择

6、开发成本高

基于以上一系列的开发，对于前端开发者来说开发成本是比较高的。

小说组件方案

小说组件的发布，解决了上述一系列难题。整体效果如下（其中内容引用于网络，仅用于测试查看效果）：
基于小说组件，可以帮您快速实现以下基本功能：

1、全功能概览、左右阅读、上下阅读

2、文字动态大小和背景、行间距、广告容器

3、大屏阅读文字适配

4、优化功能

preLoadPage 接口(详见下文技术文档) 可以提前预加载下一页广告，提高广告曝光率。

小说组件特点

1、高效、快捷

只需要将分段符配置好，然后一键塞入整个章节数据，将广告位放入预留容器，之后就可以显示。

2、兼容原有小说方案

对于已有小说方案，想要切量体验小说组件可以这么做：判断 vivo 快应用引擎版本，根据版本来路由到新的小说组件界面，然后显示小说。版本判断方法（vivo 平台要求 versionCode 大于等于 11010701）。

const device = require('@system.device')
const host = device.host
const packagename = host.package
const versionName = host.versionName
const versionCode = host.versionCode

文档、源码、sample 体验

详细指导文档：小说组件文档；
示例源码：Sample 示例源码；
在线 Sample：Sample rpk 体验。

技术支持

如有适配问题，快应用技术弟和开发者，将全力给予支持。

今日美句：canvas开发相关方法及流程

xrbklmmt — Mon, 10 Jan 2022 08:49:02 GMT

一、首页日历

用于展示自当日，至往后一个月的日历数。每“张”日历卡片由图片、日期（阳历、阴历）及每日金句组成。

1.左右切换

使用swiper组件可以实现左右切换当前日期的需求。

swiper组件需要固定一个高度，不能由子组件撑开。首页每“张”日历卡片需占一屏，使用下面方法获取pageHeight

index.ux

async onInit() {
    // this.$app.$def.manifest.config.designWidth 可获取已配置designWidth(*只读),如未配置则使用默认designWidth
    const designWidth =
      this.$app.$def.manifest.config.designWidth || this.$app.$def.designWidth // 这里建议将默认designWidth即`750`,作为常量保存在`app.ux`
    const { windowHeight, windowWidth } = await $utils.deviceGetInfo() // utils.js中方法已注册到全局
    this.height = (windowHeight / windowWidth) * designWidth // pageHeight
  }

utils.js

/**
 * 获取设备信息
 */
function deviceGetInfo() {
  return new Promise((resolve, reject) => {
    require('@system.device').getInfo({
      success: ret => {
        resolve(ret)
      }
    })
  })
}

app.ux

const $utils = require('[pathName]/utils').default
/* @desc: 注入方法至全局 global,以便页面调用 */
const hook2global = global.__proto__ || global
hook2global.$utils = $utils

2.日历卡片

2-1. 图片

2-1-1. 居中

由于展示在卡片的背景图片，不一定大小相同。此时可以设置一个固定的“box"，来绘制图片区域。该模板中设置图片宽高比(sw:sh)固定为3:2。

使用ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)进行绘制时，需要注意：

如果图片的实际高＞＝ “box”的高，则需绘制的图片宽度dw为sw，再计算出dh
如果图片的实际高 < “box”的高，则需绘制的图片高度dh为sh，再计算出dw

const sw = this.width
const sh = this.width / (3 / 2)
let dw = sw
let dh = dw / (img.width / img.height)
if (dh < sh) {
   dh = sh
   dw = dh * (img.width / img.height)
 }

2-1-2. 明暗

首页的图片明暗设置一个默认值。需要从父组件传递，详细在卡片分享-明暗中说明。

2-2. 日历

日历部分，分为阴历、阳历。

2-2-1. 日历数据

这里直接找了一个js库去获取到日期相关信息calendar：GitHub地址

2-2-2. 绘制阴历

年月日以“列”的形式排版，覆盖在图片上。根据获取到的日历数据，需要使用的信息有

const { Animal, IDayCn, IMonthCn, gzDay, gzMonth, gzYear } = calendar

日期内容整体靠右，先定义一些需要的常量、变量。常量数值并无固定，但建议根据卡片宽度（首页日历宽度为页面宽度，即designWidth），按比例计算，提高兼容性：

const YTD_SIZE = sw / 28 // 年月及星期 文字大小
const FIRST_WORD_TOP = sh / 6.25, // 每列文字内容，首字符的上边距
      LINE_HEIGHT = YTD_SIZE + 10, // 字体大小加上下间距总和10
      LETTER_SPACING = YTD_SIZE + 10 // 字体大小加左右间距总和10
// 第一个需要绘制的日期字符的初始坐标 (dx,dy)
    let dx = sw * 0.76, 
      dy = FIRST_WORD_TOP

由于文字内容以“列”的形式排版，则每绘制一个字符，dy就需要增加一个文字的lineHeight：

lunarDateHandler(ctx, str, dx, dy, lineHieght) {
    str.split('').forEach(ele => { // calendar返回的日期信息，不一定是一个字符，比如 gzMonth=“戊戌”等
      ctx.fillText(ele, dx, dy)
      dy += lineHieght
    })
    return dy // 返回新的dy用于绘制分割线的高
}

每列文本内容的左边，有一条分割线。有些分割线位于两列文字之间，给分割线定义一些左右的"margin"：

const BORDER_LEFT = 10, // margin-left
      BORDER_RIGHT = 10, // margin-right
      BORDER_TOP = FIRST_WORD_TOP - YTD_SIZE, // 每列文字内容的左边框,左右边距及上边距

因为canvas绘制文字时，并不存在“行高”的概念，在绘制每列最后一个字符时，实际上只需要再增加一个字符下边距的值（即 (lineHieght-YTD_SIZE)/2，返回的就是实际需要的线条高度，但是我们并没有在lunarDateHandler方法中处理，而是直接给dy增加了一个lineHeight

this.lunarDateBorderLeft(
      ctx,
      dx - BORDER_RIGHT,
      BORDER_TOP,
      dx - BORDER_RIGHT,
      dy - YTD_SIZE  // 这里需要减去一个字符高度，视觉上使文字上边距和线条上边距对齐，达到字符拥有“行高”的效果
    )
/**
 * 绘制线条的方法
 */
lunarDateBorderLeft(ctx, x0, y0, x1, y1) {
    ctx.moveTo(x0, y0)
    ctx.lineTo(x1, y1)
    ctx.stroke()
}

2-2-3. 绘制阳历

年月及星期：

简单定义一个(x,y)，使得文字内容位于右下角即可，建议根据卡片宽度，按比例来计算。

当日日期：

简单定义一个(x,y)，使得文字内容位于左下角即可，建议根据卡片宽度，按比例来计算。

2-2-4. 每日金句

下方的文本内容，上下居中且换行展示。

根据卡片的高度（由于首页占一屏，即pageHeight）减去上方图片及日期的高度，计算出剩余的、可用于展示文字内容的高度contentHeight

const contentHeight = this.height - sh

定义固定文字内容左边距及每行宽度

const lineWidth = $utils.lineWidthHandler(w) // 固定每行宽度
const default_drawX = w * 0.06 // 固定一个左边距

2-2-5. 开始绘制

绘制前：

// 获取文字内容总宽度
const txtToatalWidth = ctx.measureText(content).width // 这个宽度和文字大小及文字内容的长度有关
let drawTxt = '' // 当前绘制的内容
let drawLine = 1 // 第几行开始绘制
let drawIndex = 0 // 当前绘制内容的索引

绘制方法

需要绘制内容的宽度ctx.measureText(drawTxt).width＜每行宽度lineWidth，则直接绘制：

 if (txtToatalWidth <= lineWidth) {
    ctx.fillText(content, drawX, drawY)
}

需要绘制内容的宽度ctx.measureText(drawTxt).width＞每行宽度lineWidth：

for (let i = 0; i < content.length; i++) {
	drawTxt += content[i]
if (ctx.measureText(drawTxt).width >= lineWidth) {
        if (drawLine >= 10) { // 绘制的行数大于10时，不再进行绘制，以省略号的形式展示
          ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY)
          break
        } else {
          ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY)
          drawIndex = i + 1
          drawLine += 1
          drawY += lineHeight
          drawTxt = ''
        }
      } else {
        //   内容绘制完毕，但是剩下的内容宽度不到lineWidth
        if (i === content.length - 1) {
          const lastConten = content.substring(drawIndex)
          ctx.fillText(lastConten, drawX, drawY)
        }
      }
   } 
}

封装方法

此时可以将文本内容换行方法封装，命名为textWrap：

function textWrap(ctx,content,lineWidth,lineHeight,drawX,drawY){
  if (txtToatalWidth <= lineWidth) {
  // 需要绘制内容的宽度`ctx.measureText(drawTxt).width`＜每行宽度`lineWidth`，则直接绘制：
    ctx.fillText(content, drawX, drawY)
  } else{
      // 需要绘制内容的宽度`ctx.measureText(drawTxt).width`＞每行宽度`lineWidth`：
    ...
  }
}

二、卡片分享

将需要分享的内容（金句、诗歌/词），进行相应编辑后，生成图片保存到相册，并分享到各平台。

1. 分享内容

1-1. 金句模板 (日历形式)

1-1-1. 固定卡片宽度

定义一个固定的宽度，建议根据designWidth，按比例计算

let designWidth = this.$app.$def.manifest.config.designWidth || this.$app.$def.designWidth
this.width = designWidth * 0.9

1-1-2. 计算卡片高度

this.fontSize = this.width/21 // 随意定义一个字体大小
this.lineHeight = this.width/21 + 20 // 根据字体大小增加“上下间距”，定义“行高”
const lineWidth = $utils.lineWidthHandler(this.width) // 固定每行宽度
this.lines = (this.info.content.length * this.fontSize) / lineWidth // 计算总行数
const otherLines = this.lineHeight * 5 // slogan及source预留高度
const padding = this.width / 7.5 // 文本内容上下padding
// 图片宽高比3:2
const imgHeight = this.width / 1.5
// 卡片最小高度
const minHeight = imgHeight * 2
const padding = this.lineHeight * 4
this.height = this.lines * this.lineHeight + padding + imgHeight + otherLines
this.height = this.height < minHeight ? minHeight : this.height

绘制步骤及方法同日历卡片。此时，可以将日历“卡片”下方内容的绘制方法封装，只需要传递卡片的宽、高，文字大小、行高和所需绘制内容等关键信息，即可绘制不同size的“卡片”：

function drawContent(
  ctx,
  info,
  w,
  h,
  fontSize,
  lineHeight,
  marginTop,
  slogan
) {
  ctx.fillStyle = '#000000'
  const lineWidth = $utils.lineWidthHandler(w) // 固定每行宽度
  const default_drawX = w * 0.06 // 固定一个左边距
  const content = info.content
  let title = info.title || ''
  let author = info.author || ''
  const source = `${author} ${title}`

  ctx.fillStyle = color
  ctx.font = `${fontSize}px`

  const lineNum = Math.ceil(lineWidth / fontSize)
  const lines = Math.ceil(content.length / lineNum)
  let drawX = default_drawX
  let sourceLeft = w - ctx.measureText(source).width - drawX
  let drawY = (h - lines * lineHeight) / 2 + marginTop
	// 绘制引用出处（作者、标题）
  if (!!title || !!author) {
    drawY = (h - lines * lineHeight + lineHeight) / 2 + marginTop - lineHeight
    let sourceTop = lines * lineHeight + drawY + lineHeight / 2
    ctx.fillText(source, sourceLeft, sourceTop)
  }
    // 绘制句子
  textWrap(
    ctx,
    content,
    lineWidth,
    lineHeight,
    drawX,
    drawY
  )
   	// 绘制分享来源
  if (slogan !== '') {
    slogan = `分享自${slogan}快应用`
    const sloganSize = $utils.minFontSize(w) // 定义任意合适的字体大小，建议根据designWidth按比例计算
    ctx.fillStyle = '#cccccc'
    ctx.globalAlpha = 0.6
    ctx.font = `${sloganSize}px`
    let sloganMarginLeft = (w - ctx.measureText(slogan).width) / 2 // 居中
    const sloganMarginBottom = 50
    let sloganMarginTop = h - sloganMarginBottom + marginTop
    ctx.fillText(slogan, sloganMarginLeft, sloganMarginTop)
    ctx.globalAlpha = 1
  }
  return lines
}

1-2. 金句模板(图文形式)

固定为正方形，背景填充为纯图片，文本内容上下左右居中于图片上方

1-2-1. 绘制图片

图片也需要根据实际宽高进行居中展示，参考日历卡片-图片的绘制方法

1-2-2. 绘制内容

由于是直接绘制在图片上方，此时marginTop为0，直接调用drawContent方法：

drawContent(
  ctx,
  info,
  w,
  h, // h = w
  fontSize,
  lineHeight,
  marginTop=0
)

1-3. 绘制金句卡片

关于明暗度的绘制，实际上是添加了一层黑色的"蒙版"，通过父子组件之间传值，$watch监听蒙版透明度的变化，实现效果

drawCard(
    idx,
    info,
    font = this.font,
    fontSize = this.fontSize,
    hasTitle = this.hasTitle,
    hasAuthor = this.hasAuthor,
    lineHeight = this.lineHeight,
    alignType = this.alignType
  ) {
    const canvas = this.$element(`canvas${idx}`) //获取 canvas 组件
    const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文
    ctx.clearRect(0, 0, this.width, this.height)
    ctx.fillStyle = '#ffffff'
    ctx.fillRect(0, 0, this.width, this.height)
    // 绘制背景图
    const img = new Image()
    img.src = info.data.image
    img.onload = () => {
      // 固定背景图大小 w: h = 3: 2
      const sw = this.width
      const sh = this.width / (3 / 2)
      let dw = sw
      let dh = dw / (img.width / img.height)
      if (dh < sh) {
        dh = sh
        dw = dh * (img.width / img.height)
      }
      ctx.drawImage(
        img,
        0,
        -(dh - sh) / 2,
        img.width,
        img.height,
        0,
        -(dh - sh),
        dw,
        dh
      )
      // 明暗度
      ctx.globalAlpha = this.alpha
      ctx.fillStyle = '#000000'
      ctx.fillRect(0, 0, sw, sh)
      // 文字部分
      ctx.globalAlpha = 1 // 还原默认透明度 1
      // 日期部分 阴历
      this.drawLunarDate(ctx, info.calendar, sw, sh)
      // 日期部分 阳历
      const DATE_SIZE = sw / 3.5 // 当日 文字大小
      const marginTop = sh + DATE_SIZE * 0.2
      this.drawNewDate(ctx, info.calendar, sw, sh, DATE_SIZE, marginTop)
      // 内容
      const contentHeight = this.height - sh
      this.lines = drawContent(
        ctx,
        info.data,
        sw,
        contentHeight,
        fontSize,
        '#000000',
        this.slogan,
        marginTop,
        hasTitle,
        hasAuthor,
        font,
        lineHeight
      )
    }
    img.onerror = () => {
      console.log('图片加载失败')
    }
  }

1-4. 诗词/诗歌模板

诗词/诗歌的换行比较特殊，例如：

这样的文本内容，不能单纯用“。”或者“ ”（空格）区分。

1-4-1. 数据处理

因此从数据着手，将需要换行的句子，用“/”隔开：

`“行尽潇湘到洞庭。楚天阔处数峰青。旗梢不动晚波平。/红蓼一湾纹缬乱，白鱼双尾玉刀明。夜凉船影浸疏星。”`

`“等待也许终于有人记得端来/她那甜甜的 甜甜的 甜点”`

再将其处理为数组：

let arr = this.info.content.split('/')

这样，我们可以得到一个数组：

1-4-2. 新的数组

可以发现，上图中，诗词（左图）的每行，并不是按照数组中每个元素去绘制的，而是将每个数组元素中的内容绘制了两行。

随意设置一个合适的字体大小及行高：

this.fontSize = $utils.setFontSize(this.width)
this.lineHeight = $utils.setLineHeight(this.fontSize)

处理数组的方法：

getContentArr(){
    const lineWidth = $utils.lineWidthHandler(this.width) // 固定每行宽度
    let arr = this.info.content.split('/')
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
      let totalWords = arr[i].length // 需要绘制的文本总字数
      let countWordOfALine = Math.floor(lineWidth / this.fontSize) // 限制一行绘制的字数
      if (totalWords > countWordOfALine) {  // 超出一行所限的文本内容
        const aliquot = Math.floor(totalWords / countWordOfALine)
        const remainder = arr[i].substring(aliquot * countWordOfALine) 
        let start = 0
        let end = countWordOfALine
        arr.splice(i, 0)
        for (let j = 0; j < aliquot; j++) {
          start = countWordOfALine * j
          end = start + countWordOfALine
          let str = arr[i].substring(start, end) // 绘制aliquot次countWordOfALine长度的文本内容
          newArr.push(str)
        }
        newArr.push(remainder) // 剩余不够绘制一次countWordOfALine长度的文本内容
      } else {
        newArr.push(arr[i]) // 未超出一行所限的文本内容
      }
    }
    return newArr
  }

然后，可以得到一个新的数组：

1-4-3. 绘制内容的总行数

根据新数组，我们可以得到绘制的总行数：

let contentArr = this.getContentArr()
this.lines = contentArr.length

1-4-4. 绘制内容中的固定高度

我们还需要固定出引用来源（标题、作者和时代）、slogan的高度，以及给卡片一个上下的padding：

const titleSize = $utils.setFontSize(this.width, 16)
const sourceSize = $utils.minFontSize(this.width)
const cardTop = $utils.setFontSize(this.width, 5)
const cardBottom = cardTop
const sourceTop = $utils.setFontSize(this.width, 44)
const sourceBottom = $utils.setFontSize(this.width, 18)

1-4-5. 计算卡片高度

有了上述信息，我们可以获得卡片的高度：

this.height = 
  titleSize + sourceSize + this.lines * this.lineHeight + cardTop + cardBottom + sourceTop + sourceBottom + sloganSize

1-4-6. 绘制内容对齐方式

诗歌：

文本内容左对齐

绘制“日历卡片”的固定左边距的方法，同样适用“诗歌卡片”
```
const default_drawX = w * 0.06 // 固定一个左边距
let dx = default_drawX
```

诗词：

文本内容上下左右居中对齐

不适用于上述固定左边距的方法，需要对drawX再次进行计算

if (info.dynasty !== '现代') { // 可以根据朝代去区分
      let lenArr = []
      arr.forEach(ele => lenArr.push(ele.length))
      let maxCount = Math.max(...lenArr) // 取数组元素中最长的内容，计算出其宽度
      let temp = arr.filter(ele => ele.length === maxCount)
      dx = (w - ctx.measureText(temp[0]).width) / 2 // 得到可以使文本内容整体居中的左边距
}

1-4-7. 封装方法

接下来可以封装绘制诗词/诗歌卡片，主体文本内容的方法：

drawContent(
    ctx,
    info,
    w,
    h,
    dy,
    arr,
    font,
    fontSize,
    lineHeight
  ) {
    const lineWidth = $utils.lineWidthHandler(w) // 固定每行宽度
    const default_drawX = w * 0.06 // 固定一个左边距
    let dx = default_drawX
    dy += lineHeight
    ctx.fillStyle = color
    ctx.globalAlpha = 1
    ctx.font = `${fontSize}px normal ${font}`
    if (info.dynasty !== '现代') {
      let lenArr = []
      arr.forEach(ele => lenArr.push(ele.length))
      let maxCount = Math.max(...lenArr)
      let temp = arr.filter(ele => ele.length === maxCount)
      dx = (w - ctx.measureText(temp[0]).width) / 2
    }
    for (let i = 0; i < arr.length; i++) {
      const element = arr[i]
      ctx.fillText(arr[i], dx, dy)
      if (i !== arr.length - 1) dy += lineHeight
    }
    return dy
  }

1-5. 绘制诗词/诗歌卡片

drawCard(
    info,
    font,
    fontSize,
    lineHeight
  ) {
    const canvas = this.$element('canvas') //获取 canvas 组件
    const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文
    let w = this.width,
      h = this.height
    ctx.clearRect(0, 0, w, h)
    ctx.fillStyle = '#ffffff'
    ctx.fillRect(0, 0, w, h)
    // 标题
    let {
      contentArr,
      titleSize,
      sourceSize,
      cardTop,
      cardBottom,
      sourceTop,
      sourceBottom
    } = this.$parent().cardSizeHandler()
    const source = `${info.dynasty} • ${info.author}`
    ctx.globalAlpha = 1
    ctx.fillStyle = '#ffffff'
    ctx.fillRect(0, 0, w, h)
    ctx.fillStyle = '#000000'
    // 标题
    ctx.font = `${titleSize}px bold sans-serif`
    let dx = (w - ctx.measureText(info.title).width) / 2
    let dy = cardTop
    ctx.fillText(info.title, dx, dy)
    // 来源（作者）
    ctx.font = `${sourceSize}px normal sans-serif`
    dx = (w - ctx.measureText(source).width) / 2
    dy = dy + sourceTop + titleSize
    ctx.fillText(source, dx, dy)
    // 内容
    dy = dy + sourceSize + sourceBottom
    dy = this.drawContent(
      ctx,
      info,
      w,
      h,
      dy,
      contentArr,
      font,
      fontSize,
      lineHeight
    )
    // slogan
    const txt = `分享自${this.slogan}快应用`
    const sloganSize = $utils.minFontSize(w)
    ctx.fillStyle = '#000000'
    ctx.globalAlpha = 0.3
    ctx.font = `${sloganSize}px normal sans-serif`
    dx = (w - ctx.measureText(txt).width) / 2
    ctx.fillText(txt, dx, this.height - cardBottom / 2)
  }

2. 工具栏

2-1. 模板

卡片模板，即分享内容

2-2. 图片（仅金句卡片支持）

布局不再赘述

实现切换图片，就要从卡片绘制方法入手，将图片地址，作为变量暴露出来，绘制方法在分享内容中drawCard，由父组件传递给卡片组件：

// 子组件 options
  choosePicHandler(item, idx) {
      this.localImage = false
      this.subCurrentItem.index = idx
      this.subCurrentItem.type = this.tabBarActive
      this.recentlyList = this.recentlyList.filter(ele => ele !== item)
      this.recentlyList.unshift(item)
      if (this.recentlyList.length > 10) this.recentlyList.pop()
      $utils.setStorage('recentlyPics', JSON.stringify(this.recentlyList)) // 通过storage进行存储
      this.$emit('draw', {
        currentImg: item,
        subCurrentItem: this.subCurrentItem
      })
  }
// 父组件 shareCard
  getNewCurrentImage(e) {
      if (!!e.detail.currentImg) {
        this.cardInfo.data.image = e.detail.currentImg
        switch (this.cardType) {
          case 0:
            this.$child('card').drawCard(this.idx, this.cardInfo)
            break
          case 1:
            this.$child('square').drawCard(this.cardInfo.data)
            break
          default:
            break
        }
        $utils.setStorage(
          'subCurrentItem',
          JSON.stringify(e.detail.subCurrentItem)
        )  // 通过storage进行存储
      }
   }

2-3. 排版

同样是需要什么就在drawCard中进行声明，将其暴露出来

// 行距、字体大小的增减
  plusAndMinusHandler(e) {
    let { type, num } = e.detail
    if (type === 'lineHeight') {
      const minLineHeight = $utils.setLineHeight(this.fontSize)
      const maxLineHeight = $utils.maxLineHeight(this.fontSize)
      if (this.lineHeight <= minLineHeight && num < 0) {
        this.lineHeight = minLineHeight
        return
      }
      if (this.lineHeight >= maxLineHeight && num > 0) {
        this.lineHeight = maxLineHeight
        return
      }
      this.lineHeight += num
    }
    if (type === 'fontSize') {
      const minFontSize = $utils.minFontSize(this.width)
      const maxFontSize = $utils.maxFontSize(this.width)
      if (this.fontSize <= minFontSize && num < 0) {
        this.fontSize = minFontSize
        return
      }
      if (this.fontSize >= maxFontSize && num > 0) {
        this.fontSize = maxFontSize
        return
      }
      let temp = this.lineHeight - this.fontSize
      this.fontSize += num
      this.lineHeight = temp + this.fontSize
    }
    if (this.cardType === 0) this.cardSizeHandler()
    this.drawNewCard()
  },
    // 文本对齐 
  textAlignHandler(e) {
    if (this.cardType === 0) {
      this.alignTypeNormal = e.detail.type
    }
    if (this.cardType === 1) {
      this.alignTypeSquare = e.detail.type
    }
    this.drawNewCard()
  },
  //来源显隐    
  sourceHandler(e) {
    let { title, author } = e.detail.data
    this.drawNewCard({ hasTitle: title, hasAuthor: author })
  },
    // 诗歌/诗词 配色方案
  schemeHandler(e) {
    let { color, bgcolor } = e.detail.scheme
    this.color = color
this.bgcolor = bgcolor
    this.drawNewCard()
  }

三、遇到的问题

1.日期绘制

首页卡片原需求的样式布局如下：

由于快应用canvas组件，图形和文字在使用canvas.globalCompositeOperation 属性时，会有显示问题。因此将10（即当日日期）这部分绘制的内容，

直接文本填充：

let marginLeft = sw / 15
    ctx.font = `${fontSize}px bold sans-serif`
    ctx.fillStyle = 'black'

后续引擎版本解决该bug，可以使用下面代码实现原需求样式：

ctx.fillText(`${date}`, marginLeft, marginTop)
ctx.fillStyle = "white";
ctx.fillRect(0, sh - DATE_SIZE / 2, sw, DATE_SIZE / 2);
ctx.fillStyle = "black"
ctx.globalCompositeOperation = "destination-in"

2. 工具栏-字体

原需求如下：

可以看到，快应用的text组件支持的一些字体样式，由于canvas组件开发时，未考虑到 ctx.font = 50px normal serif 这种写法，官网中给的写法默认是 ctx.font = 10px sans-serif，导致 50px normal serif 这种三个样式的写法中最后一个样式 都不生效。

暂时只能注释该工具栏功能，待后续引擎版本修复后，可以将该部分代码开放使用。

const sentenceOpt = [
  {
    image: '../../assets/images/icon/template.png',
    type: '模板'
  },
  {
    image: '../../assets/images/icon/image.png',
    type: '图片'
  },
  // {
  //   image: '../../assets/images/icon/font.png',
  //   type: '字体'
  // },
  {
    image: '../../assets/images/icon/layout.png',
    type: '排版'
  }
]

vscode-loader 解析（node 环境）

minxuan — Tue, 21 Dec 2021 07:52:47 GMT

VsCode 源码使用 vscode-loader 加载模块（异步模块定义 (AMD) 加载器的一种实现）；vscode-loader 支持在浏览器以及 node 中使用，在两种环境的使用方式基本一致。本文是对其在浏览器环境运行进行分析。前面，我们已经分析过浏览器环境的模块加载，接下来看 node 环境的模块加载。

示例

vscode-loader 在 node 环境下加载模块，和浏览器环境基本一致。不同点是，不是通过 script 标签加载 loader.js，而是通过 require 加载。

具体示例如下：

加载 loader.js，再调用 loader 模块的方法，加载 test 依赖：

loader = require("./src/loader");
// 设置缓存
loader.config({
  nodeCachedData: {
    path: "./cache-data",
  },
});
loader(["test"], function (test) {
  console.log(test.compare(7, 5));
});

定义模块：

// test.js

define("test", function () {
  return {
    compare: function (a, b) {
      return a > b;
    },
  };
});

loader 加载模块

上一篇文章中，我们提到，浏览器环境通过 require 函数加载模块。而 node 环境，是通过 loader.js 的模块导出值，加载其他模块。

查看入口文件中的逻辑，可以看出 loader 就是 require 函数：

// 初始化
	export function init(): void {
		...

		if (env.isNode && !env.isElectronRenderer) {
			// 设置 module.expots
			module.exports = RequireFunc;
			require = RequireFunc;
		} else {
			...
		}
	}

所以，node 环境加载模块的逻辑，和浏览器基本是一致的。不同点在于，之前提到的，不同环境下的 scriptLoader (脚本加载器)。

NodeScriptLoader

下面，我们具体来看 node 的脚本加载器。

class OnlyOnceScriptLoader implements IScriptLoader {

	...

	public load(moduleManager: IModuleManager, scriptSrc: string, callback: () => void, errorback: (err: any) => void): void {
		if (!this._scriptLoader) {
			if (this._env.isWebWorker) {
				this._scriptLoader = new WorkerScriptLoader();
			} else if (this._env.isElectronRenderer) {
				// electron 渲染进程，preferScriptTags 指定是否用

定义模块：

// test.js

define('test', function() {
    return {
        compare: function(a, b) {
            return a > b;
        }
    }
});

define 方法：define(id?, dependencies?, factory);，第一个参数是模块名，第二个参数是依赖，第三个参数是模块的工厂函数，返回定义的模块。

可以看到，和 requirejs 不同点在于，vscode-loader 不通过 data-main 指定入口文件，而是直接加载模块。

vscode-loader 的代码结构

不同于 requirejs，vscode-loader 的源码是用 ts 编写的，再通过 yarn compile 打包成 loader.js。所以，我们先看 vscode-loader/src/core 的代码结构。


├── core                    # 核心代码
│   ├── main.ts             # 入口文件
│   ├── env.ts              # 环境，用于判断当前环境：_isWindows，_isNode、_isElectronRenderer(浏览器环境？)、_isWebWorker
│   ├── configuration.ts    # 配置，类似于 requirejs 中的 context.configure，多了模块 id 转为 path 等方法。
│   ├── moduleManager.ts    # 模块管理器，类似于 requirejs 中的 context.Module (模块加载器)，这部分是核心代码，实现了 define、require 等方法。
│   ├── scriptLoader.ts     # 脚本加载器，类似于 requirejs 中的 context.load，实现了不同环境下加载脚本的方法。
│   ├── loaderEvent.ts      # 事件记录，是 vscode-loader 增加的功能，用于记录 BeginLoadingScript、EndLoadingScriptOK 等事件及其时间戳。
│   └── util.ts             # 公共方法，比如 uri 转 path、生成异步模块的 id 等。
│
└── loader.js               # 打包产物

main.ts

我们先看 vscode-loader 的入口文件，mian.ts

// 限制：为了加载 jquery，始终 require 'jquery' 并在加载器配置中添加 'jquery' 的路径

declare var doNotInitLoader;
var define;

namespace AMDLoader {

	// 1：新建环境对象
	const env = new Environment();

    // 2：声明模块管理器
	let moduleManager: ModuleManager = null!;

    // 3：define 方法，最终调用 moduleManager.defineModule 或 moduleManager.enqueueDefineAnonymousModule
	const DefineFunc: IDefineFunc = function (id: any, dependencies: any, callback: any): void {
		...
	};
	DefineFunc.amd = {
		jQuery: true
	};

	// 4：config 方法，调用 moduleManager.configure
	const _requireFunc_config = function (params: IConfigurationOptions, shouldOverwrite: boolean = false): void {
		moduleManager.configure(params, shouldOverwrite);
	};

	// 5：require 方法，调用 moduleManager.configure 或 moduleManager.synchronousRequire 或 moduleManager.defineModule
	const RequireFunc: IRequireFunc = function () {
		...
	};
    // require 增加方法，config、getConfig、reset、getBuildInfo、getStats、define，最终都是调用 moduleManager 的方法
	RequireFunc.config = _requireFunc_config;
	RequireFunc.getConfig = function (): IConfigurationOptions {
		return moduleManager.getConfig().getOptionsLiteral();
	};
	RequireFunc.reset = function (): void {
		moduleManager = moduleManager.reset();
	};
	RequireFunc.getBuildInfo = function (): IBuildModuleInfo[] | null {
		return moduleManager.getBuildInfo();
	};
	RequireFunc.getStats = function (): LoaderEvent[] {
		return moduleManager.getLoaderEvents();
	};
	RequireFunc.define = function () {
		return DefineFunc.apply(null, arguments);
	}

	// 6：(重点)初始化，如果还未初始化，新建模块管理器，并初始化
	export function init(): void {
        // 如果有 require 方法（即 node 环境 / electron 环境），保存到 nodeRequire 和 __$__nodeRequire 中
        if (typeof global.require !== 'undefined' || typeof require !== 'undefined') {
            const _nodeRequire = (global.require || require);
            if (typeof _nodeRequire === 'function' && typeof _nodeRequire.resolve === 'function') {
                // 重新暴露 node 的 require 函数
                const nodeRequire = ensureRecordedNodeRequire(moduleManager.getRecorder(), _nodeRequire);
                global.nodeRequire = nodeRequire;
                (RequireFunc).nodeRequire = nodeRequire;
                (RequireFunc).__$__nodeRequire = nodeRequire;
            }
        }

        // 根据环境，设置 module.exports、require、define 等方法
        if (env.isNode && !env.isElectronRenderer) {
            module.exports = RequireFunc;
            require = RequireFunc;
        } else {
            if (!env.isElectronRenderer) {
                global.define = DefineFunc;
            }
            global.require = RequireFunc;
        }
    }

	if (typeof global.define !== 'function' || !global.define.amd) {
		// 第一步：新建模块管理器
		moduleManager = new ModuleManager(env, createScriptLoader(env), DefineFunc, RequireFunc, Utilities.getHighPerformanceTimestamp());

		// 第二步：如果有 global.require，且非函数，则更新 config
		if (typeof global.require !== 'undefined' && typeof global.require !== 'function') {
			RequireFunc.config(global.require);
		}

		// 第三步：定义 define 方法
		define = function () {
			return DefineFunc.apply(null, arguments);
		};
		define.amd = DefineFunc.amd;

		// 第四步：如果还未初始化，调用 init
		if (typeof doNotInitLoader === 'undefined') {
			init();
		}
	}

}

可以看到，main.ts 中，主要是定义了 define、config、require 等方法，然后新建 moduleManager，再调用 init 方法进行初始化。

init 方法，主要是根据不同的环境设置方法。比如 node 环境，保存 node 原本的 require 方法到 nodeRequire，再设置 require = RequireFunc。浏览器环境，设置 global.require = RequireFunc，即 window.require = RequireFunc。

require 加载模块

浏览器环境，通过 require 方法，加载模块。

前面已经提到 require 对应 RequireFunc，我们继续查看代码逻辑：

// main.ts
const RequireFunc: IRequireFunc = function () {
	// 只传一个参数：如果是对象，调用 moduleManager.configure 进行配置；如果是字符串，调用 moduleManager.synchronousRequire 同步加载模块
	if (arguments.length === 1) {
		if ((arguments[0] instanceof Object) && !Array.isArray(arguments[0])) {
			_requireFunc_config(arguments[0]);
			return;
		}
		if (typeof arguments[0] === 'string') {
			return moduleManager.synchronousRequire(arguments[0]);
		}
	}
	// 传 2-3 个参数：调用 moduleManager.defineModule 生成异步模块
	// 这里传入 2 个参数，['test'], f(test)
	if (arguments.length === 2 || arguments.length === 3) {
		if (Array.isArray(arguments[0])) {
			moduleManager.defineModule(Utilities.generateAnonymousModule(), arguments[0], arguments[1], arguments[2], null);
			return;
		}
	}
	throw new Error('Unrecognized require call');
};

// utils.ts
export class Utilities {
	private static NEXT_ANONYMOUS_ID = 1;

	// 生成异步模块的字符串id
	// 返回 '===anonymous1==='
	public static generateAnonymousModule(): string {
		return '===anonymous' + (Utilities.NEXT_ANONYMOUS_ID++) + '===';
	}
}

// moduleManager.ts
export class ModuleManager {
	/**
	 * 创建模块并将其存储在 _modules 中。管理器将立即开始解析其依赖关系。
	 * @param strModuleId 模块的唯一且绝对的 id。这不能与另一个模块的 id 冲突
	 * @param dependencies 具有模块依赖项的数组。特殊键是：“require”、“exports”和“module”
	 * @param callback 如果 callback 是一个函数，它将使用解析的依赖项调用。如果 callback 是一个对象，它将被视为模块的导出。
	 */
	// 参数：'===anonymous1===', ['test'], f(test)
	public defineModule(strModuleId: string, dependencies: string[], callback: any, errorback: ((err: AnnotatedError) => void) | null | undefined, stack: string | null, moduleIdResolver: ModuleIdResolver = new ModuleIdResolver(strModuleId)): void {
		// define-1：strModuleId -> moduleId
		let moduleId = this._moduleIdProvider.getModuleId(strModuleId);
		// 如果已加载，提示重复定义模块
		if (this._modules2[moduleId]) {
			if (!this._config.isDuplicateMessageIgnoredFor(strModuleId)) {
				console.warn('Duplicate definition of module \'' + strModuleId + '\'');
			}
			return;
		}

		// define-2：新建模块并保存到 this._modules2
		let m = new Module(moduleId, strModuleId, this._normalizeDependencies(dependencies, moduleIdResolver), callback, errorback, moduleIdResolver);
		this._modules2[moduleId] = m;

		// 如果已经构建，收集构建信息
		if (this._config.isBuild()) {
			this._buildInfoDefineStack[moduleId] = stack;
			this._buildInfoDependencies[moduleId] = (m.dependencies || []).map(dep => this._moduleIdProvider.getStrModuleId(dep.id));
		}

		// define-3：立即解析依赖项（不是 timeout 中执行）。如果需要支持无序的模块，为了完成文件的处理，则在 timeout 中执行。
		this._resolve(m);
	}
}

可以看到，这里是调用了 moduleManager.defineModule 生成异步模块。defineModule 每一步的具体逻辑如下。

第一步(define-1)，strModuleId 转为 moduleId：

...
// define-1：strModuleId -> moduleId（递增的数字），返回 3
let moduleId = this._moduleIdProvider.getModuleId(strModuleId);
...

class ModuleIdProvider {
	private _nextId: number;
	private _strModuleIdToIntModuleId: Map;
	private _intModuleIdToStrModuleId: string[];

	constructor() {
		this._nextId = 0;
		this._strModuleIdToIntModuleId = new Map();
		this._intModuleIdToStrModuleId = [];

		// 'exports', 'modules', 'require' 对应 0，1，2，其他模块从 3 开始。
		this.getModuleId('exports');
		this.getModuleId('module');
		this.getModuleId('require');
	}

	public getMaxModuleId(): number {
		return this._nextId;
	}

	// 获取模块 id（递增的数字），并保存 strModuleId 和 id 的关系。
	public getModuleId(strModuleId: string): ModuleId {
		let id = this._strModuleIdToIntModuleId.get(strModuleId);
		if (typeof id === 'undefined') {
			id = this._nextId++;
			this._strModuleIdToIntModuleId.set(strModuleId, id);
			this._intModuleIdToStrModuleId[id] = strModuleId;
		}
		return id;
	}

	public getStrModuleId(moduleId: ModuleId): string {
		return this._intModuleIdToStrModuleId[moduleId];
	}
}

可以看出，getModuleId 是生成递增的数字， 0-2 是默认的模块，用户定义的模块从 3 开始计算。

第二步(define-2)，规划化依赖，并新建模块：


...
// define-2：新建模块
let m = new Module(moduleId, strModuleId, this._normalizeDependencies(dependencies, moduleIdResolver), callback, errorback, moduleIdResolver);
...

// define-2.1：规范化依赖
// 参数：['test'], moduleIdResolver
// 返回：依赖 [{id: 4}]
export class ModuleManager {
	private _normalizeDependencies(dependencies: string[], moduleIdResolver: ModuleIdResolver): Dependency[] {
		let result: Dependency[] = [], resultLen = 0;
		for (let i = 0, len = dependencies.length; i < len; i++) {
			result[resultLen++] = this._normalizeDependency(dependencies[i], moduleIdResolver);
		}
		return result;
	}

	// 生成 dependency 对象，{id: number}
	private _normalizeDependency(dependency: string, moduleIdResolver: ModuleIdResolver): Dependency {
		// 默认依赖
		if (dependency === 'exports') {
			return RegularDependency.EXPORTS;
		}
		if (dependency === 'module') {
			return RegularDependency.MODULE;
		}
		if (dependency === 'require') {
			return RegularDependency.REQUIRE;
		}
		let bangIndex = dependency.indexOf('!');

		// 插件依赖
		if (bangIndex >= 0) {
			...
			return new PluginDependency(dependencyId, pluginId, pluginParam);
		}

		// 常规依赖
		// getModuleId（前面已知，模块 id 是递增的数字），返回 4
		return new RegularDependency(this._moduleIdProvider.getModuleId(moduleIdResolver.resolveModule(dependency)));
	}
}

// 常规依赖，包含 exports，module, require
export class RegularDependency {
	public static EXPORTS = new RegularDependency(ModuleId.EXPORTS);
	public static MODULE = new RegularDependency(ModuleId.MODULE);
	public static REQUIRE = new RegularDependency(ModuleId.REQUIRE);

	public readonly id: ModuleId;

	constructor(id: ModuleId) {
		this.id = id;
	}
}

// define-2.2：新建模块
// 参数：id: 3，strId: '===anonymous1===', dependencies: [{id: 4}], callback: f(test)，errorback: undefined，moduleIdResolver
export class Module {
	...

	constructor(
		id: ModuleId,
		strId: string,
		dependencies: Dependency[],
		callback: any,
		errorback: ((err: AnnotatedError) => void) | null | undefined,
		moduleIdResolver: ModuleIdResolver | null,
	) {
		this.id = id;
		this.strId = strId;
		this.dependencies = dependencies;
		this._callback = callback;
		this._errorback = errorback;
		this.moduleIdResolver = moduleIdResolver;
		this.exports = {};
		this.error = null;
		this.exportsPassedIn = false;
		this.unresolvedDependenciesCount = this.dependencies.length;
		this._isComplete = false;
	}
}

可以看到 require(['test'], function(test){...})，对应的模块 id 为 3。依赖项是 'test'，'test' 对应的模块 id 为 4。

第三步(define-3)，解析依赖项：

...
// define-3：立即解析依赖项，参数 m 是上一步新建的模块 3
this._resolve(m);
...

export class ModuleManager{
	private _resolve(module: Module): void {
		// 遍历依赖数组，根据不同类型进行处理
		// 'test' 模块是普通依赖，在这里执行的是 resolve-6 和 resolve-8 的逻辑
		let dependencies = module.dependencies;
		if (dependencies) {
			for (let i = 0, len = dependencies.length; i < len; i++) {
				let dependency = dependencies[i];

				// resolve-1：exports
				if (dependency === RegularDependency.EXPORTS) {
					module.exportsPassedIn = true;
					module.unresolvedDependenciesCount--;
					continue;
				}

				// resolve-2：module
				if (dependency === RegularDependency.MODULE) {
					module.unresolvedDependenciesCount--;
					continue;
				}

				// resolve-3：require
				if (dependency === RegularDependency.REQUIRE) {
					module.unresolvedDependenciesCount--;
					continue;
				}

				// resolve-4：如果已经加载，跳过
				let dependencyModule = this._modules2[dependency.id];
				if (dependencyModule && dependencyModule.isComplete()) {
					if (dependencyModule.error) {
						module.onDependencyError(dependencyModule.error);
						return;
					}
					module.unresolvedDependenciesCount--;
					continue;
				}

				// resolve-5：如果有循环引用，跳过
				if (this._hasDependencyPath(dependency.id, module.id)) {
					this._hasDependencyCycle = true;
					console.warn('There is a dependency cycle between \'' + this._moduleIdProvider.getStrModuleId(dependency.id) + '\' and \'' + this._moduleIdProvider.getStrModuleId(module.id) + '\'. The cyclic path follows:');
					let cyclePath = this._findCyclePath(dependency.id, module.id, 0) || [];
					cyclePath.reverse();
					cyclePath.push(dependency.id);
					console.warn(cyclePath.map(id => this._moduleIdProvider.getStrModuleId(id)).join(' => \n'));

					module.unresolvedDependenciesCount--;
					continue;
				}

				// resolve-6：记录反向依赖关系
				// 比如模块 3 依赖模块 4，即 this._inverseDependencies2[4] = [3]
				this._inverseDependencies2[dependency.id] = this._inverseDependencies2[dependency.id] || [];
				this._inverseDependencies2[dependency.id]!.push(module.id);

				// resolve-7：插件依赖
				if (dependency instanceof PluginDependency) {
					...

					this._loadModule(dependency.pluginId);
					continue;
				}

				// resolve-8：普通依赖
				// 参数: 4
				this._loadModule(dependency.id);
			}
		}

		// 如果依赖都已经解析，调用 _onModuleComplete
		// 这里 module.unresolvedDependenciesCount: 1，不调用 _onModuleComplete
		if (module.unresolvedDependenciesCount === 0) {
			this._onModuleComplete(module);
		}
	}
	
	// 加载模块，重点：this._scriptLoader.load、this._onLoad
	private _loadModule(moduleId: ModuleId): void {
		if (this._modules2[moduleId] || this._knownModules2[moduleId]) {
			return;
		}
		this._knownModules2[moduleId] = true;

		// loadModule-1：获取模块路径，moduleId -> strModuleId -> paths
		// 4 -> 'test' -> ['test.js']
		let strModuleId = this._moduleIdProvider.getStrModuleId(moduleId);
		let paths = this._config.moduleIdToPaths(strModuleId);
		let scopedPackageRegex = /^@[^\/]+\/[^\/]+$/ // matches @scope/package-name
		if (this._env.isNode && (strModuleId.indexOf('/') === -1 || scopedPackageRegex.test(strModuleId))) {
			paths.push('node|' + strModuleId);
		}

		let lastPathIndex = -1;
		let loadNextPath = (err: any) => {
			lastPathIndex++;

			if (lastPathIndex >= paths.length) { // lastPathIndex: 0, paths.length: 1, 走 else 的逻辑
				this._onLoadError(moduleId, err);
			} else {
				let currentPath = paths[lastPathIndex]; // "test.js"
				let recorder = this.getRecorder();		// 事件记录器，用于记录 BeginLoadingScript、EndLoadingScriptOK 等事件及其时间戳。

				if (this._config.isBuild() && currentPath === 'empty:') { // 如果满足条件，直接调用 this._onLoad，这里不满足条件，跳过
					this._buildInfoPath[moduleId] = currentPath;
					this.defineModule(this._moduleIdProvider.getStrModuleId(moduleId), [], null, null, null);
					this._onLoad(moduleId);
					return;
				}

				recorder.record(LoaderEventType.BeginLoadingScript, currentPath); // 记录事件 BeginLoadingScript
				// loadModule-2.1：调用 this._scriptLoader.load 加载模块
				this._scriptLoader.load(this, currentPath, () => {
					if (this._config.isBuild()) {
						this._buildInfoPath[moduleId] = currentPath;
					}
					recorder.record(LoaderEventType.EndLoadingScriptOK, currentPath); // 记录事件 EndLoadingScriptOK
					// loadModule-2.2：在脚本加载回调中，调用 this._onLoad
					// moduleId: 4，对应 test 模块
					this._onLoad(moduleId);
				}, (err) => {
					recorder.record(LoaderEventType.EndLoadingScriptError, currentPath);
					loadNextPath(err);
				});
			}
		};

		// loadModule-2: 调用 loadNextPath
		loadNextPath(null);
	}
}

可以看到，在第三步(define-3)解析依赖，最终通过 this._scriptLoader.load 加载 test 模块。我们继续看这部分代码：

// main.ts
// 在入口文件，新建模块管理器时，新建了脚本加载器
moduleManager = new ModuleManager(env, createScriptLoader(env), DefineFunc, RequireFunc, Utilities.getHighPerformanceTimestamp());

// scriptLoader.ts
export function createScriptLoader(env: Environment): IScriptLoader {
	return new OnlyOnceScriptLoader(env);
}

class OnlyOnceScriptLoader implements IScriptLoader {

	...

	constructor(env: Environment) {
		this._env = env;
		this._scriptLoader = null;
		this._callbackMap = {};
	}

	public load(moduleManager: IModuleManager, scriptSrc: string, callback: () => void, errorback: (err: any) => void): void {
		// load-1: 根据环境，新建脚本加载器
		if (!this._scriptLoader) {
			if (this._env.isWebWorker) {
				this._scriptLoader = new WorkerScriptLoader();
			} else if (this._env.isElectronRenderer) {
				const { preferScriptTags } = moduleManager.getConfig().getOptionsLiteral();
				if (preferScriptTags) {
					this._scriptLoader = new BrowserScriptLoader();
				} else {
					this._scriptLoader = new NodeScriptLoader(this._env);
				}
			} else if (this._env.isNode) {
				this._scriptLoader = new NodeScriptLoader(this._env);
			} else {
				// 以浏览器环境为例，新建浏览器的脚本加载器
				this._scriptLoader = new BrowserScriptLoader();
			}
		}
		let scriptCallbacks: IScriptCallbacks = {
			callback: callback,
			errorback: errorback
		};
		// load-2: 将脚本的回调函数，保存到 _callbackMap 中
		if (this._callbackMap.hasOwnProperty(scriptSrc)) {
			this._callbackMap[scriptSrc].push(scriptCallbacks);
			return;
		}
		this._callbackMap[scriptSrc] = [scriptCallbacks];
		// load-3: 加载脚本，参数 callback: () => this.triggerCallback(scriptSrc)
		this._scriptLoader.load(moduleManager, scriptSrc, () => this.triggerCallback(scriptSrc), (err: any) => this.triggerErrorback(scriptSrc, err));
	}
}

// 浏览器环境的脚本加载器
class BrowserScriptLoader implements IScriptLoader {

	public load(moduleManager: IModuleManager, scriptSrc: string, callback: () => void, errorback: (err: any) => void): void {
		if (/^node\|/.test(scriptSrc)) {
			// 'node|' 开头的，是 node 模块，用 nodeRequire 加载，直接调用 callback
			let opts = moduleManager.getConfig().getOptionsLiteral();
			let nodeRequire = ensureRecordedNodeRequire(moduleManager.getRecorder(), (opts.nodeRequire || AMDLoader.global.nodeRequire));
			let pieces = scriptSrc.split('|');

			let moduleExports = null;
			try {
				moduleExports = nodeRequire(pieces[1]);
			} catch (err) {
				errorback(err);
				return;
			}

			moduleManager.enqueueDefineAnonymousModule([], () => moduleExports);
			callback();
		} else {
			// 浏览器环境，新建  标签加载 test.js，而 test.js 中又调用 define 函数，定义了 test 模块。
// test.js
define('test', function() {
    return {
        compare: function(a, b) {
            return a > b;
        }
    }
});

下面看一下 define 函数的实现：
// main.ts
...
define = function () {
	return DefineFunc.apply(null, arguments);
};

const DefineFunc: IDefineFunc = function (id: any, dependencies: any, callback: any): void {
	// 第一步：没有传入 id，调整参数
	if (typeof id !== 'string') {
		callback = dependencies;
		dependencies = id;
		id = null;
	}
	// 第二步：没有传入 dependencies，调整参数
	// 对于 test 模块，调整后，id = 'test', callback = f (), dependencies = ['require', 'exports', 'module']
	if (typeof dependencies !== 'object' || !Array.isArray(dependencies)) {
		callback = dependencies;
		dependencies = null;
	}
	if (!dependencies) {
		dependencies = ['require', 'exports', 'module'];
	}

	// 第三步：定义模块（可以为匿名模块），最终是调用 moduleManager 中的方法
	// 对于 test 模块，调用 moduleManager.defineModule
	if (id) {
		moduleManager.defineModule(id, dependencies, callback, null, null);
	} else {
		moduleManager.enqueueDefineAnonymousModule(dependencies, callback);
	}
};


前面 require([test], f(test)) 调用 moduleManager.defineModule 生成模块 3，这里 define('test', f()) 也是调用 moduleManager.defineModule 生成 test 模块。
// moduleManager.ts
export class ModuleManager {
	// 参数：'test', ['require', 'exports', 'module'], f()
	public defineModule(strModuleId: string, dependencies: string[], callback: any, errorback: ((err: AnnotatedError) => void) | null | undefined, stack: string | null, moduleIdResolver: ModuleIdResolver = new ModuleIdResolver(strModuleId)): void {
		// define-1：strModuleId -> moduleId
		// 'test' -> 4。在模块 3 解析依赖时，'test' 模块已经生成 moduleId 4。
		let moduleId = this._moduleIdProvider.getModuleId(strModuleId);
		...

		// define-2：新建模块并保存到 this._modules2
		// 新建 test 模块
		let m = new Module(moduleId, strModuleId, this._normalizeDependencies(dependencies, moduleIdResolver), callback, errorback, moduleIdResolver);
		this._modules2[moduleId] = m;

		...

		// define-3：立即解析依赖项
		// m：对应 test 模块
		this._resolve(m);
	}
}

这里和模块 3 的生成逻辑基本一致，不同点如下：

依赖不同：模块 3 依赖于 test 模块，而 test 模块由于没有依赖项，define 函数设置了默认依赖模块 ['require', 'exports', 'module']。



解析依赖项的逻辑不同：模块 3 解析依赖 test 模块，而 test 模块解析默认模块 ['require', 'exports', 'module']。

解析默认模块的逻辑如下：
export class ModuleManager{
	// 参数：test 模块
	private _resolve(module: Module): void {
		// ['require', 'exports', 'module'] 是默认依赖模块，在这里执行的是 resolve-1、resolve-2、resolve-3 的逻辑
		let dependencies = module.dependencies;
		if (dependencies) {
			for (let i = 0, len = dependencies.length; i < len; i++) {
				let dependency = dependencies[i];

				// resolve-1：exports
				if (dependency === RegularDependency.EXPORTS) {
					module.exportsPassedIn = true;
					module.unresolvedDependenciesCount--;
					continue;
				}

				// resolve-2：module
				if (dependency === RegularDependency.MODULE) {
					module.unresolvedDependenciesCount--;
					continue;
				}

				// resolve-3：require
				if (dependency === RegularDependency.REQUIRE) {
					module.unresolvedDependenciesCount--;
					continue;
				}

				...
			}
		}

		// 前面遍历依赖数组，每次都 module.unresolvedDependenciesCount--，所以这里 module.unresolvedDependenciesCount: 0，调用 _onModuleComplete
		if (module.unresolvedDependenciesCount === 0) {
			this._onModuleComplete(module);
		}
	}

前面模块 3 解析依赖，最终调用 _loadModule(4) 加载模块 4。而这里解析依赖后，调用 _onModuleComplete 完成模块 4 的解析。具体如下：
export class ModuleManager{
	private _onModuleComplete(module: Module): void {
		let recorder = this.getRecorder(); // 事件记录器，用于记录 BeginLoadingScript、EndLoadingScriptOK 等事件及其时间戳。

		if (module.isComplete()) {
			return;
		}

		// 第一步：遍历依赖数组，['require', 'exports', 'module']，生成 dependenciesValues
		let dependencies = module.dependencies;
		let dependenciesValues: any[] = [];
		if (dependencies) {
			for (let i = 0, len = dependencies.length; i < len; i++) {
				let dependency = dependencies[i];

				// 'exports': module.exports
				if (dependency === RegularDependency.EXPORTS) {
					dependenciesValues[i] = module.exports;
					continue;
				}

				// 'module': {id: 'test', config: () => { return this._config.getConfigForModule('test') }}
				if (dependency === RegularDependency.MODULE) {
					dependenciesValues[i] = {
						id: module.strId,
						config: () => {
							return this._config.getConfigForModule(module.strId);
						}
					};
					continue;
				}

				// 'require': require 函数，包含 node 原生的 require，require.__$__nodeRequire
				if (dependency === RegularDependency.REQUIRE) {
					dependenciesValues[i] = this._createRequire(module.moduleIdResolver!);
					continue;
				}

				...
			}
		}

		// 第二步：调用模块的 complete 方法，执行模块的工厂函数
		module.complete(recorder, this._config, dependenciesValues);

		// 第三步：遍历模块的反向依赖模块，如果反向模块的依赖都已经解析完成，就对反向模块执行 _onModuleComplete
		// 模块 4 的反向依赖模块是 [3]
		let inverseDeps = this._inverseDependencies2[module.id];
		this._inverseDependencies2[module.id] = null;

		if (inverseDeps) {
			for (let i = 0, len = inverseDeps.length; i < len; i++) {
				let inverseDependencyId = inverseDeps[i];
				let inverseDependency = this._modules2[inverseDependencyId];
				// 比如模块 3 依赖于模块 4，现在模块 4 已经解析完成，所以模块 3 的未解析依赖数量 - 1
				inverseDependency.unresolvedDependenciesCount--;
				// 对模块 3 执行 _onModuleComplete
				if (inverseDependency.unresolvedDependenciesCount === 0) {
					this._onModuleComplete(inverseDependency);
				}
			}
		}

		// 第四步：解析反向插件依赖
		let inversePluginDeps = this._inversePluginDependencies2.get(module.id);
		if (inversePluginDeps) {
			this._inversePluginDependencies2.delete(module.id);

			for (let i = 0, len = inversePluginDeps.length; i < len; i++) {
				this._loadPluginDependency(module.exports, inversePluginDeps[i]);
			}
		}
	}

}

第二步，调用 module.complete 方法，完成模块 4 的解析：
// 完成模块解析
export class Module {
	public complete(recorder: ILoaderEventRecorder, config: Configuration, dependenciesValues: any[]): void {
		// 标记模块已解析完成
		this._isComplete = true;

		let producedError: any = null;
		// 调用工厂函数，设置 this.exports
		if (this._callback) {
			if (typeof this._callback === 'function') {

				recorder.record(LoaderEventType.BeginInvokeFactory, this.strId); // 记录 BeginInvokeFactory 事件
				// complete-1：调用 _invokeFactory
				let r = Module._invokeFactory(config, this.strId, this._callback, dependenciesValues);
				producedError = r.producedError;
				recorder.record(LoaderEventType.EndInvokeFactory, this.strId); // 记录 EndInvokeFactory 事件

				if (!producedError && typeof r.returnedValue !== 'undefined' && (!this.exportsPassedIn || Utilities.isEmpty(this.exports))) {
					this.exports = r.returnedValue; // 如果工厂函数有返回值，设置 this.exports = r.returnedValue
				}

			} else {
				this.exports = this._callback; // 如果没有工厂函数，设置 this.exports = this._callback
			}
		}

		// 错误处理和重置
		...
	}

	private static _invokeFactory(config: Configuration, strModuleId: string, callback: Function, dependenciesValues: any[]): { returnedValue: any; producedError: any; } {
		if (config.isBuild() && !Utilities.isAnonymousModule(strModuleId)) {
			return {
				returnedValue: null,
				producedError: null
			};
		}

		if (config.shouldCatchError()) {
			return this._safeInvokeFunction(callback, dependenciesValues); // 和 complete-2 类似，只是增加了 try-catch
		}

		// complete-2: 调用 callback，并将结果返回。
		// 对于模块 4，是调用 define('test', f()) 中的函数，并返回 compare: function(a, b)
		return {
			returnedValue: callback.apply(global, dependenciesValues),
			producedError: null
		};
	}

}

第二步解析完模块 4，调用 define('test', f()) 中的函数，返回函数执行结果 compare: function(a, b)，并赋值给模块 4 的 exports。
第三步，由于模块 4 已经完成解析，模块 3 也可以完成解析（模块 3 只依赖模块 4），所以也对模块 3 执行 _onModuleComplete。
export class ModuleManager{
	private _onModuleComplete(module: Module): void {
		let recorder = this.getRecorder(); // 事件记录器，用于记录 BeginLoadingScript、EndLoadingScriptOK 等事件及其时间戳。

		if (module.isComplete()) {
			return;
		}

		// 第一步：遍历依赖数组，[{id: 4}]，生成 dependenciesValues: [{ compare: ƒ (a, b) }]
		let dependencies = module.dependencies;
		let dependenciesValues: any[] = [];
		if (dependencies) {
			for (let i = 0, len = dependencies.length; i < len; i++) {
				let dependency = dependencies[i];
				...

				let dependencyModule = this._modules2[dependency.id];
				if (dependencyModule) {
					// 保存模块 4 的 exports，即 test 模块的工厂函数返回值：compare: function(a, b)
					dependenciesValues[i] = dependencyModule.exports;
					continue;
				}

				dependenciesValues[i] = null;
			}
		}

		// 第二步：调用模块的 complete 方法，执行模块的工厂函数
		module.complete(recorder, this._config, dependenciesValues);

		// 模块 3 没有反向依赖，第三步、第四步略
		...
	}

}

export class Module {
	public complete(recorder: ILoaderEventRecorder, config: Configuration, dependenciesValues: any[]): void {
		...

		// 调用 _invokeFactory，dependenciesValues 对应 test 模块的返回值
		let r = Module._invokeFactory(config, this.strId, this._callback, dependenciesValues);

		...

		// 模块 3 的工厂函数没有返回值，不设置
		if (!producedError && typeof r.returnedValue !== 'undefined' && (!this.exportsPassedIn || Utilities.isEmpty(this.exports))) {
			this.exports = r.returnedValue;
		}

		...
	}

	private static _invokeFactory(config: Configuration, strModuleId: string, callback: Function, dependenciesValues: any[]): { returnedValue: any; producedError: any; } {
		...

		// 对于模块 3，是调用 require(['test'], f(test)) 中的函数，传入参数 dependenciesValues 是 test 模块的返回值
		// 返回 {returnValue: null, producedError: null}
		return {
			returnedValue: callback.apply(global, dependenciesValues),
			producedError: null
		};
	}

}

可以看到，_onModuleComplete 执行了模块 3 的工厂函数，至此所有模块加载完成，模块的工厂函数也都执行完毕。
总结
本文以浏览器环境为例，分析了 vscode-loader 的模块加载：

在 vscode-loader 中，require 或 define 函数，一般会调用 moduleManager.defineModule 定义异步模块。
在 defineModule 中，通过 new Module() 生成异步模块，通过 this._resolve(m) 解析模块。
在 _resolve 中，

如果模块依赖于其他模块，会通过 _loadModule 加载依赖模块。

在 _loadModule 中，会调用 this._scriptLoader.load 加载模块。对于浏览器环境，就是生成

入口 js：调用 requirejs 方法，加载模块。

// a/b.js

// 配置模块路径
require.config({
    paths: {
        test: 'test'
    }
});

// 加载模块
requirejs(['test'], function(test) {
    test.compare(2, 5)
});

定义模块：

// test.js

define('test', function() {
    return {
        compare: function(a, b) {
            return a > b;
        }
    }
});

define 方法：define(id?, dependencies?, factory);，第一个参数是模块名，第二个参数是依赖，第三个参数是模块的工厂函数，返回定义的模块。

requirejs 的代码解析

requirejs 的主体是一个自执行函数。下面代码省略了许多细节，先看一下基本的结构。

var requirejs, require, define;
(function (global, setTimeout) {
    // 定义一系列的变量和函数，最主要是 newContext、req、define
    function newContext(contextName) {}
    req = requirejs = function (deps, callback, errback, optional) {}
    define = function (name, deps, callback) {}
	
    // 第一步：创建默认上下文
    req({});

    // 第二步：浏览器环境，查找入口 js，放到配置中
    if (isBrowser && !cfg.skipDataMain) {
        ...

        cfg.deps = cfg.deps ? cfg.deps.concat(mainScript) : [mainScript];

        ...
    }

    // 第三步：根据配置，加载入口 js
    req(cfg);
    
}(this, (typeof setTimeout === 'undefined' ? undefined : setTimeout)));

可以看到，requirejs 可以分为三步：创建默认上下文、查找入口 js、加载入口 js。

第一步和第三步都是调用 req 函数，涉及代码较多。我们先看看相对简单的第二步，查找入口 js 的具体实现。

查找入口 js

从前面的示例，我们知道，入口 js 在 script 标签的 data-main 属性中指定。所以查找入口 js，也就是先找到 data-main，再进行解析。具体如下：


    if (isBrowser && !cfg.skipDataMain) {
        // 第一步：遍历 script 标签
        // 注：eachReverse，对 scripts 数组，遍历执行传入的函数，函数返回值为 true 时中止遍历
        eachReverse(scripts(), function (script) {
            // 第二步：保存 script 标签的父元素
            if (!head) {
                head = script.parentNode;
            }

            // 第三步：获取 data-main 属性
            dataMain = script.getAttribute('data-main');

            // 第四步：解析 data-main，获取入口 js，放到配置中
            if (dataMain) {
                // 略，在下面展开讨论
                ...
            }
        });
    }

    // 相关函数如下：
    /**
     * 遍历数组，执行函数，函数返回 true 时，break
     */
    function eachReverse(ary, func) {
        if (ary) {
            var i;
            for (i = ary.length - 1; i > -1; i -= 1) {
                if (ary[i] && func(ary[i], i, ary)) {
                    break;
                }
            }
        }
    }

    function scripts() {
        return document.getElementsByTagName('script');
    }

解析 data-main 的具体逻辑如下：


if (dataMain) {
    mainScript = dataMain;

    // 第一步：如果没有 baseUrl，则解析获取 baseUrl
    // 注：mainScript.indexOf('!') === -1，该判断是指 data-main 值不是加载器插件模块的 ID。
    if (!cfg.baseUrl && mainScript.indexOf('!') === -1) {

        // 1. data-main 解析为 mainScript 和 subPath
        /**
         * 例子：
         * dataMain = 'a', 解析出 mainScirpt = 'a', subPath = './'
         * dataMain = 'a/b', 解析出 mainScript = 'b', subpath = 'a/'
         */
        src = mainScript.split('/');
        mainScript = src.pop();
        subPath = src.length ? src.join('/')  + '/' : './';

        // 2. 设置 cfg 的 baseUrl
        cfg.baseUrl = subPath;
    }


    // 第二步：mainScript 去掉结尾的 .js
    mainScript = mainScript.replace(jsSuffixRegExp, '');

    // 第三步：如果 mainScript 仍然是路径，则回退到 dataMain
    if (req.jsExtRegExp.test(mainScript)) {
        mainScript = dataMain;
    }

    // 第四步：将 data-main 脚本放入 cfg.deps 中，等待后续加载
    cfg.deps = cfg.deps ? cfg.deps.concat(mainScript) : [mainScript];
    
    return true;
}

经过解析，得到配置对象 cfg。比如对于 data-main="./a/b.js"，得到的 cfg 如下：

cfg = {
    baseUrl: './a/',
    deps: ['b'],
}

req 加载入口 js

配置好入口文件后，下一步就是调用 req 函数，加载入口 js。第一步操作，创建默认上下文也是调用 req 函数，我们放在一起看。

defContextName = '_'

req = requirejs = function (deps, callback, errback, optional) {

    // 第一步：contextName 设置为默认值
    var context, config,
        contextName = defContextName;

    // 第二步：确定第一个参数，是否为 config 对象。如果是，重新修改其他参数。
    if (!isArray(deps) && typeof deps !== 'string') {
        // deps is a config object
        config = deps;
        if (isArray(callback)) {
            // Adjust args if there are dependencies
            deps = callback;
            callback = errback;
            errback = optional;
        } else {
            deps = [];
        }
    }

    // 第三步：根据 config 对象，更新 contextName
    if (config && config.context) {
        contextName = config.context;
    }

    // 第四步：根据 contextName 获取或新建上下文
    context = getOwn(contexts, contextName);
    if (!context) {
        context = contexts[contextName] = req.s.newContext(contextName);
    }

    // 第五步：如果有 config 对象，就更新上下文的配置
    if (config) {
        context.configure(config);
    }

    // 第六步：调用上下文的 require 方法
    return context.require(deps, callback, errback);
};

s = req.s = {
    contexts: contexts,
    newContext: newContext
};

可以看到 req 函数就是 requirejs 函数。它有两种调用方式，一种是不传入 config 对象，一种是传入。

不传入 config 对象：
- 直接使用默认上下文（获取或新建默认上下文），调用默认上下文的 require 方法。
传入 config 对象：
- 根据 config 更新 contextName，根据 contextName 获取或新建上下文（注意：如果它没有更新，也还是默认上下文）。
- 用 config 更新上下文的配置，再调用上下文的 require 方法。

req 执行过程

req({})，传了一个没有属性的对象进去，创建了默认上下文。
req(cfg)，还是以前面 data-main="./a/b.js" 为例，传入参数为 { baseUrl: './a/', deps: ['b'] }，加载了入口文件。
req 前三步的执行逻辑如下：

req = requirejs = function (deps, callback, errback, optional) {

    // 第一步：contextName = '_'
    var context, config,
        contextName = defContextName;

    // 第二步：
    // req({})，第一个参数是 {}，结果： config = {}, deps = []。
    // req(cfg)，第一个参数是 { baseUrl: './a/', deps: ['b'] }，结果：config = { baseUrl: './a/', deps: ['b'] }, deps = []
    if (!isArray(deps) && typeof deps !== 'string') {
        // config = 第一个参数
        config = deps;
        // 未传入第二个参数，deps = []
        if (isArray(callback)) {
            deps = callback;
            callback = errback;
            errback = optional;
        } else {
            deps = [];
        }
    }

    // 第三步：
    // req({})，config 为 {}，所以 contextName 依然为默认值 '_'
    // req(cfg)，config 为 { baseUrl: './a/', deps: ['b'] }, 所以 contextName 依然为默认值 '_'
    if (config && config.context) {
        contextName = config.context;
    }

    ...
};

我们继续看 req 函数的第四步。
req({})，一开始还没有默认上下文，所以会新建默认上下文。
req(cfg) 的 contextName 也是默认值 '_'，而默认上下文已经新建，所以会直接获取默认上下文。

    // req 函数的第四步：
    // req({})，contextName 为默认值 '_'，一开始没有默认上下文，所以走 req-4.2，新建默认上下文。
    // req(cfg)，contextName 为默认值 '_'，已经有默认上下文，所以走 req-4.1，获取默认上下文。
    req = requirejs = function (deps, callback, errback, optional) {
        ...
        // req-4.1. 根据 contextName 获取 context。
        context = getOwn(contexts, contextName);
        // req-4.2. 如果没有 context，根据 contextName 新建一个上下文。
        if (!context) {
            context = contexts[contextName] = req.s.newContext(contextName);
        }
        ...
    }

    /* req-4.1 获取上下文 */
    // getOwn 的第一个参数 contexts，初始化时是 {}
    contexts = {},

    // getOwn：判断对象中，是否有某个属性，如果有就返回属性值
    function getOwn(obj, prop) {
        return hasProp(obj, prop) && obj[prop];
    }
    
    // hasProp：判断对象中，是否有某个属性
    function hasProp(obj, prop) {
        return hasOwn.call(obj, prop);
    }

    // hasOwn
    op = Object.prototype,
    hasOwn = op.hasOwnProperty,

继续看 req-4.2 新建上下文的逻辑，由于代码量大，这里进行省略简化。

    /* req-4.2 新建上下文 */
    function newContext(contextName) {
        // 定义一堆变量和函数，这里只看 context
        var context
        ...

        // req-4.2.1：context 赋值
        context = {
            config: config,
            contextName: contextName,
            ...
            // 为上下文设置配置
            configure: function (cfg) {
                // 确保 baseUrl 以 / 结束
                if (cfg.baseUrl) {
                    if (cfg.baseUrl.charAt(cfg.baseUrl.length - 1) !== '/') {
                        cfg.baseUrl += '/';
                    }
                }
                ...
                // configure 的最后一步：如果指定了 deps 或 callback，则使用这些参数调用 require。
                if (cfg.deps || cfg.callback) {
                    context.require(cfg.deps || [], cfg.callback);
                }
            },
            // 加载模块
            makeRequire: function (relMap, options) { ... },
            ...
        }

        // req-4.2.2：设置 context.require，并返回 context
        context.require = context.makeRequire();
        return context;
    }

可以看到新建上下文，主要是对 context 进行赋值，定义一系列的属性和方法，并返回 context。

回到 req 函数，第五步是设置 config，如果指定了 deps，则调用 require 加载模块。

第六步是返回 context.require，加载模块。

req = requirejs = function (deps, callback, errback, optional) {
    ...

    // 第五步：调用 context.configure 更新配置
    /**
     * req({})，config 为 {}，结果：context.config = {config: baseUrl: "./", bundles: {}, config: {}, paths: {}, pkgs: {}, shim: {}, waitSeconds: 7}
     * req(cfg)，config 为 { baseUrl: './a/', deps: ['b'] }，结果：context.config = {config: baseUrl: "./a/", deps: ["b"], bundles: {}, config: {}, paths: {}, pkgs: {}, shim: {}, waitSeconds: 7}, 由于 cfg.deps 为 ['b']，在 configure 的最后一步会调用 context.require(cfg.deps)，加载入口 js
     */
    if (config) {
        context.configure(config);
    }

    // 第六步：context.require，从第二步可知，deps 均为 []，所以这里没有依赖模块加载。
    return context.require(deps, callback, errback);
};

加载模块

梳理完 req 函数的执行过程，可以看到，req(cfg) 在第五步会通过 context.require(cfg.deps)，加载入口 js，其中 cfg.deps 为 ['b']。

接下来，就继续查看加载模块的实现逻辑。在前面(req-4.2.2)，可以看到 context.require = context.makeRequire()。

context = {
    ...
    makeRequire: function (relMap, options) {
        options = options || {};

        // 第一步：定义 localRequire（require 的实现）
        function localRequire(deps, callback, errback) {
            var id, map, requireMod;

            if (options.enableBuildCallback && callback && isFunction(callback)) {
                callback.__requireJsBuild = true;
            }

            // require-1. 如果 deps 是字符串类型，根据模块名称获取模块id ,再返回 defined[id]
            if (typeof deps === 'string') {
                ...
                return defined[id];
            }

            // require-2. 抓取全局队列中等待的 defines
            intakeDefines();

            // require-3. 在 nextTick 中，加载所有依赖
            context.nextTick(function () {
                intakeDefines();

                // 获取模块加载器（重点）
                requireMod = getModule(makeModuleMap(null, relMap));

                requireMod.skipMap = options.skipMap;

                // 初始化模块（重点）
                requireMod.init(deps, callback, errback, {
                    enabled: true
                });

                checkLoaded();
            });

            return localRequire;
        }

        // 第二步：localReuire 增加 isBrowser, toUrl, defined, specified 四个方法
        mixin(localRequire, {
            isBrowser: isBrowser,
            toUrl: function (moduleNamePlusExt) { ... }, // module name + .extension 转为 url 路径
            defined: function (id) { ... },
            specified: function (id) { ... }
        });

        // 第三步：localRequire 增加 undef 方法，注意：只允许在顶级 require 调用 undef
        if (!relMap) {
            localRequire.undef = function (id) {
                ...
            };
        }

        // 第四步：返回 localRequire
        return localRequire;
    }
}

context.require = context.makeRequire()

context.makeRequire() 返回的是 localRequire，而 localRequire 使用 context.nextTick，在未来的事件循环中加载依赖。

nextTick 的实现如下：

context = {
    nextTick: req.nextTick,
};
/**
 * 在当前任务结束之后执行某些操作，具体来说是通过 setTimeout 将操作放到事件循环的消息队列中，排队等待执行。
 * 其他环境下，如果有比 setTimeout 更好的解决方案，就会改写该方法。
 * 注：延时 4ms，是因为 setTimeout 的最小延时时间为 4ms。
*/
req.nextTick = typeof setTimeout !== 'undefined' ? function (fn) {
    setTimeout(fn, 4);
} : function (fn) { fn(); };

继续看，nextTick 中加载模块的逻辑：

context.nextTick(function () {
    ...
    // module-1. 获取模块加载器
    requireMod = getModule(makeModuleMap(null, relMap));
    
    // module-2. 初始化模块（重点）
    requireMod.init(deps, callback, errback, {
        enabled: true
    });
    ...
});

// module-1. 获取或新建模块加载器：new context.Module(depMap)
function getModule(depMap) {
    var id = depMap.id,
        mod = getOwn(registry, id);

    if (!mod) {
        // 新建一个模块加载器
        mod = registry[id] = new context.Module(depMap);
    }

    return mod;
}

// 模块加载器：包含属性和原型方法
Module = function (map) {
    this.map = map;
    ...
};
Module.prototype = {
    ...
};
context = {
    ...
    Module: Module
}

这里通过 getModule 返回 Module 的实例，Module 包含模块相关的属性和方法。

接下来，调用 Module 的 init 方法初始化模块：

// module-2. 初始化模块
Module.prototype = {
    init: function (depMaps, factory, errback, options) {
        ...

        // 如果未启动，就启动该模块。如果已启动，检查并启动其依赖项。
        if (options.enabled || this.enabled) {
            this.enable();
        } else {
            this.check();
        }
    },
    enable: function () {
        ... 
        // module-2.1. 遍历启动依赖
        each(this.depMaps, bind(this, function (depMap, i) {
            ...
            if (!hasProp(handlers, id) && mod && !mod.enabled) {
                // 调用 context.enable 启动
                context.enable(depMap, this);
            }
        }));

        // module-2.2. 加载当前模块
        this.check();
    }
}

context = {
    ...
    enable: function (depMap) {
        // 如果模块仍在注册表中等待启动，则启动该模块。
        var mod = getOwn(registry, depMap.id);
        if (mod) {
            // 递归加载依赖项，getModule，并 enable
            getModule(depMap).enable();
        }
    },
}

module-2.1 的执行流程：this.init() -> this.enale() -> context.enable(depMap, this) -> getModule(depMap).enable() -> ...
在当前模块执行 enable() 时，遍历启动依赖模块；依赖模块执行 enable() 时，又会遍历启动它里面的依赖。就这样，通过递归，启动所有依赖模块。

继续看 module-2.2 this.check() 加载当前模块。

Module.prototype = {
    check: function () {
        ...

        if (!this.inited) {
            // 调用 this.fetch
            if (!hasProp(context.defQueueMap, id)) {
                this.fetch();
            }
        }
        ...
    },
    fetch: function () {
        ...
        // 调用 this.load。this.callPlugin 是加载插件的，最终也会调用 this.load()。
        return map.prefix ? this.callPlugin() : this.load();
    },
    load: function () {
        var url = this.map.url;

        if (!urlFetched[url]) {
            urlFetched[url] = true;
            // 调用 context.load
            context.load(this.map.id, url);
        }
    }
}

context = {
    ...
    // 执行 req.load
    load: function (id, url) {
        req.load(context, id, url);
    }
}

req.load = function (context, moduleName, url) {
    var config = (context && context.config) || {},
        node;
    if (isBrowser) {
        // 浏览器环境，新建 script 标签
        node = req.createNode(config, moduleName, url);

        // 记录上下文名和模块名
        node.setAttribute('data-requirecontext', context.contextName);
        node.setAttribute('data-requiremodule', moduleName);

        // 监听事件
        if (node.attachEvent &&
                !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) &&
                !isOpera) {
            // 兼容 IE
            useInteractive = true;

            node.attachEvent('onreadystatechange', context.onScriptLoad);
        } else {
            node.addEventListener('load', context.onScriptLoad, false);
            node.addEventListener('error', context.onScriptError, false);
        }
        // 设置 src
        node.src = url;

        if (config.onNodeCreated) {
            config.onNodeCreated(node, config, moduleName, url);
        }

        // 插入 scirpt 标签
        currentlyAddingScript = node;
        if (baseElement) {
            head.insertBefore(node, baseElement);
        } else {
            head.appendChild(node);
        }
        currentlyAddingScript = null;

        return node;
    } else if (isWebWorker) {
        ...
    }
};

// 新建 script 节点
req.createNode = function (config, moduleName, url) {
    var node = config.xhtml ?
            document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
            document.createElement('script');
    node.type = config.scriptType || 'text/javascript';
    node.charset = 'utf-8';
    node.async = true;
    return node;
};

module-2.2 加载模块的执行流程：this.check() -> this.fetch() -> this.load() -> context.load() -> req.load() -> req.createNode()。
可以看到，在浏览器环境，是通过插入

vivo 快应用官方博客

快应用开发工具 6.6 版本发布

v6.6.0 更新说明

修正

修复使用 less 混入显示问题

修复打包体积变大问题

快应用开发工具 6.5 版本发布

v6.5.0 更新说明

优化更新

动态清理项目 dist 目录下旧版 rpk

更新 IDE 内置的调试器和引擎

修正

修复编译时 less 报错问题

修复 SMART 模式下打包异常问题

修复 lottie 组件问题

修复部分场景下，缺少文件导入提示的问题

如何在快应用开发中使用 Tailwind CSS 提升开发效率？

Tailwind CSS 可为快应用开发带来哪些好处？

如何在项目中使用 Tailwind CSS？

安装 Tailwind CSS 依赖

配置您的模板路径

将 Tailwind 指令添加到您的 CSS 中

启动 Tailwind CLI 构建过程

开始在 UX 中使用 Tailwind CSS

如何基于 Tailwind CSS 提升开发效率？

安装 Tailwind CSS IntelliSense 扩展

参考基于 Tailwind CSS 组件的开源库

常见问题及说明

不能在 script 标签中，引入输出 CSS 文件么**？

为何在 tailwind.config.js 禁用如此多样式？

为何要在 input.css 中移除 @tailwind base; ？

为什么要在配置中通过 theme 自定义长度单位？

其他暂未解决问题

快应用开发工具 6.4 版本发布

v6.4.0 更新说明

优化更新

卡片工程增加分类

rpk 名称中增加环境变量的信息

修正

修复 git 插件失效问题

修复 qaui 预览显示问题

修复设置 SMART 后，出现白屏的问题

修复 Network 面板无法展示的问题

修复新建工程版本不对应的问题

vivo 发布快应用「小说」组件

快应用小说开发现状

1、完成多个组件组合装配

2、完成小说数据处理

3、完成大屏适配

4、完成广告开发

5、阅读体验选择少

6、开发成本高

小说组件方案

1、全功能概览、左右阅读、上下阅读

2、文字动态大小和背景、行间距、广告容器

3、大屏阅读文字适配

4、优化功能

小说组件特点

1、高效、快捷

2、兼容原有小说方案

文档、源码、sample 体验

技术支持

今日美句：canvas开发相关方法及流程

一、首页日历

1.左右切换

2.日历卡片

2-1. 图片

2-1-1. 居中

2-1-2. 明暗

2-2. 日历

2-2-1. 日历数据

2-2-2. 绘制阴历

2-2-3. 绘制阳历

2-2-4. 每日金句

2-2-5. 开始绘制

二、卡片分享

1. 分享内容

1-1. 金句模板 (日历形式)

1-1-1. 固定卡片宽度

1-1-2. 计算卡片高度

不能在 `script` 标签中，引入输出 CSS 文件么**？

为何在 `tailwind.config.js` 禁用如此多样式？

为何要在 `input.css` 中移除 `@tailwind base;` ？

为什么要在配置中通过 `theme` 自定义长度单位？