对于模块加载:ES6、CommonJS、AMD、CMD的区别

运行和编译的概念

编译包括编译和链接两步。

编译,把源代码翻译成机器能识别的代码或者某个中间状态的语言。

比如java只有JVM识别的字节码,C#中只有CLR能识别的MSIL。还简单的作一些比如检查有没有粗心写错啥关键字了啊.有啥词法分析,语法分析之类的过程。

链接,是把编译生成的二进制文件,组合成为一个系统可以执行的可执行文件。

运行:

把编译出来的可执行文件代码在系统中执行的过程,此时被装载到内存中

(代码保存在磁盘上没装入内存之前是个死家伙.只有跑到内存中才变成活的).

运行时类型检查就与前面讲的编译时类型检查(或者静态类型检查)不一样.不是简单的扫描代码.而是在内存中做些操作,做些判断.

模块的加载

ES6、CommonJS、AMD、CMD指的都是一种规范。

CommonJS

为在浏览器环境之外构建JavaScript生态系统而产生的项目,比如服务器和桌面环境中。

一个单独的文件就是一个模块,代码都运行在模块作用域,如果想在多个文件分享变量,必须定义为global对象的属性。(不推荐)

//模块内部,module变量代表当前模块,它的exports属性是对外的接口
//其他文件加载该模块,实际上就是读取module.exports变量。
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
//PS:不能直接对module.exports赋值,只能给它添加方法或者属性

加载机制:

模块可多次加载,但模块的运行只在第一次加载时,运行结果被缓存了,以后再加载,就直接读取缓存结果。

通过require()同步加载依赖,导出API输出到当前模块,多个模块不能并行加载。

输入的是值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值

应用:

服务器端的Node.js遵循CommonJS规范,Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。

如果是浏览器环境,要从服务器加载模块,这是就必须采用异步模式。所以就有了 AMD 、CMD 的解决方案,AMD与CMD都借鉴了CommonJs

AMD 、CMD

AMD(Asynchronous Module Definition)异步模块加载,AMD 里,require 分全局 require 和局部 require。

CMD(Common Module Definition) 通用模块加载,提供模块定义及按需执行模块。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动

优劣:

AMD | 速度快 | 会浪费资源 | 预先加载所有的依赖,直到使用的时候才执行
CMD | 只有真正需要才加载依赖 | 性能较差 | 直到使用的时候才定义依赖

AMD:

define([‘./a‘, ‘./b‘], function(a, b) { //运行至此,a.js和b.js文件已下载完成 a模块和b模块已执行完,直接可用;
    a.doing();
    // 此处省略500行代码
    b.doing();
});

CMD:

define(function(require, exports, module) {
     var a = require("./a"); //等待a.js下载、执行完
     a.doing();
     // 此处省略500行代码
     var b = require("./b"); //依赖就近书写
     b.doing();
});

ES6

使用export或export default导出,import导入。

import是编译时调用,所以不能包含运行才知道结果的表达式等。

import是解构过程,但是目前所有的引擎都还没有实现import。

export与export default的区别:

1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中,export、import可以有多个,export default仅有一个
3.通过export方式导出,在导入时要加{ },export default则不需要

4.

(1)模块输出单个值,使用export default

(2) 模块输出输出多个值,使用export

(3) export default与普通的export不要同时使用

//a.js  export
export const str = "blablabla~";
export function log(sth) {
  return sth;
}

//b.js  import
import { str, log } from ‘a‘; //也可以分开写两次,导入的时候带花括号

//a.js  export default
const str = "blablabla~";
export default str;

//b.js  import
import str from ‘a‘; //导入的时候没有花括号

//本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含

import和require的区别

vue模块引入使用import,node模块引入使用require

