module in JavaScript
JavaScript 在ES6之前没有给出官方模块的定义,因此社区自己搞了两个模块加载方案:
- CommonJS (node)
- AMD (browser) 本文略
CommonJS规范
module定义:
每个文件就是一个模块,文件有自己的私有内部作用域。module
对象代表当前模块,module.exports
是对外暴露的接口。加载模块,实际上是加载 module.exports
.
exports
是 module.exports
的引用,其实质是 node 提供的语法糖, 本质类似于每个模块开头都include了下面的代码。
var exports = module.exports; |
如修改exports
对象的属性,等价于修改了module.exports
。虽然这样提供了方便,但是直接改变exports
对象的指向是个不好的实践。
let a = 100; exports.a = 200; |
引入的时候,require
导入的是 module.exports
指向的一个对象。
//test.js |
ES6 规范
export命令
export
命令定义了模块的输出、其值可以是 value,variable、function、class,
//profile.js |
import命令
import {firstName, lastName} from 'profile'; //变量 |
import
大括号内的变量名必须与export
一致。(在webstrom等IDE中会帮你静态检查的)
module命令
module 是个语法糖。有时候,需要import所有的接口
import * as circle from 'circle'; console.log("圆面积:" + circle.area(4)); |
module circle from 'circle' |
export default 命令
export default命令定义了模块导出的默认值,引入默认值时不用加大括号。这个命令其实也是语法糖:
把导出值封装到了一个default
对象,再在引入时解构这个default
对象。因为有一个对象来承接中间的值,所以在import
时可以用任意key
指定被引入的值
export default class { ... } import MyClass from 'MyClass' |
Babel
在ES6出来之前社区上已经有许多CommonJS的module,托Babel的福,可以直接使用ES6的新语法来引入这些只支持CommonJS标准的库。
Babel 做了一层翻译,把ES6的import、export语法变成了兼容CommonJS规范的require、exports。
1. export babel翻译:
export const foo = 42; |
; Object.defineProperty(exports, "__esModule", { |
上面可以看到export default 和普通的export foo一样,都是给exports对象添加属性。
2. import babel翻译:
import React from 'react' |
==========>
'use strict'; var _react = require('react'); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } //通过_react2.default引用 |
export default 和 import 的使用要结合一起看:
上面的export default翻译为了exports.default
;
import命令则要先判断:对经过了 babel 翻译后export的module直接返回对象,否则先用对象包装一层,并把export值赋值给default
属性;最终在代码中使用时,统一使用moduleName.default
引用。
普通的非default import语法就简单了,和require一模一样,导入时需要添加{}
import {Component} from 'react' |
===========>
'use strict'; var _react = require('react'); |
参考
module in JavaScript的更多相关文章
- ES6之module
该博客原文地址:http://www.cnblogs.com/giggle/p/5572118.html 一.module概述 JavaScript一直没有模块体系,但是伴随着ES6的到来,modul ...
- [译]你应该知道的4种JavaScript设计模式
这里介绍下面这4种设计模式 Module Prototype Observer Singleton 每种模式有许多属性构成,在这我只强调一下几点: 1 Context: 在何种情况使用哪种模式? 2 ...
- javascript pattern
bing:javascript pattern baidu:module pattern javascript高级程序设计 姊妹篇:ajax高级程序设计 http://wenku.baidu.com/ ...
- module、export、require、import的使用
module 每个文件就是一个模块.文件内定义的变量.函数等等都是在自己的作用域内,都是自身所私有的,对其它文件不可见. 每个文件内部都有一个module对象,它包含以下属性 id: 模块的识别符,通 ...
- 转:彻底搞清楚javascript中的require、import和export
原文地址:彻底搞清楚javascript中的require.import和export 为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Ja ...
- 彻底搞清楚javascript中的require、import和export
为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也 ...
- javascript模块导入导出
第一次知道javascript有模块的概念通常都是使用<script>标签进行引入,不过只能在html文件上使用 增加的模块就如同php里的include.require可以使用引入的内容 ...
- 那些相见恨晚的 JavaScript 技巧
JavaScript 的成功让人津津乐道,为 Web 网页编写 JavaScript 代码已经是所有 Web 设计师的基本功,这门有趣的语言蕴藏着许多不为人熟知的东西,即使多年的 JavaScript ...
- javascript的模块发展
谨以此文记录了解js模块的过程 随着ES6的出现,js模块已经成为正式的标准了.曾经为了解决js模块问题而发展起来的民间秘籍,requireJs(AMD).SeaJs(CMD).Node(Common ...
随机推荐
- mac 下webstorm调节字体大小
ctr+shift+A功能可以搜索对应功能. 在弹出框中输入Zoom可以轻松设置. 而且有关zoom的功能全部列出. 真是方便. 搜索到change font size with ctrl + whe ...
- 整理平时常用git命令
git常用命令 git创建分支 #创建本地分支并切换到新创建的分支 $ git checkout -b newbranch #将新创建的分支信息推送到github $ git push origin ...
- Junit单元测试、反射、注解
Junit单元测试: * 测试分类: 1. 黑盒测试:不需要写代码,给输入值,看程序是否能够输出期望的值. 2. 白盒测试:需要写代码的.关注程序具体的执行流程. * Junit使用:白盒测试 * 步 ...
- 如何把Visual Studio完全安装在其他磁盘
//Visual Studio快把我c盘吃完了,就网上找了找解决方法,自己总结一下,方便理解 第一步 找到以下文件夹 C:\\Program Files (x86)\\Microsoft SDKs C ...
- 实用 | PyCharm常用快捷键整理
PyCharm是一款非常受欢迎的Python IDE,用Python高效处理web和数据科学,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理 ...
- Python 生成requirements文件以及使用requirements.txt部署项目
生成requirements.txt 当你的项目不再你的本地时,为了方便在新环境中配置好环境变量,你的项目需要一个记录其所有依赖包以及它们版本号的文件夹requirements.txt 文件. pip ...
- linux中ftp中文名乱码问题
问题触发环境 1. java中使用org.apache.commons.net.ftp.FTPClient包 2. 通过chrome浏览器的file标签上传文件 3. 在windows上部署的File ...
- 四十三、LAMP与LNMP web架构深度优化实战-第二部
1. 配置nginx gzip压缩功能 服务器对发出的内容进行压缩,带宽少了,体验好,速度快,但是服务端压,会使cpu使用高,压缩比高的进行压缩:文本.程序文件.数据文件.图片视频不要压缩,一般 ...
- Android 5.0 5.1 webview 闪退问题
自定义webview /** * 处理Android 5.0 5.1 webview 闪退 */ class MyWebView : WebView { companion object{ priva ...
- Springboot中RestTemplate -- 用更优雅的方式发HTTP请求
RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率. 我之前的HTTP开发是用ap ...