作者：天天鸭前言在真实工作中，估计import和require大家经常见到，如果做前端业务代码，那么import更是随处可见了。但我们都是直接去使用，但是这两种方式的区别是什么呢？应用场景有什么区别呢？大部分能说出来import是ES6规范，而require是CommonJS规范，然后面试官深入问你两者编译规则有啥不一样？然后就不知道了本文一次性对import和require的模块基本概念、编译规则、基本用法差异、生态支持和性能对比等5个方面一次理清总结好，下次遇到这种问题直接举一反三。（顺便吆喝一句，技术大厂，前后端测试捞人，感兴趣来看这里） 一、模块基本概念 require： 是CommonJS模块规范，主要应用于Node.js环境。 import：是ES6模块规范，主要应用于现代浏览器和现代js开发(适用于例如各种前端框架)。 二、编译规则 require： require 执行时会把导入的模块进行缓存，下次再调用会返回同一个实例。 在CommonJS模块规范中，require默认是同步的。当我们在某个模块中使用require调用时，会等待调用完成才接着往下执行，如下例子所示。模块A代码 console.log('我是模块A的1...'); const moduleB = require('./myModuleB'); console.log('我是模块A的2'); 模块B代码 console.log('我是模块B...'); 打印顺序，会按顺序同步执行 // 我是模块A的1... // 我是模块B... // 我是模块A的2...  注意：require并非绝对是同步执行，例如在Webpack中能使用 require.ensure 来进行异步加载模块。 import：在ES6模块规范中，import默认是静态编译的，也就是在编译过程就已经确认了导入的模块是啥，因此默认是同步的。import有引用提升置顶效果，也就是放在何处都会默认在最前面。但是....， 通过import（）动态引入是异步的哦，并且是在执行中加载的。 import()在真实业务中是很常见的，例如路由组件的懒加载component: () => import('@/components/dutest.vue')和动态组件const MyTest = await import('@/components/MyTest.vue');等等，import() 执行返回的是一个 Promise，所以经常会配合async/await一起用。三、基本用法差异 require： 一般不直接用于前端框架，是用于 Node.js 环境和一些前端构建工具（例如：Webpack）中1. 导入模块(第三方库) 在Node.js中经常要导入各种模块，用require可以导入模块是最常见的。例如导入一个os模块 const os = require('os'); // 使用 os.platform() 2. 导入本地写好的模块 假设我本地项目有一个名为 utils.js 的本地文件，文件里面导出一个add函数 module.exports = {   add: (a, b) => a + b, }; 在其它文件中导入并使用上面的模块 const { add } = require('../test/utils'); // 使用 add(2, 3); import： 一般都是应用于现在浏览器和各种主流前端框架（例如：Vue\react）1. 静态引入（项目中最常用） 这种情况一般适用于确定的模块关系，是在编译时解析 2. 动态引入 其实就是使用import()函数去返回一个 Promise，在Promise回调函数里面处理加载相关，例如路由的懒加载。 {   path: '/',   name: 'test',   component: () => import('@/components/dutest.vue') }, 或者动态引入一些文件（或者本地的JSON文件）  四、生态支持 require：Node.js14 之前是默认模块系统。目前的浏览器基本是不原生支持 CommonJS，都是需要通过构建工具（如 Webpack ）转换才行。并且虽然目前市面上CommonJS依然广泛使用，但基本都是比较老的库，感觉被逐渐过渡了。import：import是ES6规范，并且Node.js在Node.js12开始支持ES6，Node.js14 之后是默认选项。目前现代浏览器和主流的框架（Vue、React）都支持原生ES6，大多数现代库也是，因此import是未来主流。五、性能对比ES6 支持 Tree Shaking摇树优化，因此可以更好地去除一些没用的代码，能很好减小打包体积。 所以import有更好的性能。import()能动态导入模块性能更好，而require不支持动态导入。小结对比下来发现，import不但有更好性能，而且还是Node.js14之后的默认，会是主流趋势。至此我感觉足够能举一反三了，如有哪里写的不对或者有更好建议欢迎大佬指点一二啊。

作者：安静的搬砖人1. 通用组件（表单搜索 + 表格展示 + 分页器）在项目当中我们总会遇到这样的页面：页面顶部是一个表单筛选项，下面是一个表格展示数据。表格下方是一个分页器，这样的页面在我们的后台管理系统中经常所遇到，有时候可能不止一个页面，好几个页面的结构都是这种。本人记得，在 react 中的高级组件库中有这么一个组件，就实现了这么一个效果。就拿这个页面来说我们实现一下组件封装的思想：1. 首先把每个页面的公共部分抽出来，比如标题等，用 props 或者插槽的形式传入到组件中进行展示 2. 可以里面数据的双向绑定实现跟新的效果 3. 设置自定义函数传递给父组件要做上面事情1. 将公共的部分抽离出来TableContainer组件