1 什么是JS模块
- 具有特定功能的js文件
- 将所有的数据和功能都封装在一个函数内部(私有的)
- 只向外暴露一个包信n个方法的对象或函数
- 模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能
2 demo
- 定义一个mok
function MyMath(){
// pai 是个私有的数据，外部是无法访问的
var pai = 3.1415826
function getPai(){
// 内部函数访问外部数据使用后到闭包
return 3.1415826;
}
function add(a,b){
return a + b;
}
// 讲两个方法封装成个对象返回
return {
add:add,
getPai:getPai
}
}
- 测试
<!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>
</head>
<body>
<script src="MyMath.js" type="text/javascript"></script>
<script>
var m = MyMath();
console.log(m.getPai());
console.log(m.add(1,2));
</script>
</body>
</html>
模块定义的另一种方式：
// 匿名函数自调用
(function MyMath(){
// pai 是个私有的数据，外部是无法访问的
var pai = 3.1415826
function getPai(){
// 内部函数访问外部数据使用后到闭包
return 3.1415826;
}
function add(a,b){
return a + b;
}
// 放到window中
window.MyMath = {
add:add,
getPai:getPai
}
})()
<!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>
</head>
<body>
<script src="MyMath.js" type="text/javascript"></script>
<script>
// 直接从window那
console.log(MyMath.getPai());
console.log(MyMath.add(1,2));
</script>
</body>
</html>
第三种方式：和第二种是一样的，把window作为实参传给匿名函数
// 匿名函数自调用
(function MyMath(window){
// pai 是个私有的数据，外部是无法访问的
var pai = 3.1415826
function getPai(){
// 内部函数访问外部数据使用后到闭包
return 3.1415826;
}
function add(a,b){
return a + b;
}
// 放到window中
window.MyMath = {
add:add,
getPai:getPai
}
})(window)
