ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成:export 和 import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

/** 定义模块 math.js **/

var n = 1;

function add(){

return 2+3

}

export {
n,
add
} /** 引用模块 main.js**/ import { n , add } from './math.js'

如上例所示,使用import命令的时候,用户需要知道所要加载的变量名或函数名。其实ES6还提供了export default命令,为模块指定默认输出,对应的import语句不需要使用大括号。这也更趋近于ADM的引用写法。

/** export default 定义输出  math.js**/
//输出
export default { basicNum, add }; /** 引用模块 main.js**/ //引入
import math from ‘./math‘; alert(math.n); math.add();
}

CommonJS

Node.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module、exports、require、global。实际使用时,用module.exports定义当前模块对外输出的接口(不推荐直接用exports),用require加载模块。

//定义模块 math.js
var n = 0;
function add(a, b) {
return a + b;
}
module.exports = { //在这里写上需要向外暴露的函数、变量
add: add,
n: n
} /** 引入模块 require **/ //引用自定义的模块时,参数包含路径,可省略.js
var math = require(‘./math‘);
math.add(2, 5); //引用核心模块时,不需要带路径
var http = require(‘http‘);
http.createService(...).listen(3000);

import 时候的路径问题(新手容易碰到)

  • 开始玩的时候,总是出现 cannot find module 问题,原来 在 import 的时候 如果不使用相对路径或者绝对路径,node默认会去node_modules/文件夹下去找,例如:

import * as obj from 'nav' // node 会试着去寻找 node_modules/nav.js 文件,如果没有找到会接着找 nav 文件夹,如果文件夹存在,会找文件夹内的index.js文件,找不到就会报错 // 正确写法
import * as obj from './exports'

ES6的模块化规范和CommonJS的模块化规范的差异的更多相关文章

  1. javascript模块化编程:CommonJS和AMD规范

    AMD规范,异步模块定义.与CommonJS规范齐名并列. 作用都是利于JavaScript的模块化编程. 模块化编程的好处就是: 1.可重用 2.独立 3.能解决加载的依赖性问题 4.能解决重复加载 ...

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

    随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...

  3. ES6入门十二:Module(模块化)

    webpack4打包配置babel7转码ES6 Module语法与API的使用 import() Module加载实现原理 Commonjs规范的模块与ES6模块的差异 ES6模块与Nodejs模块相 ...

  4. 前端模块化IIFE,commonjs,AMD,UMD,ES6 Module规范超详细讲解

    目录 为什么前端需要模块化 什么是模块 是什么IIFE 举个栗子 模块化标准 Commonjs 特征 IIFE中的例子用commonjs实现 AMD和RequireJS 如何定义一个模块 如何在入口文 ...

  5. 一览js模块化:从CommonJS到ES6

    本文由云+社区发表 模块化是指把一个复杂的系统分解到一个一个的模块. 模块化开发的优点: (1)代码复用,让我们更方便地进行代码管理.同时也便于后面代码的修改和维护. (2)一个单独的文件就是一个模块 ...

  6. Javascript模块化编程系列三: CommonJS & AMD 模块化规范描述

    CommonJS Module 规范 CommonJS 的模块化规范描述在Modules/1.1.1 中 目前实现此规格的包有: Yabble,CouchDB,Narwhal (0.2), Wakan ...

  7. Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

  8. JS 模块化- 05 ES Module & 4 大规范总结

    1 ES Module 规范 ES Module 是目前使用较多的模块化规范,在 Vue.React 中大量使用,大家应该非常熟悉.TypeScript 中的模块化与 ES 类似. 1.1 导出模块 ...

  9. js模块化入门与commonjs解析与应用

    JS模块化的基本原理 commonjs规范 commonjs在前端模块化中的基本使用 AMD与CMD规范剖析博客链接 一.JS模块化基本原理 在JS没有提出来模块化的时候,开发JS项目比较简单,同时也 ...

随机推荐

  1. H5 拖拽,一个函数搞定,直接指定对象设置可拖拽

    页面上,弹个小窗体,想让它可以拖拽,又不想 加载一堆js,就简单的能让他可以拖动? 嗯,下面有这样一个函数,调用下就好了! 1. 先来说说 H5的 拖拽 在 HTML5 中,拖放是标准的一部分,任何元 ...

  2. maxscale读写分离

    今天,写写mysql兄弟公司maridb开发的一个读写分离,既然是兄弟,那也适用于mysql. 1.安装依赖包 yum -y install gcc gcc-c++ ncurses ncurses-d ...

  3. 【学习笔记】Struts2 类型转换

    为什么需要类型转换 在基于HTTP协议的Web应用中 客户端请求的所有内容(表单中提交的内容等)都以文本编码的方式传输到服务器端但服务器端的编程语言(如Java)有着丰富的数据类型 如 int boo ...

  4. 软AP的实现------hostapd的编译运行

    最近要给摄像头做一个软ap,让手机能够连上这个热点,从而能够与摄像头进行通信. 1.什么是hostapd : hostapd能够使得无线网卡切换为master模式,模拟AP(通常可以认为是路由器)功能 ...

  5. 《android开发艺术探索》读书笔记(十二)--Bitmap的加载和Cache

    接上篇<android开发艺术探索>读书笔记(十一)--Android的线程和线程池 No1: 目前比较常用的缓存策略是LruCache和DiskLruCache,LruCache常被用作 ...

  6. HDU - 2154 线性dp

    思路:0表示A,1表示B,2表示C,d(i, j)表示在第j次时正好到达i. AC代码 #include <cstdio> #include <cmath> #include ...

  7. MongoDB,分组,聚合

    使用聚合,db.集合名.aggregate- 而不是find 管道在Unix和Linux中一般用于将当前命令的输出结果作为下一个命令的参数.MongoDB的聚合管道将MongoDB文档在一个管道处理完 ...

  8. DevExpress XtraGrid如何使单元格只读?

    -----------------------------从别人那里copy来的-------------------------------------------------- 1.   设置Gr ...

  9. OpenStack Ironic 常见问题

    whole disk和partition 镜像 whole disk镜像部署可以支持windows,但是不能自定义分区(可以通过cloud-init实现),分区表是做镜像的人确定好的,partitio ...

  10. jQuery手机发送验证码倒计时代码

    <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script type=&q ...