Web前端最全【AST抽象语法树】结构分析及特性_抽象语法树(ast)比较(1)，2024年最新计算机网络面试知识点总结

最新推荐文章于 2024-07-19 09:56:49 发布

2401_84434237

最新推荐文章于 2024-07-19 09:56:49 发布

阅读量1k

点赞数 11

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84434237/article/details/138979513

版权

程序员专栏收录该内容

180 篇文章 0 订阅

订阅专栏

ES6

列举常用的ES6特性：
箭头函数需要注意哪些地方？
let、const、var
拓展：var方式定义的变量有什么样的bug？
Set数据结构
拓展：数组去重的方法
箭头函数this的指向。
手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

简单描述一下微信小程序的相关文件类型?
你是怎么封装微信小程序的数据请求？
有哪些参数传值的方法？
你使用过哪些方法，来提高微信小程序的应用速度？
小程序和原生App哪个好？
简述微信小程序原理？
分析微信小程序的优劣势
怎么解决小程序的异步请求问题？

其他知识点面试

webpack的原理
webpack的loader和plugin的区别？
怎么使用webpack对项目进行优化?
防抖、节流
浏览器的缓存机制
描述一下二叉树, 并说明二叉树的几种遍历方式?
项目类问题
笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

我们利用成熟的astexplorer来进行结构化的比较和分析。可以尝试登录以下网址访问：

https://astexplorer.net/ 点击直接访问

在这里插入图片描述
登录网址后，我们尝试写一段示例代码并观察其AST结构。

基本结构分析及转换

示例vue源码：

以简单的vue demo代码为例：template包含两个p标签作为示例源码，且不包含css相关代码。

<template>
  <p>{{ code }} AST!</p>
  <p>AST 2 TEST!</p>
</template>

<script>
export default {
  data () {
    return {
      code: "Go"
    };
  }
};
</script>

得到的JSON表达的树结构如所示：
在这里插入图片描述
简概Json体结构：

{
  "type": 0,
  "children": [
  //指示template标签
    {
      "type": 1,
      "ns": 0,
      "tag": "template",
      "tagType": 0,
      "props": [],
      "isSelfClosing": false,
      "children": [],
      "loc": {}
    },
    //指示script标签
    {
      "type": 1,
      "ns": 0,
      "tag": "script",
      "tagType": 0,
      "props": [],
      "isSelfClosing": false,
      "children": [],
      "loc": {}
    }
  ],
  "helpers": [],
  "components": [],
  "directives": [],
  "hoists": [],
  "imports": [],
  "cached": 0,
  "temps": 0,
  "loc": {}

属性解析：

type：指代节点的类型，用于标识不同类型的语法单元或操作。例如，可以是"VariableDeclaration"、"FunctionDeclaration"等。
ns：指代命名空间（Namespace）属性，用于表示XML或HTML文档中某个元素节点所属的命名空间。对于大多数编程语言而言，默认为空即可。
tag：指代标签（Tag）属性，在HTML或XML文档中使用。它表示一个元素节点所对应的标签名称，例如 “div”, “p”, "span"等。
tagType：指代标签类型（Tag Type），也只存在于HTML或XML文档中。它描述了特殊的标签行为，并且可能影响解析和渲染过程。常见值包括：“open”,
“close”, “selfClosing”.
props：指代属性集合（Properties），存储与当前节点相关联的所有属性信息。这些信息可以是该节点自身定义的属性、继承自父级别对象、从其他地方引入等等。
props：指代属性集合（Properties），存储与当前节点相关联的所有属性信息。这些信息可以是该节点自身定义的属性、继承自父级别对象、从其他地方引入等等。
loc：指代位置信息(Location)，描述了源代码中该AST节点对应的位置范围，通常包括行号、列号等信息。这些信息在进行错误定位、调试和格式化时非常有用。
helpers：指代帮助函数（Helpers），用于存储在转换或编译过程中生成的辅助函数。这些辅助函数通常是为了实现特定功能或处理复杂逻辑而引入的。
components：指代组件（Components），用于存储当前模块所依赖或使用到的组件信息。这些信息可以包括组件名称、路径、导入声明等。
directives：指代指令（Directives），用于存储与当前模块相关联的所有自定义指令信息。这些信息可以包括指令名称、参数、修饰符等。
hoists：指代提升项（Hoists），用于存储需要被提前计算并缓存起来以优化性能的表达式或计算结果。通过将这些表达式移出循环结构，可以减少重复计算次数。
imports：指代导入项（Imports），用于描述当前模块所引入的外部模块，并记录其对应关系和可访问性等相关信息。
cached：用于缓存一次求值结果，并在后续多次使用时直接返回缓存值，避免重复计算造成性能损耗。
temps：临时变量（Temporaries），用于存储在生成的代码中临时使用的变量。这些变量通常是为了辅助实现某个功能或处理过程中所需要的临时数据

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

js基础.PNG

前16.PNG

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Data到客户端有那些方式？

[外链图片转存中…(img-wTEuq5qo-1715875418166)]

[外链图片转存中…(img-c3dpEHuo-1715875418166)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84434237

关注

11
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Web前端最全【AST抽象语法树】结构分析及特性_抽象语法树(ast)比较(1)，2024年最新计算机网络面试知识点总结

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。我们利用成熟的来进行结构化的比较和分析。可以尝试登录以下网址访问：点击直接访问登录网址后，我们尝试写一段示例代码并观察其AST结构。
复制链接

扫一扫