ES6语法特性（五）模块化、引入npm包

最新推荐文章于 2024-04-07 00:11:56 发布

sharp_wu

最新推荐文章于 2024-04-07 00:11:56 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript 文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/qq_38232003/article/details/110402877

版权

ES6

模块化

模块化是指将一个大的程序文件，拆分为许多小的文件（模块），然后将小的文件组合起来。

优点

防止命名冲突
代码复用
高维护性

模块化规范产品

ES6之前本身没有模块化，社区衍生出模块化产品

CommonJS ===> NodeJS、Browserify
AMD ===> RequireJS
CMD ===> SeaJS

语法

模块功能主要有两个命令构成 export 、import

export 命令用于规定模块对外的接口
import 命令用于输入其他模块提供的功能

创建m1.js文件

export let name = 'wf';
export const say = () => {
   
  console.log('hello');
};

创建index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      import * as m1 from './m1.js';
      console.log(m1);
    </script>
  </body>
</html>

结果：
在这里插入图片描述

export

分别暴露

export let name = 'wf';
export const say = () => {
   
  console.log('hello');
};

统一暴露

let name = 'wf';
const say = () => {
   
  console.log('hello');
};
export {
    name, say

最低0.47元/天解锁文章

sharp_wu

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
ES6语法特性（五）模块化、引入npm包

ES6模块化模块化是指将一个大的程序文件，拆分为许多小的文件（模块），然后将小的文件组合起来。优点防止命名冲突代码复用高维护性模块化规范产品ES6之前本身没有模块化，社区衍生出模块化产品CommonJS ===> NodeJS、BrowserifyAMD ===> RequireJSCMD ===> SeaJS语法模块功能主要有两个命令构成 export 、importexport 命令用于规定模块对外的接口import 命令用于输入其他模块提供的功能
复制链接

扫一扫