- A+
所属分类：Web前端
1、模块化的发展过程
var moduleObj = { userName: 'zhangsan', fn: function () { console.log('hello world') } } 使用方式
<html> <head> </head> <body> <script src="a.js"></script> <script> moduleObj.fn() </script> </body> </html> 立即执行函数的方式
通过立即执行函数的方式为模块提供私有空间
; (function () { var userName = 'lisi'; function fn1() { console.log(userName); } function fn2() { console.log('hello world') } window.moduleObj = { fn1: fn1, fn2: fn2 }; })() 2、模块化规范说明
CommonJS它是node.js中提到的一个规范。也就是说我们在写Node.js的时候，必须符合CommonJS的规范。
CommonJS规范要求 1、一个文件就是一个模块 2、 通过module.exports导出成员项 3、通过require函数加载模块 4、每个模块都有单独的作用域。 AMD(Asynchronous Module Definition),翻译过来就是异步的模块定义规范。
define('moduleA',['jquery','./moduleB'],function($,moduleB){ return{ fn:function(){ // $('p') } } }) require(['./moduleA'],function(moduleA){ moduleA.fn(); }) 3、ES Module基本使用
1、自动采用了严格模式 2、每个es module 都是运行在单独的私有的作用域中 3、`ES module`通过CORS的方式请求外部的JS模块，如果服务端不支持`CORS`，则会出现跨域的问题。 4、ES module的script标签会延迟执行脚本，类似于添加了defer. 4、导出的注意事项
1、注意语法的问题 2、通过export 对成员进行导出操作，导出的是成员的引用 3、导出的成员是只读的，那么我们导入了以后是不能对成员进行修改的。 5、导入的注意事项
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"; 
