模块化

模块化的发展过程

1
2
3
4
5
6
var moduleObj = {
    userName: 'zhangsan',
    fn: function () {
        console.log('hello world')
    }
}

使用方式

1
2
3
4
5
6
7
8
9
10
<html>
    <head>       
    </head>
    <body>
        <script src="a.js"></script>
        <script>
         moduleObj.fn()
        </script>
    </body>
</html>

立即执行函数的方式

通过立即执行函数的方式为模块提供私有空间

1
2
3
4
5
6
7
8
9
10
11
12
13
; (function () {
    var userName = 'lisi';
    function fn1() {
        console.log(userName);
    }
    function fn2() {
        console.log('hello world')
    }
    window.moduleObj = {
        fn1: fn1,
        fn2: fn2
    };
})()

模块化规范说明

CommonJS它是node.js中提到的一个规范。也就是说我们在写Node.js的时候，必须符合CommonJS的规范。

1
2
3
4
5
CommonJS规范要求
1、一个文件就是一个模块
2、 通过module.exports导出成员项
3、通过require函数加载模块
4、每个模块都有单独的作用域。

AMD(Asynchronous Module Definition),翻译过来就是异步的模块定义规范。

1
2
3
4
5
6
7
8
9
10
11
define('moduleA',['jquery','./moduleB'],function($,moduleB){
           return{
               fn:function(){
                   // $('p')

               }
           }
       })
       require(['./moduleA'],function(moduleA){
           moduleA.fn();
       })

ES Module基本使用

1
2
3
4
1、自动采用了严格模式
2、每个es module 都是运行在单独的私有的作用域中
3、`ES module`通过CORS的方式请求外部的JS模块，如果服务端不支持`CORS`，则会出现跨域的问题。
4、ES module的script标签会延迟执行脚本，类似于添加了defer.

导出的注意事项

1
2
3
1、注意语法的问题
2、通过export 对成员进行导出操作，导出的是成员的引用
3、导出的成员是只读的，那么我们导入了以后是不能对成员进行修改的。

导入的注意事项

1
2
3
4
5
6
7
8
9
10
11
12
1、import后面的from跟的是导入的文件的路径，并且是一个完整路径。
2、如果我们这里是执行某个模块，并不需要提取其中的成员
import {} from './module.js'
import './module.js
3、如果某个模块中导出的成员比较多，同时我们都需要这些导出的模块成员，
import * as m from './module.js'
4、如果需要进行动态的导入
import('./module.js').then(function(module) {
        console.log(module.)
   })
 5、在进行导出的时候，使用了export 和export default,导入import应该怎样进行处理？
 import title, { userName, userAge } from "./module.js";