- 浏览: 7851890 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
https://juejin.im/post/5998625f518825244d20327c
什么是模块
自动运行在严格模式下并且没有办法退出运行的 JavaScript 代码。在模块的顶部, this 的值是 undefined;模块不支持 HTML 代码风格的代码注释。模块仅导入和导出你需要的绑定。
导出
用 export 导出
// 导出数据
export const NAME = "柚子";
// 这个 age 变量是此模块私有的
let age = 18;
// 导出函数
export function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b
}
// 导出引用
export subtract;
任何未显式到处的变量、函数或类都是模块私有的,外部无法访问。
导入
用 import 导入
语法:
import { NAME, add, subtract } from './example.js';
// 此语句的含义是,从 example.js 文件中导入需要的标识符。
// 可以导入一个或多个
add(1, 2) // 3
NAME = 1; // 抛错,不能给导入的绑定重新赋值
导入整个模块
import * as example from './example.js';
cconsole.log(example.NAME); // 柚子
example.add(1, 2) // 3
这种导入格式被称为命名空间导入;在 example.js 文件中不存在 example 对象,所以它作为 example.js 中所有导出成员的命名空间对象而被创建。
import { NAME } from './example.js';
import { add } from './example.js';
import { subtract } from './example.js';
不管 import 语句中把一个模块写了几次,该模块都只对执行一次。
注意: export 语句不允许出现在 if 语句中,也不能在一条语句中使用 import,只能在顶部使用它。
if(isTrue) {
export add; // 这样写会报错
}
function importSomething() {
import { add } from './example.js'; // 这样写会报错
}
重命名
通过 as 关键字来指定函数在模块外应该被叫做什么名字
// example.js
function sum(a, b) {
return a + b
}
export { sum as add }; // 这里 sum 是本地名称,add 是导出时使用的名称
// app.js
import { add } from './example.js';
// 在导入的时候,必须要使用 add
// example.js
export function sum(a, b) {
return a + b
}
// app.js
import { sum as add } from './example.js';
// 在导入时用 add 来重命名 sum
add(1, 2) // 3
默认值
每个模块只能有一个默认的导出值。
default 表示这是一个默认的导出。
// 导出默认值
export default function(a, b) {
return a + b;
}
也可以是:
// 导出默认值
function sum(a, b) {
return a + b;
}
export default sum;
如果要导入默认值的话,就不能加中括号了:
import sum from './example.js';
如果文件中既有默认值,也有非默认值:
export let age = 18;
export default function(a, b) {
return a + b;
}
那么导入的时候就需要这样写:
import add, { age } from './example.js';
// 在 import 语句中,默认值必须排在非默认值之前
结尾
所以,看完了上面的解析之后,现在知道下面的写法是什么意思了吧。
import React, { Component, PropTypes } from 'react';
export default class App extends Component {
}
什么是模块
自动运行在严格模式下并且没有办法退出运行的 JavaScript 代码。在模块的顶部, this 的值是 undefined;模块不支持 HTML 代码风格的代码注释。模块仅导入和导出你需要的绑定。
导出
用 export 导出
// 导出数据
export const NAME = "柚子";
// 这个 age 变量是此模块私有的
let age = 18;
// 导出函数
export function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b
}
// 导出引用
export subtract;
任何未显式到处的变量、函数或类都是模块私有的,外部无法访问。
导入
用 import 导入
语法:
import { NAME, add, subtract } from './example.js';
// 此语句的含义是,从 example.js 文件中导入需要的标识符。
// 可以导入一个或多个
add(1, 2) // 3
NAME = 1; // 抛错,不能给导入的绑定重新赋值
导入整个模块
import * as example from './example.js';
cconsole.log(example.NAME); // 柚子
example.add(1, 2) // 3
这种导入格式被称为命名空间导入;在 example.js 文件中不存在 example 对象,所以它作为 example.js 中所有导出成员的命名空间对象而被创建。
import { NAME } from './example.js';
import { add } from './example.js';
import { subtract } from './example.js';
不管 import 语句中把一个模块写了几次,该模块都只对执行一次。
注意: export 语句不允许出现在 if 语句中,也不能在一条语句中使用 import,只能在顶部使用它。
if(isTrue) {
export add; // 这样写会报错
}
function importSomething() {
import { add } from './example.js'; // 这样写会报错
}
重命名
通过 as 关键字来指定函数在模块外应该被叫做什么名字
// example.js
function sum(a, b) {
return a + b
}
export { sum as add }; // 这里 sum 是本地名称,add 是导出时使用的名称
// app.js
import { add } from './example.js';
// 在导入的时候,必须要使用 add
// example.js
export function sum(a, b) {
return a + b
}
// app.js
import { sum as add } from './example.js';
// 在导入时用 add 来重命名 sum
add(1, 2) // 3
默认值
每个模块只能有一个默认的导出值。
default 表示这是一个默认的导出。
// 导出默认值
export default function(a, b) {
return a + b;
}
也可以是:
// 导出默认值
function sum(a, b) {
return a + b;
}
export default sum;
如果要导入默认值的话,就不能加中括号了:
import sum from './example.js';
如果文件中既有默认值,也有非默认值:
export let age = 18;
export default function(a, b) {
return a + b;
}
那么导入的时候就需要这样写:
import add, { age } from './example.js';
// 在 import 语句中,默认值必须排在非默认值之前
结尾
所以,看完了上面的解析之后,现在知道下面的写法是什么意思了吧。
import React, { Component, PropTypes } from 'react';
export default class App extends Component {
}
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 755刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 479三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1461http://www.ruanyifeng.com/blog/ ... -
markdown中的空格
2017-08-20 07:53 1648即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 955不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2974参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92611. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 597http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 806http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9511 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 545虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 520【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1383https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 773深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 906(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1108https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3118http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1521canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 522http://www.ruanyifeng.com/blog/ ... -
datatable中主子表格的两个不错的例子
2017-05-10 20:25 2399http://stackoverflow.com/questi ...
相关推荐
ES6 import和export的用法 ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范...
下面小编就为大家分享一篇浅谈es6中export和export default的作用及区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
主要介绍了ES6使用export和import实现模块化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
但是引入模块我看到用 require的方式,再联想到咱们的ES6各种export 、export default。 阿西吧,头都大了…. 头大完了,那我们坐下先理理他们的使用范围。 require: node 和 es6 都支持的引入 export / import : ...
cjs2es6export 将 CommonJS/ 分配的子集转换为声明。 用法: var cjs2es6export = require('cjs2es6export'); var src = "module.exports = function() { return 42; };" var newSrc = cjs2es6export(src); // ...
解构赋值 有如下 config 对象 const config = { host: 'localhost', port: 80 } 要获取其中的 host 属性 ...export default { host: 'localhost', port: 80 } 在 app.js 中 import config.js // app.j
es6的常用方法,es6初学者可以看下:关于箭头函数与function的区别,reduce() 方法说明及应用,export 与import是es6中新增模块功能最主要的两个命令,es6基础系列二:Number
ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如...import用于在一个模块中加载另一个含有export接口的模块。 也就
MEVN-ES6-模板使用ES6导入/导出语法的MEVN堆栈模板。设置github操作自动客户端构建工作流。 只需将“ NAME”和“ EMAIL”添加到“设置/秘密”即可。 工作流设置为删除先前的/ server / public文件夹并构建新的客户端...
茉莉花 & ES6 ES6 源代码和 Jasmine 规范的简单示例。 确保您的系统上有节点,然后: npm install && npm test
es6 语法 模块化 适合框架开发的小白
本章主要对后面用到最多的几个ES6+语法进行前置讲解,包括import和export,let和const,箭头函数等。使用html-bundler搭建课程环境,讲解一些webpack和babel一些最新的相关插件和配置 第5章 登录模块开发-骨架及...
本文实例讲述了ES6中module模块化开发。分享给大家供大家参考,具体如下: 多人开发JavaScript时伴随着命名冲突等问题,先后有了模拟块级作用域、命名空间、模块...2. 模块中可以使用import和export。 导入和导出 我们
1.ESM规范 就是ES6 Module 各浏览器和服务端 目前常用的就是浏览器端的RequireJS、NodeJS、以及ESM CommonJS语法分析 module.export 关键 1.module.exports实质上是一个对象,最后模块导出的对象就是这个引用指向...