拼多多前端岗位二面面试题-杨标的博客

拼多多前端岗位二面面试题

webpack如何实现动态加载？

webpack是一个模块打包器，它可以将JavaScript文件和其他类型的文件打包成适合在浏览器中使用的有效模块

webpack可以实现动态加载，也就是按需加载模块，这样可以提高性能和用户体验

要实现动态加载，你需要使用webpack的import()方法，它会返回一个promise对象，并且会在运行时动态地请求模块

例如，你可以这样写：
```
// 假设有一个print.js模块
function getComponent() {
  // 使用import()方法动态加载print.js
  return import('./print.js').then(module => {
    // 返回一个div元素，并绑定print方法
    const element = document.createElement('div');
    element.onclick = module.default;
    return element;
  });
}

getComponent().then(component => {
  // 将组件添加到页面上
  document.body.appendChild(component);
});
```
这样，当用户点击div元素时，才会去请求print.js模块，并执行其中的代码
react里面有动态加载的API吗？

React是一个用于构建用户界面的JavaScript库。它提供了一些顶层API，用于创建和操作React元素和组件

React也支持动态加载，也就是在运行时按需加载组件或模块，这样可以提高性能和用户体验。

要实现动态加载，你可以使用React的lazy()函数和Suspense组件。

lazy()函数可以让你定义一个动态导入的组件，它会返回一个可渲染的组件，并且会在第一次渲染时自动导入模块

Suspense组件可以让你指定一个加载指示器（比如一个转圈的图标），在等待动态导入的组件时显示

例如，你可以这样写：
```
// 假设有一个OtherComponent.js模块
import React, { lazy, Suspense } from 'react';

// 使用lazy()函数定义一个动态导入的组件
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // 使用Suspense组件包裹动态导入的组件，并指定fallback属性为加载指示器
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}
```
这样，当MyComponent渲染时，会先显示Loading…，然后去请求OtherComponent.js模块，并在请求完成后显示OtherComponent内容
React.lazy的原理是什么？

React.lazy 是 React 16.6 引入的新特性，用于实现组件的延迟加载。React.lazy 接受一个函数作为参数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）
webpack 能动态加载 require 引入的模块吗？

可以。webpack 支持动态加载 require 引入的模块。可以使用 require.ensure 或者 import() 方法来实现动态加载。其中，require.ensure 是 webpack 特有的语法，而 import() 是 ECMAScript 的语法，webpack 也支持它。使用这两种方法都可以实现动态加载模块，但是 import() 更加推荐，因为它是标准语法，而且支持 Promise
require 引入的模块 webpack 能做 Tree Shaking 吗？

可以。webpack 支持使用 Tree Shaking 来删除未使用的代码。但是，只有使用 ES6 模块语法的代码才能被 Tree Shaking 删除。如果使用 require 引入的模块，webpack 会将其视为 CommonJS 模块，而 CommonJS 模块是不能被 Tree Shaking 删除的。如果想要使用 Tree Shaking，可以使用 ES6 模块语法来编写代码
设计一个input 组件需要哪些属性？

设计 input 组件需要的属性包括：type、name、value、size、readonly、disabled、checked、maxlength、min 等。其中，type 属性用来指定控件的类型；name 属性用来指定控件的名称，服务器端脚本就根据名称来获得文本框中的值；value 属性指定控件的默认值。size 属性指定控件的宽度，readonly 属性指定控件是否只读，disabled 属性指定控件是否禁用，checked 属性指定控件是否被选中，maxlength 属性指定控件的最大长度，min 属性指定控件的最小值
value 的类型都有哪些？

string,number,undefined,boolean,null类型
有一个a标签，如何动态的决定他的样式。

你可以使用CSS来动态地改变a标签的样式。你可以使用id或class来选择a标签，然后使用CSS来改变它们的样式。例如，你可以使用:hover伪类来改变鼠标悬停在a标签上时的样式，或者使用JavaScript来动态地改变a标签的样式

这里要注意a标签的是个伪类，:link,:visisted,:hover,:active
import 和 require 导入的区别是什么？

import和require都是用来导入模块的。require是Node.js内置的方法，而import是一个ES6标准的关键字。两者的区别在于，require是运行时加载模块，而import是编译时加载模块。另外，import是ES6标准中的模块化解决方案，而require是Node.js中遵循CommonJS规范的模块化解决方案。因此，如果你使用的是ES6标准的模块化解决方案，那么你应该使用import来导入模块；如果你使用的是Node.js中遵循CommonJS规范的模块化解决方案，那么你应该使用require来导入模块
require 有什么性能问题

require方法的性能问题主要在于它是运行时加载模块，而不是编译时加载模块。这意味着，当你使用require方法加载模块时，它会在运行时加载模块，这会导致一定的性能损失。另外，如果你使用的是Node.js中遵循CommonJS规范的模块化解决方案，那么你应该使用require来导入模块。如果你使用的是ES6标准的模块化解决方案，那么你应该使用import来导入模块
class 组件与函数式组件的区别

