将一组模块(及其依赖项)以正确的顺序拼接到一个文件(或一组文件)中的过程。
日期:1月27日上午
本期简单的介绍下模块化,并不进行深究。
type="text/javascript" 默认的类型
type="module" 模块的类型
导出:export
导入: import
案例1:有名导出
/**
* 导入内容 有名导入
*/
export const a = 10;
export const myFunc02 = () => {
console.log("####");
}
export function myFunc01() {
console.log("xxxx");
}
案例2:有名导入
<script type="module">
//有名导出
// 将导出的遍历封装成了一个对象
import * as obj from "./js/a.js"
console.log(obj);
console.log(obj.a);
obj.myFunc02()
console.log("-----------------");
// 解构赋值
// const {a,myFunc02,myFunc01} = obj
// console.log(a);
// myFunc02()
// myFunc01()
// 导入的内容直接解构赋值 按需导入
import {a,myFunc01} from "./js/a.js"
console.log(a);
myFunc01()
案例3:匿名导出
// 匿名导出
// 匿名导出需要使用default
// 一个文件中 只可能存在一个匿名导出
const a = 10;
const fn = () => {
console.log("xxxx");
}
// export default a; // 匿名导出
export default fn;
案例4:匿名导入
// * 全部导出 一般只用于有名导出 匿名导出 直接导出就可以了
import * as obj from "./js/b.js"
console.log(obj);
console.log(obj.default);
// 导出匿名内容
import sy from "./js/b.js" //sy 表示导出的匿名内容
console.log(sy);
案例5:多个匿名 封装成对象来使用
export default {
name:"小明",
age:18,
say() {
console.log("xxx");
}
};
案例5:多种有名,匿名 调用方法
import fn,{a,arr} from "./js/c.js"
fn()
console.log(a,arr);
import * as obj from "./js/c.js"
console.log(obj);
import myObj from "./js/d.js"
console.log(myObj);
总结:模块化在于vue的使用会很重要。