ember/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改文章内容

Browse Source
This commit is contained in:
ember 2025-04-17 02:48:46 +08:00
parent f3bc298997
commit df2510dd0e
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
content/post/奇技淫巧/markdown渲染框架.md
View File

@ -126,7 +126,9 @@ const createCourseCardPlaceholder = (tagString) => {
return null; return null;
} }
// 提取 ID (处理带引号和不带引号的情况) // 提取 ID (处理带引号和不带引号的情况。支持<CourseCard id="1" /> 和 <CourseCard id=1 /> 两种写法)
// 由于Attachment标签是服务器生成的，不会被用户修改，所以一定带引号
// CourseCard标签是用户手动插入的，可能被用户修改
const idWithQuotes = tagString.match(/id="([^"]*)"/); const idWithQuotes = tagString.match(/id="([^"]*)"/);
const idWithoutQuotes = tagString.match(/id=([^\s^\/^>]*)/); const idWithoutQuotes = tagString.match(/id=([^\s^\/^>]*)/);
const id = idWithQuotes ? idWithQuotes[1] : (idWithoutQuotes ? idWithoutQuotes[1] : null); const id = idWithQuotes ? idWithQuotes[1] : (idWithoutQuotes ? idWithoutQuotes[1] : null);
@ -254,7 +256,7 @@ md.renderer.rules.text = (tokens, idx, options, env, self) => {
1. **查找:** 使用 `this.$refs.articleContent.querySelectorAll('.attachment-wrapper / .course-card-wrapper')` 获取所有占位符元素。 1. **查找:** 使用 `this.$refs.articleContent.querySelectorAll('.attachment-wrapper / .course-card-wrapper')` 获取所有占位符元素。
2. **遍历:** 循环处理每一个找到的占位符 `wrapper`。 2. **遍历:** 循环处理每一个找到的占位符 `wrapper`。
3. **提取 Props:** 从 `wrapper.dataset` 中读取之前存入的 `data-*` 属性值。 3. **提取 Props:** 从 `wrapper.dataset` 中读取之前存入的 `data-*` 属性值。
4. **创建 VNode:** 用 `h(Attachment/CourseCard, { prop1: value1, ... })` 创建组件的虚拟节点，将提取的值作为 `props` 传入。注意这里要进行必要的类型转换（如 `parseInt` 变成 `coin`，`locked` 变成布尔值）。 4. **创建 VNode:** 用 `h(Attachment/CourseCard, { prop1: value1, ... })` 创建组件的虚拟节点，将提取的值作为 `props` 传入。注意这里要进行必要的类型转换（比如给 `coin` 和 `locked` 进行 `parseInt` 和 `Boolean` 转换等）。
5. **渲染组件:** 我们创建一个临时 `div` 容器 (`container`)，调用 `render(vnode, container)` 将 VNode 渲染到这个临时容器中。此时 `container.firstChild` 就是真实渲染好的组件根 DOM 元素。 5. **渲染组件:** 我们创建一个临时 `div` 容器 (`container`)，调用 `render(vnode, container)` 将 VNode 渲染到这个临时容器中。此时 `container.firstChild` 就是真实渲染好的组件根 DOM 元素。
6. **替换 DOM:** 最后用HTML原生方法 `wrapper.parentNode.replaceChild(container.firstChild, wrapper)` 将 DOM 中的占位符 `wrapper` 替换为渲染好的组件 `container.firstChild`。 6. **替换 DOM:** 最后用HTML原生方法 `wrapper.parentNode.replaceChild(container.firstChild, wrapper)` 将 DOM 中的占位符 `wrapper` 替换为渲染好的组件 `container.firstChild`。
```js ```js