1. 为什么需要模块化
1.1 JavaScript原始功能
1.2 匿名函数的解决方案
(function(){
let flag = true
})()
1.3 使用模块作为出口
- 非常简单，在匿名函数内部定义一个对象。
- 给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。
- 最后将这个对象返回，并且在外面使用了一个MoudleA接受。
var ModuleA = (function() {
//1.定义一个对象
var obj = {};
//2.在对象内部添加变量和方法
obj.flag = true;
obj.myFunc = function(info) {
console.log(info);
}
//3.将对象返回
return obj;
})
if(ModuleA.flag) {
console.log('小明是个天才！');
}
ModuleA.myFunc('小明长的真帅！');
console.log(ModuleA);
2. 模块化开发相关规范
2.1 CommonJs规范
module.exports = {
flag: true,test(a,b) {
return a + b;
},demo(a,b) {
return a * b;
}
}
//CommonJS模块
let {test,demo,flag} = require('moduleA');
//等同于
let _mA = require('moduleA');
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;
2.2 ES6的export命令
<script src="a.js" type="module"></script>
<script src="b.js" type="module"></script>
//info.js
export let name = 'why';
export let age = 18;
export let height = 1.88;
//info.js
let name = 'why';
let age = 18;
let height = 1.88;
export {name,age,height};
export function test(content) {
console.log(content);
}
export class Person {
constructor(name,age) {
this.name = name;
this.age = age;
}
run() {
console.log(this.name + '在奔跑')
}
}
function test(content) {
console.log(content);
}
class Person {
constructor(name,age) {
this.name = name;
this.age = age;
}
run() {
console.log(this.name + '在奔跑')
}
}
export {test,Person}
//info.js
export default function () {
console.log('default function');
}
import myFunc from './info.js'
myFunc();
2.3 ES6的import命令
<script src="info.js" type="module"></script>
<script src="main.js" type="module"></script>
import {name,height} from './info.js'
console.log(name,height);
import * as info from './info.js'
console.log(info.name,info.age,info.height,info.friends);
服务热线 19970861797
