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

  1. /** 定义模块 math.js **/
  2. var n = 1;
  3. function add(){
  4. return 2+3
  5. }
  6. export {
  7. n,
  8. add
  9. }
  10. /** 引用模块 main.js**/
  11. import { n , add } from './math.js'

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

  1. /** export default 定义输出 math.js**/
  2. //输出
  3. export default { basicNum, add };
  4. /** 引用模块 main.js**/
  5. //引入
  6. import math from ‘./math‘;
  7. alert(math.n);
  8. math.add();
  9. }

CommonJS

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

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

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

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

  1. import * as obj from 'nav'
  2. // node 会试着去寻找 node_modules/nav.js 文件,如果没有找到会接着找 nav 文件夹,如果文件夹存在,会找文件夹内的index.js文件,找不到就会报错
  3. // 正确写法
  4. 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. ASP.NET MVC5+EF6+EasyUI 后台管理系统(89)-EF执行SQL语句与存储过程

    这一节,我们来看看EF如何执行SQL语句与读取存储过程的数据,可能有一部分人,还不知道EF如何执行存储过程与原生SQL语句! 我们什么时候要直接使用原生的SQL语句? 返回值过于复杂 过于复杂的联合查 ...

  2. 高可用的MongoDB集群

    1.序言 MongoDB 是一个可扩展的高性能,开源,模式自由,面向文档的数据库. 它使用 C++编写.MongoDB 包含一下特点: l  面向集合的存储:适合存储对象及JSON形式的数据. l ...

  3. Shiro 核心功能案例讲解 基于SpringBoot 有源码

    Shiro 核心功能案例讲解 基于SpringBoot 有源码 从实战中学习Shiro的用法.本章使用SpringBoot快速搭建项目.整合SiteMesh框架布局页面.整合Shiro框架实现用身份认 ...

  4. hibernate学习(六) flush()和clean()区别和使用

    session.flush()是强制和数据库同步 session.clean()是清除session中的缓存 对于批量数据插入的时候优化:减少cpu和内存(缓存)占用量 @Test public vo ...

  5. CentOs下Mongodb的下载与安装

    1.下载MongoDB(64位) http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.4.9.tgz tar zxvf mongodb-lin ...

  6. JavaScript的this和作用域

    本文主要讨论一下JS的作用域和this关键字.作用域,就是你的方法或者变量可访问的区域,是他们执行的上下文.如果你见过这样的代码: function someFunc() { var _this = ...

  7. Swagger2 Oauth2.0 令牌 请求头

    @EnableSwagger2 @Bean public Docket createRestApi() { ParameterBuilder tokenPar = new ParameterBuild ...

  8. python导入模块

    1.模块的定义: 模块定义:用来逻辑上组织python代码(变量.函数.类.逻辑:目的是:实现一个功能),本质就是.py结尾的python文件. 补充: 包的定义:用来从逻辑组织模块的,本质就是一个目 ...

  9. 2015最新Android学习线路图

    Android是一个以Linux为基础的半开源操作系统,主要用于移动设备,由Google和开放手持设备联盟开发与领导.据2011年初数据显示仅正式上市两年的操作系统Android已经跃居全球最受欢迎的 ...

  10. ubuntu10.04 安装配置tftp服务

    tftpd-hpa 是一个功能增强的TFTP服务器.它提供了很多TFTP的增强功能,它已经被移植到大多数的现代UNIX系统. 1.安装 sudo apt-get install tftpd-hpa t ...