模块化之import 和require的区别

Web Components 模块化：通过封装可防止冲突，最终进行代码重用。分自定义脚本模块、shadow DOM（与主文档的DOM保持分离，保证代码干净、隐秘无冲突，对dom 进行隐藏展示控制、解决css冲突）、HTML templates

import 和require的区别:

- require可写在需要使用的地方 vs import 需要写在文件顶部

- require 是在程序运行的时候去解析 vs import是在编译的时候去做解析请求包

- （编译：把源文件转换成二进制语言，变成系统可执行文件。运行：把编译出来的可执行文件，在系统中运行的过程。先后顺序：编译import -> 运行require）

- require 是请求整个包对象 vs import是只请求模块中需要的请求的部分

- require 是动态加载 vs import是静态加载

- require 是值拷贝 vs import传的是值引用

- import 可以支持异步等待并且可返回一个promise对象：

let module = await import('/modules/my-module.js');

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });