前端模块化小总结—commonJs,AMD,CMD, ES6 的Module

最新推荐文章于 2022-04-24 23:35:46 发布

屈小康

最新推荐文章于 2022-04-24 23:35:46 发布

阅读量139

点赞数

分类专栏： js ES6 文章标签： js export commonJS es6

本文链接：https://blog.csdn.net/qq_45557681/article/details/116950963

版权

js 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

ES6

4 篇文章 0 订阅

订阅专栏

什么是模块化？

模块化是一种处理复杂系统分解为更好的可管理块的方式。简单来说就是解耦，简化开发，一个模块就是实现特定功能的文件，可以更方便的使用别人的代码，想要什么功能，就加载什么模块，模块开发需要遵从一定的规范。

CommonJS规范

CommonJS就是一个JavaScript模块化的规范，是用在服务器端的node的模块规范，前端的webpack也是相对CommonJS原生支持的。

特点：1、模块输出的是一个值的拷贝，模块是运行时加载，同步加载。
2、commonjs模块的顶层this只向当前模块。

有2个API：

require：加载所要依赖的其他模块
module.exports或者exports：对外暴漏的接口。
注意
（1）.exports和module.exports的区别：exports是对module.exports的引用，不能直接给exports赋值，直接赋值无效，结果是一个空对象，module.exports可以直接赋值。示例：

module.exports = 123 //123
module.exports = function(){} //function
exports = 123 //{}
exports = function(){} //{}

(2).一个文件不能写多个module.exports，如果多写，对外暴漏的街口是最后一个。
(3).模块如果没有指定使用module.exports 或者 exports对外暴漏接口时，在其他文件就引用该模块，得到的是一个空对象{}。

AMD规范

AMD即Asynchronous Module Definition，中文名称是：“异步模块定义”的意思。它是一个在浏览器端模块化开发的规范，AMD是RequireJS在推广过程中对模块定义规范化产出，所以AMD规范的实现，就算require.js

特点：异步加载，不阻塞页面的加载，能并行加载多个模块，但不能按需加载，必须提前加载所需要的以来。

AMD的规范中两个重要的API：

define(id?,[]?,callback): //定义声明模块，参数id 模块id标识（可选），参数二是一个数组[]可选，依赖其他模块，最后是一个回调函数。
require（[module],calback）😕/加载模块，参数一是一个数组，指定加载的模块，参数二回调函数，模块加载完成后执行。

还有一个配置API：

//首先，引入requiresJS
 //requirejs.html
   <!DOCTYPE html>
//Math.js
// 定义了AMD 模式的模块,并且引入了jquery 模块 （这里的jquery属于AMD模式）
define(['jquery'],function(_){
    //define(['moudel1','moudel2'],callback())
    //如果一个模块不依赖其他模块,直接使用define()函数写，
    //如果一个模块依赖其他模块,define()第一个参数是数组
    //回调函数的参数对应第一个参数数组的值，按顺序
    console.log(_);//ƒ (a,b){return new m.fn.init(a,b)}
　　return { 
        add:function(x,y){
            return x+y;
        },
    }
})

// index.js (主入口)
//配置好加载路径
 require.config({
    baseUrl:"../js",
    paths:{    
        "index":"index", // 主入口文件 index: 
　　　　　"jquery":"jquery.min",// jquery 库，符合AMD模式(1.7 版本以上符合AMD)
        "maths":"Math", //自定义AMD 模式的模块
    }
})

//加载maths.js
   require(["maths"],function(_math){
    console.log( _math); // {add: ƒ }
})

CMD规范

CMD规范是由阿里的玉伯提出的，实现js库为sea.js，它和require非常类似，及一个js文件是一个模块，但是CMD加载的方式更加优秀，是通过按需加载的方式，而不是必须在模块开始加载所有的依赖。

seajs.config({
	alias:{'jquery',:'http://xxxx'}
});
define(function(require,exports,module){
	var $ = require('jquery')
})
seajs.use(['./a','./b'],function(a,b){

	a.doSomething()
	
	b.doSomething()
	
})

es6的module规范

ES6在语言标准层面上，实现了模块功能，而且非常简单，ES6到来，完全取代了CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。由Vue，Angular，React这些mvvm模式的框架发展，让前端的编程变的模块化，组件化。

特点：1、ES6模块中，顶层的this指向undefined，即不应该在顶层代码使用this。
2、自动采用严格模式“use strict”。遵循严格模式的要求。
3、ES6模块的设计思想是尽量的静态化，编译时加载，或者静态加载，编译时输出接口。
4、ES6模块的export和import命令可以出现在模块的任何位置，但是必须处于顶层。如果处于块级作用域，就会报错。
5、ES6模块输出的是值的引用

模块功能主要由两个命令构成：export和import
1、export：用于规定模块的对外接口
2、import：用于输入其他模块提供的功能

1、export命令

export.js
//
export function fn (x,y){
 return x + y
}
export var m = 1

export class calss1{}

function v1(){}
function v2(){}

export {
v1 as streamv1,
v2 as streamv2
}

2、import命令

main.js

import { m , fn , streamv1} from './require.js'

import * as all from './export.js'

3、export default 命令
本质上，export default就是输出一个叫做 default 的变量或方法

export default function foo (){
	console.log('foo')
}
//或者写成
function foo(){
	console.log('foo')
}
export default foo

// import 
import myfoo form './export-default.js'

比较一下默认输出和正常输出

	exports default function a1(){}
	
	import a1 from ''
	
	export  function a2 (){}
	
	import {a2} from ''

分析：上面两组代码
第一组是使用export default时，对应的import语句不需要使用大括号
第二组是不使用export default时，对应的import 语句需要使用大括号

屈小康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端模块化小总结—commonJs,AMD,CMD, ES6 的Module

什么是模块化？模块化是一种处理复杂系统分解为更好的可管理块的方式。简单来说就是解耦，简化开发，一个模块就是实现特定功能的文件，可以更方便的使用别人的代码，想要什么功能，就加载什么模块，模块开发需要遵从一定的规范。CommonJS规范CommonJS就是一个JavaScript模块化的规范，是用在服务器端的node的模块规范，前端的webpack也是相对CommonJS原生支持的。...
复制链接

扫一扫

专栏目录