JS模块化规范

JS模块化规范

 模块：将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起。模块的内部数据/实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。

commonJS

每个文件都可当做一个模块。
在服务器端：模块的加载是运行时同步加载的__>node.js
在浏览器端：模块需要提前编译打包处理，不然体验差，且浏览器端不认识require__>browserify

• 基本语法
  暴露模块（单个）: module.exports=value;
  暴露模块（多个）: exports.xxx=vaule
  本质是module.exports指向的内容（return module.exports）
  引入模块： 核心模块 第三方模块（node_modules） 自定义模块
• 实现

1. 基于服务器端
   –模块化编码，创建不同模块并暴露后，通过require引入js文件
2. 基于浏览器端
   –借助browserify打包处理js文件并在页面引入
   如: browserify js/src/app.js -o js/dist/bundle.js

AMD

Asynchronous Module Definition（异步模块定义）
专门用于浏览器端，模块的加载是异步的

• 基本语法
  定义暴露模块：
  1）定义没有依赖的模块

// AMD: 定义没有依赖的模块
// define(function(){return 模块})
define(function(){
    let name="da1.js"
    function getName(){
        return name;
    }
    // 暴露模块
    return {getName}
})

2）定义有依赖的模块

// AMD：定义一个有依赖的模块
/* 
define(['module1','module2'],function(m1,m2){
return 模块
})
*/
define([
    'da1'
], function(da1) {
    let msg='alerter.js';
    function showMsg(){
        console.log(msg,da1.getName());
    };
    // 暴露模块
    return {showMsg}
});

引入使用模块：

// AMD：引入使用模块
require(['module1','module2'],function(m1,m2){
使用m1/m2
})

• 实现–浏览器端
  下载require.js并导入；
  设置main.js引入其他模块，并导入

//main.js
(function(){
        requirejs.config({
            //baseUrl:'js/lib'；  //指向根目录下的绝对路径，可省略
            paths:{ //配置路径
                da1:'./da1',  //js后缀不要加，因为会自动默认加，如果再加的话就会找不到文件.js.js
                da2:'./da2'
            }
        })
        
        requirejs(['da2'],function(da2){
            da2.showMsg();
        });
    })()


<!-- AMD -->
    <!-- 引入require.js并指定js主文件的入口 -->
    <script data-main="./app.js" src="./require.js"></script>
      <!-- 引入main.js-->
    <script data-main="./app.js" src="./main.js"></script>

**第三方规范：

1. jQuery默认支持AMD规范，但此时会使小写的jquery,所以在paths的路径要写为jquery:’/’;
2. Angular默认不支持，要在主模块添加以下暴露：

shim:{
angular:{
exports:'angular'
}}

CMD

Common Module Definiation（通用模块定义）
专门用于浏览器端，模块的加载是异步的，
模块使用时才会加载执行

• 基本语法
  定义暴露模块：
  
  引入使用模块：
  
• 实现-浏览器端
  通过scrip标签引入主模块main.js

ES6

• 基本语法
  暴露模块：export

//分别暴露
export function foo(){
    console.log('foo() module1');
};
export function bar(){
    console.log('bar() module1');
}
export let arr=[1,2,3]

//统一暴露
function fun(){
    console.log('fun() mdoule2');
}
function fun2(){
    console.log('fun2() module2');
}
export{fun,fun2};

/* 
默认暴露：可以暴露任意数据类型，暴露什么数据接收到的就是什么数据;
只能使用1次，可以把所有的数据都放入内部
*/
// 语法：export default value;
export default ()=>{
    console.log('module3');
}
或
export default{

}

引入使用模块：import

// 语法： import xxx from '路径'

// 分别暴露/统一暴露的情况必须用对象解构赋值的形式
import {foo,bar} from './module'
import {fun,fun2} from './module2';

// 默认暴露 可以直接import
import module3 from './module3'

foo()
bar()
fun()
fun2()
module3()

• 实现-浏览器端：
  通过构建工具Babel将ES6编译为ES5代码，压缩编译后script标签引入