前端数据结构与算法&答疑｜ 青训营笔记

卓怀芋
91 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

一、本堂课重点内容：

  • 本堂课的知识要点有哪些？
  1. 前端数据结构与算法

二、详细知识点介绍：

  • 本堂课介绍了哪些知识点？
  • 开发的二八定律 image.png

递归：遍历所有目录

  • 案例：nodejs遍历所有目录
  • DFS 伪代码
function scan(path){
    allfiles=[]
    function readDir(p){
        files.forEach((f)=>{
            if isDir readDir(fullp)
            else allfiles.push(fullp)
            });
         }
     readDir(actual path)
     return allfiles
 }
  • 应用：页面侧边栏、文件树的生成等，是业务的基础思想

栈：AST解析器

  • 案例：AST抽象语法树，解析器
  • 重要步骤：tokenize 词法分析/分词 和 parse 语法分析
  • tokenize：对代码字符逐个扫描，根据一定语法规则进行分组。代码 -> token数组
  • parse语法分析：token -> 对象树AST
    • 逐个构造identifier，解析函数表达式，生成相应节点
    • 构造一个栈，每次处理栈顶元素

image.png

image.png

拓扑排序：bundler循环依赖检测

  • 案例：模块打包器bundler

  • bundler是前端工程化的核心（webpack、rollup、esbuild、turbopack etc.），很复杂，串联工具链

  • 原理：依赖图建立、循环依赖分析

    • 首先通过AST解析其从入口开始分析模块的依赖关系（分析import节点，找到引用模块），接着递归寻找，最后打包文件。
    • 但过程中如果发现循环依赖，如何识别&定位？抽象为有向图是否成环问题

  • 成环问题解决：对整张图后续遍历（拓扑排序）

  • 简易bundler：github.com/sanyuan0704…

  • 拓扑排序的其他应用：monorepo构建顺序

LRU： 缓存淘汰处理

  • 案例：缓存淘汰处理
  • vue：keep-alive，webpack：loader
  • 实现：阈值/LRU

image.png

最小编辑距离： 相似命令提示

  • 案例：相似命令提示
  • 输错之后和命令库进行比对，利用最小编辑距离进行比对来推测正确命令

image.png

三、实践练习例子：

  • 有什么实践举例帮助理解知识点？
  • 拓扑排序的回溯

四、课后个人总结：

  • 本章有什么知识点不容易掌握？ 拓扑排序的回溯
  • 什么地方容易与其他内容混淆？ AST解析器
  • 我们需要长久的积累，加深对DS的理解

五、前端课程答疑中学到的技巧：

  • html5的语义化很重要，便于搜索引擎的爬取
  • 尽量避免有副作用的js代码
  • 善于利用IDE全局搜索的功能，看源码先找到功能点，再看实现细节
  • webpack掌握常见的loader，当作八股文准备
  • 能写东西之后要主动接触工业化代码，了解更深更实际的需求
avatar
文章
阅读
粉丝