【JS】JavaScript模块化

前言

1.什么是模块化

将一个复杂的程序拆分成多个文件（js），最终合在一起

2.为什么要模块化

• 降低复杂度，提高解耦性
  • 高内聚（多个文件提供一个功能，要使他们配合得更加紧密）
  • 低耦合（不同功能之间的影响要拉到最低）
• 避免了命名冲突
• 提高了复用性、可维护性
• 更好的分离，按需加载

3.模块化规范

• 模块化规范有两种：CommonJS和ES6
  • CommonJS既可在服务端运行，也可在浏览器端运行
  • ES6只能在浏览器运行
• 每个文件都是一个模块
• 服务器端：模块化的代码可以直接运行
• 浏览器端：模块化的代码需要经过Browserify编译

CommonJS

1.基本语法

• 只要有node环境就会有模块化语法

• 暴露语法

  • module.exports和exports

  • 两者都是指向同一个空对象

    console.log(exports === module.exports) //true
    两者默认指向的是一个共同的空对象
    

  • module.exports使用方法

    let name = 'ts'
    //方法一:直接暴露
    module.exports.sayName = function sayName () {
    	console.log(name)
    }
    //方法二:直接修改对象
    module.exports = {
    	sayName(){
    		console.log(name)
    	}
    }
    
    其实两种方法本质是一样的,都是直接修改了module.exports对象
    

  • exports的使用方法

    //exports是因为module.exports写起来过于繁琐而产生的,总体写法和module.exports一致
    exports.sum = function (a,b){
    	console.log(a+b)
    }
    

  • 注意当一个文件对module.exports和exports都进行了使用,以module.exports为准

• 引入语法

  • 引入自定义模块(需要写路径)

    const 名 = require('模块路径')
    

  • 引入第三方模块(直接写模块名)

    //先要下载第三方模块
    //终端 --- npm i uniq
    const uniq = require('uniq')
    

2.浏览器端语法

• 利用browserify实现CommonJS在浏览器执行

• browserify原理实际是，加上了require的描述让浏览器知道了require的用法

• 使用browserify流程

  • 安装：全局安装

    npm i browserify -g
    

  • 编译指定文件

    browserify 需要编译的文件的路径 -o build.js
    -0:输出
    build:一般经过修改的都叫build.js
    

ES6模块化(推荐)

• 需要借助browserify和babel

  • 全局安装babel-cli,Browserify

    npm install babel-cli browserify -g
    //cli是command line interface的简写意为命令行接口
    

  • 局部安装babel-preset-es2015

    npm install babel-preset-es2015
    

  • 定义.babelrc文件

    {
    	'presets':["es2015"]
    }
    

  • Babel翻译es6

    //在文件中执行
    babel 文件地址 -d ./build
    //在文件中生成一个build文件存放修改好的js
    

  • 生成的build中的js实际上还是CommonJS的require写法,浏览器依旧不认识,所以还需要Browserify来让浏览器认识require

    browserify ./build/app.js -o ./build/build.js
    

1.基本语法

• 暴露语法

  • 分别暴露

    let name = 'ts'
    export ts;
    export function (){
    	console.log(name)
    }
    

  • 统一暴露(相比于分别暴露,他的名字可以自定义)

    const name = 'ts'
    const person = {
    	name : 'ts',
    	age : 23
    }
    function getStu(){
    	console.log(person)
    }
    //统一暴露
    //1.精简版 ---用的多
    export {name,person,getStu}
    //2.完整版
    export{name as name,person as person,getstu as getStu}
    

  • 默认暴露(只能暴露一次)

    export default 表达式
    //例如 export default {}
    

• 引入语法

  • 引入分别暴露

    //写法一:展开写法(注意:不是解构赋值,只是固定的写法)
    //解构赋值的必要条件是:关键字 {} = 对象
    //但是引入分别暴露时除了{}其他三个条件都不满足
    import {name,age,...} from '文件本地路径'
    
    //写法二:重命名
    import {name as n} from '文件本地路径'
    log(n)
    
    //写法三:
    import * as obj from '文件本地路径'
    obj是一个对象
    

  • 引入统一暴露(和分别暴露一样)

    //和分别暴露一样
    import{name,...} from '文件地址'
    

  • 引入默认暴露

    import 名 from '文件地址'
    名:默认暴露的数据是什么类型,名就是什么类型
    //ES6模块化中无法直接对imort的数据进行解构
    

• 混合使用

//暴露
//1.分别暴露
export let name = 'ts'
export let age = 22

//2.统一暴露
function sayname (){
	console.log(name)
}
function sayage (){
	console.log(age)
}
export {sayname.sayage}

//3.默认暴露
export default {
    name:'ts',
    age:22
}


//引入
//单独暴露和统一暴露使用相同方法引入就可以,但是默认引入需要单独写在外面
import module111,{name,age,sayname,sayage} from '文件地址'