【js 模块化】CommonJS / ES6模块化

目录

1、模块化入门

1.1 什么是模块化

1.2 为什么要模块化

1.3 模块化带来的问题

2、模块化规范

2.1 CommonJS(浏览器和服务器端)

2.1.1 规范

2.1.2 基本语法

2.2 ES6 模块化 (常用)

2.2.1 规范

2.2.2 基本语法

1、模块化入门

1.1 什么是模块化

  1. 将一个复杂的成像依据一定规则拆分成单个文件,最终组合在一起。
  2. 这些拆分的文件就是模块,模块内部数据是私有的,只是向外部暴露一些方法与外部其他模块通信。

1.2 为什么要模块化

  1. 降低复杂度,提高解耦性
  2. 避免命名冲突
  3. 更好的分离,按需加载
  4. 更高复用性,高维护性

1.3 模块化带来的问题

  1. 请求过多
  2. 依赖模糊 (合)
  3. 难以维护

先拆再合

2、模块化规范

一个大的项目必定会使用模块化技术,使用模块化就会使用相应的模块化规范
现在比较流行的模块化规范有两种:CommonJS、 ES6

2.1 CommonJS(浏览器和服务器端)

2.1.1 规范

  1. 官网: http://wiki.commonjs.org/wiki/modules
  2. 每个文件都是一个模块
  3. CommonJS 模块化的代码 既可以在服务端运行,也可以在浏览器端运行。
  4. 服务器端:模块化代码可以直接运行
  5. 浏览器端:模块化的代码要经过 Browserifyhttp://browserify.org) 编译。

2.1.2 基本语法

1、export 模块暴露数据

第一种方式:module.exports = value(value为要交出去的变量、对象、函数等
第二种方式:module.xxx = value

2、import 引入模块
引入第三方模块;require(xxx),xxx 为模块名
引入自定义模块:require(xxx),xxx 为模块文件路径

3、内置关系

console.log(exports == module.exports);  // true
【js 模块化】CommonJS / ES6模块化_第1张图片

同时暴露多个

module1.js

/*
    module1 使用 module.exports = xxx 去暴露
*/
// module.exports 和 exports不能混用,若混用了,以 module.exports为主

const data = 'athui'
const msg = 'hello'
module.exports = {
	showData(){
		console.log(data);
	},
	showMsg(){
		console.log(msg);
	}
}
exports.x = 100// 不起效

module2.js

/*
    module2 使用 exports.xxx = value 去暴露,value是暴露的内容,xxx是名字
*/
exports.sum = function(a, b){
	console.log(a + b);
}
exports.sub = function(a, b){
	console.log(a - b);
}
export.a = 1

app.js

// 引入的内容是什么,取决的暴露的是什么

// 引入的同时解构赋值
const {showData, showMsg} = require('./module1') // 引入自定义模块
const {sum, sub, a} = require('./module2')

// 引入第三方包
const uniq = require('uniq') 
const arr = [1,2,10,5]
console.log(uniq(arr)); //去重 字典排序 1 10 2 5

【node 环境下运行】node app.js
【浏览器环境下运行】执行
index.html

  1. 全局安装 browserify:npm i browserify -g
  2. 编译指定文件 browerserify ./app.js -o ./build.js
  3. 在 html 页面中引入 build.js

【js 模块化】CommonJS / ES6模块化_第2张图片

index.html

2.2 ES6 模块化 (常用)

2.2.1 规范

  1. 每个文件都是一个模块
  2. 要借助 Babel 和 Browserify 依次编译代码,才能在浏览器端运行
  3. Bebel 中文网:https://www.bebeljs.cn/
    Babel 可以把 es6 转成 es5

2.2.2 基本语法

  1. 模块暴露数据
    1. 分别暴露 (按需暴露) export 暴露内容
    2. 统一暴露 export {暴露内容1,暴露内容2}
    3. 默认暴露 export defalut 暴露内容

1. 分别暴露 (按需暴露)

export const data = 'asheh'
export const msg = 'ssss'
export function showMsg(){
	console.log(msg);
}
export function showData() {
	console.log(');
}

补充:准备相关依赖包(为编译代码做准备)
全局安装:babel-cli、Browserify :npm install babel-cli browserify -g
局部安装:babel-preset-es2015: npm install babel-preset-es2015
建立 .babelrc 文件

{
	"presets":["es2015"]
}

执行 babel ./  -d  ./build   ./代表当前文件 -d代表编译 ./build代表输出文件夹
翻译 browserify ./build/app.js -o ./build/build.js

【js 模块化】CommonJS / ES6模块化_第3张图片

babel : es6 -> CJS (es5)

browserify: CJS -> 浏览器端可以运行的

2. 统一暴露 export {暴露内容1,暴露内容2}

module3.js

const school = '尚硅谷'
const person = {
	name:'老刘',
	age:18,
	sex:'女'
}
function getLaoliu(){
	console.log(person)
}
//统一暴露--常用`在这里插入代码片`
export {school, person, getLaoliu}
//支持改名
export {school as school ,person as person, getLaoliu as getLaoliu}

3. 默认暴露 (适合只暴露一个数据) 只能暴露一次

module4.js

export default {
	name:"wc",
	age:5
}

同时使用

module5.js

// [分别暴露]
export const teacher1 = {name:'强哥', age:15}
export const teacher2 = {name:'ke 哥', age:35}

// [统一暴露]
const stu1 = {name:'网哥', age:25}
const stu1 = {name:'掌声', age:33}
export {stu1,stu2}

// [默认暴露]
export default{
	school:'上海dax',
	address:'shanghai',
	subject:['计算机','java','大数据']
}

引入方式

app.js

// 引入【分别暴露】模块
import {data,msg,showData,showMsg} form './module1' // 注意不是解构赋值

// 引入【分别暴露】模块 + 打包加入
import * form './module1'

// 引入【分别暴露】模块 + 重命名
import {data as data2} form './module2'

// 引入【统一暴露】模块 (和上面三种一样)
import {school as sc,person,getLaoliu} form './module3'

// 引入【默认暴露】模块 
import module4 form './module4'

// 引入多种暴露方式
import module5,{teacher1,teacher2,stu1,stu2} from './module5'

你可能感兴趣的:(前端,JavaScript,javascript,前端,模块化)