欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6

程序员文章站 2022-05-04 11:23:42
前言:模块化开发需求 在JS早期,使用script标签引入JS,会造成以下问题: 1. 加载的时候阻塞网页渲染,引入JS越多,阻塞时间越长。 2. 容易污染全局变量。 3. js文件存在依赖关系,加载必须有顺序。项目较大时,依赖会错综复杂。 4. 引入的JS文件过多,不美观,且不易于管理。 一、Co ......

前言:模块化开发需求

在js早期,使用script标签引入js,会造成以下问题:

  1. 加载的时候阻塞网页渲染,引入js越多,阻塞时间越长。
  2. 容易污染全局变量。
  3. js文件存在依赖关系,加载必须有顺序。项目较大时,依赖会错综复杂。
  4. 引入的js文件过多,不美观,且不易于管理。

一、commonjs规范

commonjs modules/1.0规范,服务器端规范。

node.js推广使用。该规范的核心是:允许模块使用require方法来同步加载所依赖的其他模块,然后通过exports或module.exports导出需要暴露的接口。

特点:

  1. 一个模块是一个文件

  2. 使用module.exports或exports导出模块

    // module.js
    exports.add = (a, b) => a+b
    
    module.exports = {
      add: (a, b) => a + b
    }
    
  3. 使用require加载模块

    a. require命令第一次加载模块时,执行整个脚本,在内存中生成对象
    b. 多次执行require命令再次加载该模块时,不会再执行该脚本,直接从缓存中取值
    c. commonjs加载模块是同步加载模块
    

tips:

  1. 为什么commonjs规范不适合作为浏览器的规范

    由于commonjs是同步加模块,在服务端加载模块时都是从本地硬盘中加载,读取速度很快。但是在浏览器端加载模块时,需要请求服务器端,涉及网速、代理的问题,一旦等待时间过长,浏览器会处于“假死”状态。
    

二、adm规范

amd(asynchronous module definition)异步模块定义,客户端规范。
采用异步方式加载模块,模块加载不影响它后面语句的代执行。

amd是require.js在推广使用过程中对模块定义规范化的产物。

在使用时,需引入

特点

  1. 使用define()定义模块

    /**
     * @param id 模块名称,如果为空,模块的名字默认为模块加载器请求的指定脚本名
     * @param dependencies 模块依赖
     * @param factory 工场函数,模块初始化执行的函数或对象
     */
    define(id? dependencies? factory)
    
  2. 使用require加载模块

    require([module], callback)
    

    amd是依赖前置模块

三、cmd规范

cmd(common module definition)通用模块定义,异步加载模块。

cmd是sea.js在推广过程中对模块定义的规范化产物。

在使用时,需引入

特点:

  1. 使用define()定义模块,使用require()加载模块

    define(function (require, exports, module) {
    	let a = require('a')
    	let b = require('b')
    	exports.eat = a.eat
    	exports.run = b.run
    })
    

    cmd模块加载是推崇就近依赖的,需要到某个模块时再进行require加载

  2. 使用seajs.use加载使用模块

    seajs.use(id, callback?)
    

四、umd规范

umd(universal module definition)通用模块定义,为了兼容amd、cmd和无模块化开发规范

/**
 * umd-universal module definition 通用模块定义
 * */
 (function (root, factory) {
	 // 判断是否是amd/cmd
	 if (typeof define === 'function') {
		 define([], factory)
	 } else if (typeof exports === 'object') {
		 // node commonjs规范
		 module.exports = factory()
	 } else {
		 // 浏览器环境
		 root.someattr = factory
	 }
 })(this, function () {
	 let add = function (a, b) {
		 return a + b
	 }
	 return {
		 add,
		 module: 'umd'
	 }
 })

五、es6模块

es6通过imort和export实现模块的输入与输出,import命令用于输入其他模块提供的功能,export命令用于规定模块对外的接口。

特点:

  1. 使用export导出模块

    // test.js
    export let module = 'es6 module'
    export let hello = function () {}
    let demo = function () {}
    // 默认导出
    export default demo
    
  2. 使用import导入模块

    // 导入默认模块
    import demo from './test.js'
    
    // 导入指定模块
    import { hello, module } from './test'
    
    // 导入指定模块,并重命名
    import { hello as hi, module } from './test.js'
    
    // 导入全部模块,并重命名
    import * as test from './test.js'
    

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏转发、点击右下角按钮在看,推荐给更多小伙伴呦,欢迎多多留言交流...

胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。
胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!

长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!

JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6