刷刷题5vue中的AST语法树转化在Vue.js中，AST（Abstract Syntax Tree，抽象语法树）是一

vue中的AST语法树转化

在Vue.js中，AST（Abstract Syntax Tree，抽象语法树）是一种用于表示源代码语法结构的数据结构，它可以帮助开发者理解代码的结构和执行逻辑。Vue.js在编译模板时会生成一个AST，这个过程主要用于模板的转换和优化。

Vue模板到AST的转换过程

解析（Parsing） ：Vue的编译器首先会将模板字符串解析成AST。这个过程涉及到词法分析和语法分析，将模板转换成抽象的语法树结构。
转换（Transforming） ：一旦模板被解析成AST，可以进行各种转换操作，比如静态提升、事件名称的转换等。
代码生成（Codegen） ：最后，基于转换后的AST生成可执行的代码，通常是渲染函数。

手动操作AST

虽然Vue内部自动处理了上述过程，但有时候开发者可能需要手动操作AST来进行一些自定义的转换或优化。Vue提供了一个插件系统，可以通过插件来修改AST。

示例：使用`vue-template-compiler`手动操作AST

首先，你需要安装vue-template-compiler：

npm install vue-template-compiler

然后，你可以使用这个包来解析和转换模板：

const VueTemplateCompiler = require('vue-template-compiler');
 
const template = `<div><p>{{ message }}</p></div>`;
const ast = VueTemplateCompiler.parseComponent(template, { pad: 'line' });
 
// 修改AST（例如，添加一个静态节点）
ast.template.ast.children.push({
  type: 1, // 元素节点
  tag: 'h1',
  attrsList: [],
  attrsMap: {},
  parent: null,
  children: [{ type: 2, expression: 'Hello, World!', text: 'Hello, World!' }]
});
 
// 生成新的模板字符串
const newTemplate = VueTemplateCompiler.compileToFunctions(ast).render().toString();
console.log(newTemplate);

## 什么是正向代理，反向代理

关键词：css display 属性、css display 作用

下面是一些常用的 CSS display 属性值及其作用，用表格形式表示：

属性值	描述
`block`	元素生成块级框，占据一行，上下和左右都有边距，可以设置宽高等属性
`inline`	元素生成内联框，不会独占一行，仅占据内容所需的空间
`inline-block`	元素生成内联块级框，不会独占一行，可设置宽高等属性
`none`	元素不显示，不占据空间，对布局没有影响
`flex`	使用弹性盒模型布局，子元素可伸缩、排列和对齐
`grid`	使用网格布局，将元素划分为网格，可以进行自由布局
`table`	将元素显示为表格，包括表格行、表格列和单元格
`inline-table`	元素以内联方式显示为表格
`table-cell`	元素作为表格单元格显示
`table-row`	元素作为表格行显示
`table-row-group`	元素作为表格行组显示

这个表格展示了一些常见的 display 属性值以及它们的作用。通过设置不同的 display 值，可以控制元素的布局行为和显示效果，从而实现不同的页面布局和样式效果。

如何避免全局样式污染？

要避免全局样式污染，可以采取以下几种方式：

使用命名约定：给不同组件、模块或页面的样式类名添加特定的前缀，以确保它们的作用范围只在对应的组件、模块或页面内生效。例如，使用 BEM（Block Element Modifier）命名约定可以将样式类名划分为块、元素和修饰符，以实现更明确的样式隔离。
使用 CSS-in-JS：使用 CSS-in-JS 技术，将样式直接与组件绑定，可以避免全局样式的冲突。每个组件都有自己的样式定义，不会影响其他组件。
使用 CSS Modules：CSS Modules 是一种 CSS 模块化的解决方案，它通过将 CSS 文件与组件绑定，在构建过程中自动生成唯一的类名，从而实现样式的局部作用域。这样可以避免全局样式冲突。
使用作用域限定符：使用 CSS 预处理器（如 Sass 或 Less）的作用域限定符（如父选择器 &）来限制样式的作用范围。通过嵌套样式规则，并使用作用域限定符，可以确保样式仅应用于特定的父元素。
使用样式重置/规范：使用样式重置或规范库，如 Normalize.css，可以消除浏览器默认样式的差异，以确保在不同浏览器下呈现一致的样式，并避免全局样式污染。
使用模块化开发框架：使用诸如 React、Vue 或 Angular 等模块化开发框架，它们提供了组件化的开发模式，每个组件具有独立的样式作用域，可以避免全局样式的冲突。

