3.1 前端代码模块化

最新推荐文章于 2024-01-30 10:40:12 发布

飞翔荷兰号

最新推荐文章于 2024-01-30 10:40:12 发布

阅读量122

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_43374578/article/details/108901432

版权

一、模块化

1. 引入原因

1. 一个html中，引入的多个js文件可能存在同名变量，从而引起冲突
2. 在html中引入的js的顺序不同，可能导致不同的结果
3. var会引发               let就会直接编译错误

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--引入其他两个js-->
<script src="second.js"></script>
<script src="first.js"></script>

<script>
    console.log(flag)
</script>
</body>
</html>

first.js

var flag = true;

second.js

var flag = false;

2. 常见模块化框架

CommonJS   AMD          CMD
ES6的Modules(最常用)

二、Moudles

1. 逐个导入

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 1. 模块化引入不同的js组件：各个组件的变量不会冲突
     2. 不同js类似隔离的不同的房子，但是各个房子之间不能交互-->
<script src="second.js" type="module"></script>
<script src="first.js" type="module"></script>

</body>
</html>

first.js

/*1. 导出变量*/
let name = 'lucy'
export {name};

let age = 14;
let address = "shanxi";
export {age, address};

/*2. 导出函数*/
function add(num1, num2) {
    return num1 + num2;
}
export {add}

/*3. 直接导出变量*/
export let sex = "man";

/*4. 直接导出函数*/
export function minus(num1, num2) {
    return num1 - num2;
}

/*5. 直接导出类*/
export class people {
    run(){
        return "running";
    }
}

second.js

/*导入方式一：别人导出什么(函数不带参数)，这边取什么，名称不能变*/
/*1. 导入变量*/
import {name} from "./first.js";
console.log(name);

import {age,address} from "./first.js";
console.log(age,address);

/*2. 导入函数*/
import {add} from "./first.js";
console.log(add(1,2))

/*3. 直接导入变量*/
import {sex} from "./first.js";
console.log(sex);

/*4. 直接导入函数*/
import {minus} from "./first.js";
console.log(minus(4,1))

/*5. 直接导入类*/
import {people} from "./first.js";
let li = new people();
console.log(li.run());

2. 一次性导入

second.js

import {add, address, age, minus, name, people, sex} from "./first.js";

console.log(name);

console.log(age, address);

console.log(add(1, 2))

console.log(sex);

console.log(minus(4, 1))

let li = new people();
console.log(li.run());

second.js

import * as obj from "./first.js";

console.log(obj.name);

console.log(obj.age, obj.address);

console.log(obj.add(1, 2))

console.log(obj.sex);

console.log(obj.minus(4, 1))

let li = new obj.people();
console.log(li.run());