es6之模块化

不会杀鸡的前端
72 阅读2分钟 
前言：今天小编谈谈模块化，模块化开发大家应该都熟，但是学习es6模块化这一关还是很重要的
  1. 模块化： 模块化是指将一个大的程序文件拆分成许多个小的文件，然后将小的文件组合起来
  2. 模块化的好处：

    （1）防止命名冲突

    （2）提高代码复用率

    （3）提高项目可维护性

在实际项目开发里如果所有代码配置全部放在一个文件或者使用单文件，在前端开发世界里所有类名、方法名、
属性名、变量在一个文件时取名将成为一个比较大的工作量，而且这些因素容易重复，导致代码可运行性不高，对
程序猿不太友好，对未来项目可维护性不高，代码量过大的问题。这一系列的问题都让我们的工作都迫使我们使用
模块化开发。在es6之前使用模块化规范有NodeJs、CommonJs、AMD,Es6之后Vue等框架也使用了模块化开发。

3.模块化的暴露方式：

    （1）分别暴露方式： 在每一个变量、属性前加上export，进行暴露

export let a=1
export function car(){
    console.log('模块化开发')
}

      (2)  统一暴露：在代码末尾或者文件末尾加上export{变量名， 属性名}

//app.js
let a =2
function xxx(){
    return{
        method: 'get',
        url: 'xxxx/xxxxx',
        data: data
    }
}
export { a, xxx  }

    ( 3 ) 默认暴露： export default{ 对象，变量，字符串 }

export default{
    a: 5,
    url: 'xxxxx',
    port: 'port'
}

注意： 在实际前端开发中我们对接口的暴露就很常见，在前端世界里我们可以使用的暴露方式也有三种，只是为了方便或者平时编码习惯问题我们只见到其中一两种

4.模块的引入方式

（ 1 ）通用方式： import *  from './xxx/xx.js'

  ( 2  ) 解构赋值形式

      如果引入过程中重名可以使用as取别名方式进行引入

import { addUser, teach } from '../../src/user.js'

如果teach在实际中重名： import { addUser, teach as teachs } from '../../user.js'

（ 3 ）默认暴露引入：因为defalut有可能引起冲突，所以需要取别名引入

import { default as A }  from '../src/dist/app.js'

 （ 4 ）简便形式：针对性暴露

import xx from '../src/dist/app.js'

5. 浏览器使用Es6模块化方式

<script type="module"></script>

<script src="../src/app.js" type="module"></script>
//app.js
import xx from '../src/dist/app.js'
import xx from '../src/dist/app.js'

6.引入npm包（以babel包为例）,是模块化开发的必要行为

下载npm包npm install babel
引入import babel from 'babel'

7.babel对ES6模块化代码的转换

浏览器编译不了ES6的新特性，所以需要babel插件进行转换
avatar
文章
阅读
粉丝