前端模块开发

矫情吗；* 2021-09-07 06:10 371阅读 0赞

### 前端模块开发 ###

*  一、什么是模块化开发
 *  二、模块化开发规范
 *   *  1.AMD规范
     *  2.CMD规范
     *  3.CommonJS
     *  4.ES6模块化规范
 *  三、模块的导出和导入
 *   *  1.默认导出和默认导入
     *  2.模块的按需导出和按需导出
     *  3.两者结合使用
     *  4.按需导入别名

# 一、什么是模块化开发 #

传统开发主要问题  
1.命名冲突，多个js文件种的全局变量有冲突问题。  
2.文件依赖，多个js文件必须按顺序下载

于是引申出模块化开发  
模块化开发就是把单独的一个功能封装到一个模块（文件中），模块之间相互隔离，但是可以通过特点的接口公开内部成员，可以依赖别的模块

# 二、模块化开发规范 #

## 1.AMD规范 ##

浏览器端的模块化  
Require.js

## 2.CMD规范 ##

Sea.js

## 3.CommonJS ##

node模块化开发的规范  
1.模块分为单文件模块和包  
2.模块成员导出：module.exports和exports  
3.模块成员导入：require(‘模块标识符’)

## 4.ES6模块化规范 ##

上面的三种都存在一定的差异性和局限性，并不是浏览器和服务通用的模块化标准  
amd和cmd只适用于浏览器端的js模块化  
commonJS适用于服务器端的js模块化

因此，es6语法规范中，在语言层面上定义了es6模块化规范，是浏览器的和服务器端通用的模块化开发规范，

es6模块化规范中定义：  
每个js文件都是一个独立的模块  
导入模块成员使用import关键字  
暴露模块成员使用export关键字  
这是大一统的模块化规范，都使用这个。

# 三、模块的导出和导入 #

## 1.默认导出和默认导入 ##

//当前文件时dochu.js
    //这是定义的这个模块的私有成员
    
    let a = 10
    let b = 15
    let c = 20
    function fn(){ }
    
    
    //export default是导出这个模块，即这个文件，并将私有的成员，放在这个模块对象中，暴露出去。
    //没有添加到这个模块对象中的成员，外界是访问不到的。比如b这个变量
    export default { 
        a,
        c,
        fn
    }
    //一个模块中只能有一个export default这个命令，多了会报错。
    //要是一个都没有，不会报错，外界引入的是一个空对象。

//这是默认导入文件，daoru.js
    import   m  from './doachu.js'
    //m是用来接受这个模块的对象的一个名称，相当于一个变量名，自己定义，合法即可
    console.log(m)
    //{a:10,c:20,fn:funciton(){}}

## 2.模块的按需导出和按需导出 ##

//当前文件时daochu.js
    
    //这是按需导出变量a
    export let a = 10
    //这是按需导出变量b
    export let b = 20
    //按需导出方法
    export function say = function(){ }

//当前文件是daoru.js
    import {  a,b,say}  from    ' daochu.js'
    
    
    //按需导入的名称一定要和按需导出的名称一致，不能乱写

## 3.两者结合使用 ##

一个模块中可以同时拥有按需导出和默认导出，按需导出可以是多个，而默认导出只能有一个

//当前是daochu.js
    let a = 10
    let b = 20
    function fn(){ }
    
    export default{ 
    a,
    b,
    fn
    }
    export let c = 30
    
    export function fn2(){ }

//当前是daoru.js
    import m1,{ c,fn2} form './daochu.js'
    //m1接收的是export default导出的，而后面的{c,fn2}是接受export导出的

## 4.按需导入别名 ##

import m1,{ c as d,fn2 as f} form './daochu.js'
    
    //这时候就不能使用c和fn2了，要用as后面的别名。这样可以防止命名冲突，由于按需导入不能直接改名，所以要用as改名

5.直接导入并执行代码  
有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴漏的成员，此时，可以直接导入 并执行代码。

//当前是daochu.js
    
    for(let i =0;i<3;i++){ 
       console.log(i)
    }

//当前是daoru.js
    import './daochu.js'
    
    //直接import文件即可