ES6 模块化

最新推荐文章于 2024-06-07 09:30:00 发布

宇柯

最新推荐文章于 2024-06-07 09:30:00 发布

阅读量1.3k

点赞数 2

文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_60078280/article/details/119901553

版权

本文探讨了模块化编程的重要性，特别是在团队开发中避免变量冲突的需求。介绍了CommonJS、AMD、CMD和ES6 Modules等常见的模块化规范，并通过示例详细解释了ES6的`import`和`export`语法，展示了如何按需导入和导出函数及对象。通过模块化，可以更好地组织和复用代码，提高代码的可维护性和可读性。

摘要由CSDN通过智能技术生成

1、为什么要使用模块化

当我们是以一个开发小组的形式开发项目，每个人负责项目的某个模块，若没有模块化思想，各模块之间定义的变量，方法很容易交杂在一起导致错误。

2、常见的模块化规范

CommonJS
AMD
CMD
ES6的Modules

3、export / import

导出和导入，一旦你通过导出的方式给别人暴露出来，任何人只需要通过导入的方式就可以调用。

实例：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="./index.js"></script>
</head>
<body>
    
</body>
</html>

index.js:

// import 导入

    // 按需导入
import { v1, v2 } from './sum.js';
    //全部导入
import  cal from './sum.js';

let sum1 = v1(1,2,3,4);
// let sum2 = v2(1,2,3,4);
// let sum1 = cal.v1(1,2,3,4);
// let sum2 = cal.v2(1,2,3,4);
console.log(sum1);
// console.log(sum2);
// console.log(cal.obj.name);

console.log(cal.fun());

sun.js

/ export 导出 
    // 函数 导出
export function v1(...arr) {
    let sum = 0;
    for (const iterator of arr) {
        sum += iterator;
    }
    return sum;

}
export function v2(...arr) {
    let sum1 = 0;
    for (const iterator of arr) {
        sum1 -= iterator;
    }
    return sum1;

}
    //  对象 导出
    export default {
        
        
        fun(){  // 相当于 fun:function (){
            return this.fun.name
        },
        fun2, //相当于fun2 : fun2
    }
    function fun2 (){
        return "fun2"
    }
// let obj = {
//     name:"李四",
//     age:18,
//     sex:"男"
// }
// export default{
//     v1,
//     v2,
//     obj
// }

宇柯

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ES6 模块化

1、为什么要使用模块化当我们是以一个开发小组的形式开发项目，每个人负责项目的某个模块，若没有模块化思想，各模块之间定义的变量，方法很容易交杂在一起导致错误。 2、常见的模块化规范 CommonJS AMD CMD ES6的Modules 3、export/import导出和导入，一旦你通过导出的方式给别人暴露出来，任何人只需要通过导入的方式就可以调用。实例：index.html<!DOCTYPE html>...
复制链接

扫一扫