{"id":25276050,"url":"https://github.com/afine970/study_ast","last_synced_at":"2025-04-06T10:18:34.903Z","repository":{"id":162797844,"uuid":"382029839","full_name":"AFine970/study_ast","owner":"AFine970","description":"Ast  Study Note","archived":false,"fork":false,"pushed_at":"2021-07-07T03:19:32.000Z","size":45,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T15:48:38.600Z","etag":null,"topics":["ast"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AFine970.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-01T12:43:56.000Z","updated_at":"2023-10-23T09:39:09.000Z","dependencies_parsed_at":"2023-05-19T03:15:18.787Z","dependency_job_id":null,"html_url":"https://github.com/AFine970/study_ast","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFine970%2Fstudy_ast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFine970%2Fstudy_ast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFine970%2Fstudy_ast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFine970%2Fstudy_ast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AFine970","download_url":"https://codeload.github.com/AFine970/study_ast/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464218,"owners_count":20942970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ast"],"created_at":"2025-02-12T15:37:18.780Z","updated_at":"2025-04-06T10:18:34.895Z","avatar_url":"https://github.com/AFine970.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 学习笔记\n\n## 快速开始\n\n```bash\nnpm install\n```\n\n```bash\nnpm run serve\n```\n\n## 什么是 AST？\n\n- AST 是 Abstract Syntax Tree 的首字母的缩写，中文名称为：抽象语法树\n- 抽象语法树本质上就是一个 JS 对象，以字符串的视角，将 Html 标签 解析为 JS 对象\n- 渲染函数（h 函数），既是 AST 的产物，也是 vnode 的起源\n\n```JavaScript\nh('div', { attrs: { className: 'box' } }, [\n    h('ul', {}, [\n        h('li', {}, '1'),\n        h('li', {}, '2'),\n        h('li', {}, '3')\n    ])\n])\n```\n\n## 抽象语法树和虚拟节点的关系\n\n![抽象语法树和虚拟节点的关系.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e6cc81a583e4cea9f9fbdcaa3601643~tplv-k3u1fbpfcp-watermark.image)\n\n## 工作机理\n\n```html\n\u003cdiv\u003e\n  \u003ch3 class=\"box\" title=\"标题\" data-type=\"3\"\u003e你好\u003c/h3\u003e\n  \u003cul\u003e\n    \u003cli\u003eA\u003c/li\u003e\n    \u003cli\u003eB\u003c/li\u003e\n    \u003cli\u003eC\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n转换为以下 AST 树\n\n```javaScript\n{\n    tag: \"div\",\n    attrs: [],\n    children: [\n        {\n            tag: \"h3\",\n            attrs: [\n                { name: \"name\", value: \"box\" },\n                { name: \"title\", value: \"标题\" },\n                { name: \"data-type\", value: \"3\" }\n            ],\n            children: [\n                {\n                    text: \"你好\",\n                    type: \"3\"\n                }\n            ]\n        },\n        {\n            tag: \"ul\",\n            attrs: [],\n            children: [\n                { tag: 'li', children: [{ text: \"A\", type: \"3\" }], attrs: [] },\n                { tag: 'li', children: [{ text: \"B\", type: \"3\" }], attrs: [] },\n                { tag: 'li', children: [{ text: \"C\", type: \"3\" }], attrs: [] }\n            ]\n        }\n}\n```\n\n## 必备的算法储备\n\n### 递归\n\n- 使用的场景技巧：规则复现\n- 递归案例一\n\n```javaScript\n斐波那契数列，求前N项的和\n\n1 1 2 3 5 8 13 21 34 55\n```\n\n- 递归案例二\n\n```javaScript\n\n将高维数组 [1, 2, [3, [4, 5], 6], 7, [8], 9] 转换为一下这个对象（老师在讲解过程中搞错了，以下这个是PPT一开始的图）\n{\n    children: [\n        { value: 1 },\n        { value: 2 },\n        {\n            children: [\n                { value: 3 },\n                {\n                    children: [\n                        { value: 4 },\n                        { value: 5 }\n                    ]\n                },\n                { value: 6 }\n            ]\n        },\n        { value: 7 },\n        {\n            children: [\n                { value: 8 }\n            ]\n        },\n        { value: 9 }\n    ]\n}\n```\n\n### 栈\n\n- 使用的场景技巧：词法分析、模板字符串\n- 案例\n\n```javaScript\n// smartRepeat智能重复字符串问题\n将 '3[abc]' 变为 'abcabcabc'\n将 '3[2[a]2[b]]' 变成 'aabbaabbaabb'\n将 '2[1[a]3[b]2[3[c]4[d]]]' 变成 'abbbcccddddcccddddabbbcccddddcccdddd'\n```\n\n解题思路：遍历每一个字符\n\n- 创建两个栈\n- 如果这个字符是数字，那么就把数字压入 **栈1**，把空字符串压入 **栈2**\n- 如果这个字符是字母，那么此时就把 **栈2** 的栈顶这项改为这个字母\n- 如果这个字符是 `]` ，那么就将数字从 **栈1** 弹栈，就把 **栈2** 的栈顶的元素重复 **栈1** 弹出数字的次数，**栈2** 弹栈，拼接到 **栈2** 的新的栈顶\n\n## 项目结构\n\n```txt\n|-- study-ast\n    |-- .gitignore\n    |-- package-lock.json\n    |-- package.json\n    |-- readme.md\n    |-- webpack.config.js\n    |-- page\n    |   |-- index.html\n    |-- src\n        |-- index.js // 入口\n        |-- parse.js // 主干功能：将模板字符串转换为AST树形结构\n        |-- parseAttribute.js // 解析html标签中的attributes属性\n        |-- examples // 算法储备案例\n            |-- max_count.js // 连续重复最多次的字符\n            |-- recursion_one.js // 递归案例一：斐波那契数列\n            |-- recursion_two.js // 递归案例二\n            |-- stack.js // 栈，smartRepeat智能重复字符串问题\n```\n\n## 总结\n\n- 在写主函数 `parse.js` 的时候，使用到算法就是栈，利用到了算法储备中栈的思路\n- 栈的思维在对模板字符串进行解析的时候很有用，能对嵌套 HTML 进行快速的解析\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafine970%2Fstudy_ast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafine970%2Fstudy_ast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafine970%2Fstudy_ast/lists"}