ES6之模块化

模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
 模块化的好处
模块化的优势有以下几点：
1) 防止命名冲突
2) 代码复用
3) 高维护性
  模块化规范产品
ES6 之前的模块化规范有：
1) CommonJS => NodeJS、Browserify
2) AMD
=> requireJS
3) CMD
=> seaJS19
更多 Java –大数据 –前端 –python 人工智能资料下载，可访问百度：尚硅谷官网
 
ES6 模块化语法
模块功能主要由两个命令构成：export 和 import。
⚫ export 命令用于规定模块的对外接口
⚫ import 命令用于输入其他模块提供的功能

 

通用的导入方式

（1）

m1.js

?
1
2
3
4
5
//分别暴露  将想要暴露外面的数据前加上export
export let school = '尚硅谷';
export function teach() {
    console.log("我们可以教给你开发技能");
}

 使用：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
        //1. 通用的导入方式
        //引入 m1.js 模块内容
        import * as m1 from "./src/js/m1.js"; 
        console.log(m1);
    </script>
 
</body>
</html>
复制代码

 

结果：

 

 （2）

m2.js:

复制代码
//统一暴露
let school = '尚硅谷';

function findJob(){
    console.log("我们可以帮助你找工作!!");
}

//
export {school, findJob};
复制代码

 

使用：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
      
        // //引入 m2.js 模块内容
          import * as m2 from "./src/js/m2.js"; 
          console.log(m2);
    </script> 
</body>
</html>
复制代码

 

（3）

m3.js:

//默认暴露
export default {
    school: 'ATGUIGU',
    change: function(){
        console.log("我们可以改变你!!");
    }
}

 

使用：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
      
        // //引入 m3.js 模块内容
          import * as m3 from "./src/js/m3.js"; 
          console.log(m3);
    </script> 
</body>
</html>
复制代码

 

 

 解构赋值形式
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module"> 

        //2. 解构赋值形式
        import {school, teach} from "./src/js/m1.js";
        import {school as guigu, findJob} from "./src/js/m2.js";
        // 针对默认暴露的默认导入写法
        import {default as m3} from "./src/js/m3.js";

        //3. 简便形式  只能针对默认暴露
        // import m3 from "./src/js/m3.js";
         console.log(m3);
    </script> 
</body>
</html>
复制代码

 

 

通过src属性引入的形式

app.js:

复制代码
//入口文件

//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

// console.log(m1);
// console.log(m2);
// console.log(m3);

// m1.teach();
// m2.findJob();
// m3.default.change();

//修改背景颜色为粉色
import $ from 'jquery';// const $ = require("jquery");
$('body').css('background','pink');
复制代码

使用：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body> 
    <script src="./src/js/app.js" type="module"></script>
</body>
</html>
复制代码

 

posted @   安静点--  阅读(75)  评论(0)  编辑  收藏  举报
相关博文：
· ES6之导入NPM包
· ES6之Promise
· ES6-模块化
· 32.ES6模块化
· ES6的模块化
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
历史上的今天：
2021-11-20 jQuery增删表格数据
2021-11-20 jQuery文档增删
2021-11-20 jQuery爱好选择器
点击右上角即可分享
微信分享提示