遵循规范

  • require 是 AMD规范引入方式
  • import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法(最好去看文档

加载

  • require是运行时调用在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。所以require的是运行的结果,把结果赋值给某个变量。

    1. 通过require引入基础数据类型时,属于复制该变量。
    2. 通过require引入复杂数据类型时,数据浅拷贝该对象。
  • import是编译时调用,支持编译时静态分析,便于JS引入宏和类型检验,不能包含运行才知道结果的表达式等

写法

require / exports :

const fs = require(‘fs‘)
exports.fs = fs
module.exports = fs

import / export:

import fs from ‘fs‘
import {default as fs} from ‘fs‘
import * as fs from ‘fs‘
import {readFile} from ‘fs‘
import {readFile as read} from ‘fs‘
import fs, {readFile} from ‘fs‘

export default fs
export const fs
export function readFile
export {readFile, read}
export * from ‘fs‘

原文地址:https://www.cnblogs.com/yaoyao-sun/p/10815196.html

时间: 2024-10-13 05:14:18

对于模块加载:ES6、CommonJS、AMD、CMD的区别的相关文章

commonjs amd cmd的区别

一篇博客告诉你三者的区别:http://zccst.iteye.com/blog/2215317 告诉你三者同requirejs seajs的区别:http://blog.chinaunix.net/uid-26672038-id-4112229.html 本人道听途生的: commonjs的规范在node还没有产生以前,就有了,commonjs作为一个后端的规范,虽然后端的Js以前发展缓慢,但是commonjs这个规范还是比较完善的,随着Node的普及,commonjs被完全遵从和实现,com

再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6

Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果. CommonJS CommonJS定义的模块分为:  模块引用(require)    模块输出(exports)       模块标识(module) CommonJS Modules有1.0.1.1.1.1.1三个版本: Node.js.SproutCore实现了 Mo

模块加载规范对比

一.commonJS模块加载规范 CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作.由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用.浏览器端一般采用AMD模块加载方式或者ES6的模块加载标准. 模块导出方法(为防止混淆,建议一律采用module.exports而非exports): 模块导入方法:利用require //文件a.js module.exports

react开发中如何使用require.ensure加载es6风格的模块

1.问题提出:想通过require.ensure加载es6风格的模块? 2.出现问题:import方式本身就是静态设计方式.如果require进来的是commonjs模块或者amd则没问题,但项目只想es6一个书写风格,行吗? 遗憾的是:一般语言编译工具(如babel),不支持直接require一个es6风格的React组件. 怎么办?? 3.react代码分割方式: react代码分割常见使用router方式,但是单页面应用,不打算router下,可以用require.ensure进行按需加载

js与AMD模块加载

目的: 了解AMD规范与CMD规范,写一个模块加载器雏形. 基本概念: AMD是异步模块定义规范,而CMD是通用模块定义规范.其他的还有CommonJS Modules规范. 对于具体的规范,可以参考: https://github.com/amdjs/amdjs-api/wiki/AMD AMD规范 https://github.com/seajs/seajs/issues/242 CMD规范 http://www.zhihu.com/question/20351507/answer/1485

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

随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理复杂系统分解为更好的可管理模块的方式.简单来说就是解耦,简化开发,一个模块就是实现特定功能的文件,可以更方便地使用别人的代码,想要什么功能,就加载什么模块.模块开发需要遵循一定的规范 CommonJS规范 CommonJS就是一个JavaScript模块化的规范,是用在服务器端的node的模块规范,

前端模块化:CommonJS,AMD,CMD,ES6

模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块系统.参见阮一峰老师的文章 module-loader . 一.CommonJS Node.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module.exports.require.global.实际使用时,用module.exports定义当前模块对外输出

ES6模块加载

两种加载方式 加载方式 规范 命令 特点 运行时加载 CommonJS/AMD require 社区方案,提供了服务器/浏览器的模块加载方案 非语言层面的标准 只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化. 编译时加载 ESMAScript6+ import 语言规格层面支持模块功能 支持编译时静态分析,便于JS引入宏和类型检验 动态绑定 export命令 定义 export命令用于规定模块的对外接口 输出变量 1.       单个输出 // profile.js exp

JavaScript AMD 模块加载器原理与实现

关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者遵循 CMD规范.前者的规范产出比较适合于浏览器异步环境的习惯,后者的规范产出对于写过 nodejs 的同学来说是比较爽的.关于两者的比较,有兴趣的同学请参看玉伯在知乎的回答 AMD和CMD的区别有哪些.本文希望能按照 AMD 规范来简单实现自己的一个模块加载器,以此来搞清楚模块加载器的工作原理.