js 函数有默认值的时候，如果传递的参数是 undefined 那么会被默认值赋值吗？

是的，如果函数在调用时某个参数被传递为 undefined，那么它会被默认值赋值。

当为函数的参数设置默认值时，只有当参数的值为 undefined 时才会生效。如果传递的参数为 null、空字符串 '' 或者未提供参数，则默认值不会被应用。

示例：

  <el-button @click="gus('')">延时请求</el-button>
    <el-button @click="gus(undefined)">延时请求</el-button>
    <el-button @click="gus(null)">延时请求</el-button>

const gus = (name = "Guest") => {
  console.log(`Hello, ${name}!`);
};

web 应用中如何对静态资源加载失败的场景做降级处理

在 Web 应用中，可以使用以下方法对静态资源加载进行降级处理，即在某个资源加载失败时使用备用的静态资源链接：

使用多个 CDN 链接：在 HTML 中使用多个静态资源链接，按照优先级顺序加载，如果其中一个链接加载失败，则尝试加载下一个链接。

<script src="https://cdn1.example.com/script.js"></script>
<script src="https://cdn2.example.com/script.js"></script>
<script src="https://cdn3.example.com/script.js"></script>

在加载 JavaScript 脚本时，浏览器会按照给定的顺序尝试加载各个链接，如果某个链接加载失败，浏览器会自动尝试加载下一个链接。

使用备用资源路径：在 JavaScript 中使用备用的资源路径，当主要的资源路径加载失败时，切换到备用路径。

var script = document.createElement('script');
script.src = 'https://cdn.example.com/script.js';
script.onerror = function() {
  // 主要资源加载失败，切换到备用资源路径
  script.src = 'https://backup.example.com/script.js';
};
document.head.appendChild(script);

在加载 JavaScript 脚本时，可以通过监听 onerror 事件，在主要资源加载失败时切换到备用资源路径，保证资源的可靠加载。

使用动态加载和错误处理：使用 JavaScript 动态加载静态资源，并处理加载失败的情况。

function loadScript(src, backupSrc) {
  return new Promise(function(resolve, reject) {
    var script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = function() {
      if (backupSrc) {
        // 主要资源加载失败，切换到备用资源路径
        script.src = backupSrc;
      } else {
        reject(new Error('Failed to load script: ' + src));
      }
    };
    document.head.appendChild(script);
  });
}

// 使用示例
loadScript('https://cdn.example.com/script.js', 'https://backup.example.com/script.js')
  .then(function() {
    // 资源加载成功
  })
  .catch(function(error) {
    // 资源加载失败
    console.error(error);
  });

通过动态加载脚本的方式，可以在资源加载失败时切换到备用资源路径或处理加载错误。

除了前面提到的方法外，还有以下一些降级处理的方法：

本地备份资源：在 Web 应用的服务器上存储备份的静态资源文件，并在主要资源加载失败时，从本地服务器上加载备份资源。这种方法需要在服务器上维护备份资源的更新和一致性。
使用浏览器缓存：如果静态资源被浏览器缓存，则在资源加载失败时，浏览器可以使用缓存中的资源。可以通过设置合适的缓存策略，例如设置资源的 Cache-Control 头字段，让浏览器缓存资源并在需要时从缓存中加载。
使用 Service Worker：使用 Service Worker 技术可以在浏览器中拦截网络请求，从而实现更高级的降级处理。当主要资源加载失败时，可以使用 Service Worker 拦截请求并返回备用资源，或者动态生成代替资源。
使用资源加载管理工具：使用像 Webpack 这样的资源加载管理工具，可以通过配置多个资源入口点和插件来实现资源加载的灵活控制。在资源加载失败时，可以通过配置自动切换到备用资源或通过插件实现自定义的降级逻辑。

这些方法可以根据具体的需求和场景选择适合的降级处理策略。降级处理的目的是确保网页应用的正常运行，提高用户体验，并减少对单一资源的依赖性。

刷刷题5