VueVuejs从入门到精通 - 前端模块化
Posted COCOgsta
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VueVuejs从入门到精通 - 前端模块化相关的知识，希望对你有一定的参考价值。
学习视频来源：B站《Vue、Vuejs从入门到精通》
个人在视频学习过程中也同步完成课堂练习等，现将授课材料与个人笔记分享出来。
aaa.js
var moduleA = (function () {
// 导出的对象
var obj = {}
//小明
var name = '小明'
var age = 22
function sum(num1, num2) {
return num1 + num2
}
var flag = true
if (flag) {
console.log(sum(10, 20));
}
obj.flag = flag;
obj.sum = sum;
return obj
})()bbb.js
var moduleB = (function () {
var obj = {}
var name = '小红' var flag = false console.log(name); obj.flag = flag
return obj
})()mmm.js
(function () {
// 1.想使用flag
if (moduleA.flag) {
console.log('小明是天才，哈哈哈');
}
// 2.使用sum函数
console.log(moduleA.sum(40, 50));
})()nnn.js
(function () {
console.log(moduleB.flag);
})()index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.项目组长
2.小明
3.小红
-->
<script src="main.js"></script>
<script src="aaa.js"></script>
<script src="bbb.js"></script>
<script src="mmm.js"></script>
<script src="nnn.js"></script>
</body>
</html>
aaa.js
var moduleA = (function () {
// 导出的对象
var obj = {}
//小明
var name = '小明'
var age = 22
function sum(num1, num2) {
return num1 + num2
}
var flag = true
if (flag) {
console.log(sum(10, 20));
}
obj.flag = flag;
obj.sum = sum;
return obj
})()
// //小明
// var name = '小明'
// var age = 22
//
// function sum(num1, num2) {
// return num1 + num2
// }
//
// var flag = true
//
// if (flag) {
// console.log(sum(10, 20));
// }
//
// module.exports = {
// flag: flag,
// sum: sum
// }mmm.js
(function () {
// 1.想使用flag
if (moduleA.flag) {
console.log('小明是天才，哈哈哈');
}
// 2.使用sum函数
console.log(moduleA.sum(40, 50));
})()
// var aaa = require('./aaa.js')
// var flag = aaa.flag;
// var sum = aaa.sum;
// var {flag, sum} = require('./aaa.js')
//
// sum(20, 30)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
</body>
</html>aaa.js
var name = '小明'
var age = 18
var flag = true
function sum(num1, num2) {
return num1 + num2
}
if (flag) {
console.log(sum(20, 30));
}
// 1.导出方式一：
export {
flag, sum
}
// 2.导出方式二：
export var num1 = 1000;
export var height = 1.88
// 3.导出函数/类
export function mul(num1, num2) {
return num1 * num2
}
export class Person {
run() {
console.log('在奔跑');
}
}
// 4. export default
// const address = '北京市'
// export default address
export default function (argument) {
console.log(argument);
}bbb.js
import {sum} from './aaa.js'
var name = '小红'
var flag = false
console.log(sum(100, 200));mmm.js
// 1.导入的{}中定义的变量
import {flag, sum} from "./aaa.js"
if (flag) {
console.log('小明是天才，哈哈哈');
console.log(sum(20, 30));
}
// 2.直接导入export定义的变量
import {num1, height} from "./aaa.js"
console.log(num1);
console.log(height);
// 3.导入 export的function
import {mul, Person} from "./aaa.js";
console.log(mul(30, 50));
const p = new Person();
p.run()
// 4.导入 export default中的内容
import addr from "./aaa.js"
addr('你好啊')
// 5.统一全部导入
import * as aaa from "./aaa.js"
console.log(aaa.flag);
console.log(aaa.height);以上是关于VueVuejs从入门到精通 - 前端模块化的主要内容，如果未能解决你的问题，请参考以下文章