在React.js开发中，函数组件和类组件有以下区别
- 语法上的区别：函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的，而且class组件需要创建render并且返回React元素，语法上来讲更复杂。
- 状态的区别：函数式组件没有状态，也就是没有this.state和this.setState。类组件有状态，可以通过this.state和this.setState来管理组件的状态。
- 生命周期的区别：函数式组件没有生命周期，也就是没有componentDidMount、componentWillUnmount等生命周期函数。类组件有生命周期，可以通过生命周期函数来管理组件的生命周期。
- 性能的区别：函数式组件没有实例化过程，所以渲染速度比较快。类组件需要实例化，所以渲染速度比较慢。
css 优先级

自行查找资料
如何避免 css 全局污染。

在Web开发中，CSS全局污染是一个常见的问题。以下是一些避免CSS全局污染的方法
- 使用CSS Modules：CSS Modules是一种CSS样式隔离方案，它可以将CSS样式限定在组件范围内，从而避免CSS全局污染。
- 使用CSS-in-JS：CSS-in-JS会把样式和组件绑定在一起，当这个组件要被删除掉的时候，直接把这些代码删除掉就好了，不用担心删掉的样式代码会对项目的其他组件样式产生影响。
- 使用scoped属性：在Vue.js中，可以使用scoped属性来限定CSS样式的作用范围，从而避免CSS全局污染。
- 使用BEM命名规范：BEM命名规范可以将CSS样式限定在组件范围内，从而避免CSS全局污染。
css modules 的原理

CSS Modules 是一种 CSS 文件，其中所有类名和动画名称默认都具有本地作用域。CSS Modules 实现 CSS 模块化的原理是根据在 config 文件中定义的类名命名规则给类生成一个独一无二的命名，从而实现作用域的隔离。这种做法非常类似于 Vue 的 scoped 样式，如果你使用了 scoped 样式，那么当前组件会被分配一个独一无二的 ID，类似于 data-v-f3f3eg9 这样，组件下的所有元素都会被加上这个属性
组件库如何做按需加载

实现组件库按需加载的方式有很多种，其中一种方式是只引入需要用到的组件和组件的 CSS，以减小打包体积，优化项目加载速度。这种方式的反面是全部引入，即将组件库中所有组件和 CSS 都引入，打包后的体积明显很大1.

具体实现方式可以参考 ElementUI、Vant 及 varlet 等组件库的实现
onChange 怎么规定 value 的类型

在 React 中，onChange 事件是在表单元素的值发生变化时触发的事件。在 React 中，表单元素的值通常是由 state 或 props 控制的。如果你想规定 value 的类型，可以在 state 中定义一个变量，然后在 onChange 事件中更新这个变量的值，从而实现对 value 类型的规定。例如，你可以定义一个变量 value，然后在 onChange 事件中更新这个变量的值，从而实现对 value 类型的规定1 2 3。
```
import React, { useState } from 'react';

function App() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
}
```
这是一个简单的例子，你可以根据自己的需求进行修改
interface 和 type 的区别

在 TypeScript 中，interface 和 type 都可以用来定义类型，但是它们有一些区别。interface 可以用来定义对象类型，而 type 可以用来定义非对象类型，例如联合类型、元组类型、基本类型（原始值）等。此外，interface 支持同名合并，而 type 不支持。interface 还可以继承其他的接口、类等对象类型，而 type 不支持继承。另外，type 还支持计算属性，而 interface 不支持

总的来说，interface 和 type 都可以用来定义类型，但是它们的使用场景有所不同。如果你想定义一个对象类型，那么你应该使用 interface；如果你想定义一个非对象类型，那么你应该使用 type。
写一个 promise 重试函数，可以设置时间间隔和次数

下面是一个可以设置时间间隔和次数的 promise 重试函数的示例代码：
```
function retry(promiseFn, times, interval) {
  return new Promise((resolve, reject) => {
    let count = 0;
    function run() {
      promiseFn()
        .then(resolve)
        .catch((error) => {
          count++;
          if (count === times) {
            reject(error);
          } else {
            setTimeout(run, interval);
          }
        });
    }
    run();
  });
}
```
这个函数接受三个参数：promiseFn，times 和 interval。promiseFn 是一个返回 Promise 的函数，times 是重试次数，interval 是重试时间间隔。这个函数会在 promiseFn 返回 reject 时进行重试，最多重试 times 次，每次重试的时间间隔为 interval 毫秒。如果重试次数达到 times 次后仍然失败，则返回 reject。

目录CONTENT

拼多多前端岗位二面面试题

拼多多前端岗位二面面试题

评论区