- 浏览: 7952070 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (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 834刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 560三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1574http://www.ruanyifeng.com/blog/ ... -
markdown中的空格
2017-08-20 07:53 1705即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 1014不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3032参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93391. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 652http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 851http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 10101 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 600虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 576【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1434https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 825深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 995(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1152https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3162http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1597canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 581http://www.ruanyifeng.com/blog/ ... -
datatable中主子表格的两个不错的例子
2017-05-10 20:25 2497http://stackoverflow.com/questi ...
相关推荐
ES6 import和export的用法 ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范...
在ES6(ECMAScript 2015)中,`export` 和 `export default` 是两种用于模块化的导出语法,它们允许开发者在JavaScript文件中定义并共享代码。这两个关键字虽然都用于导出模块,但它们有明显的差异,下面我们将深入...
通过这些例子,我们可以看到`export`和`import`在ES6模块化中的核心作用。了解并熟练运用这些概念,对于提升JavaScript开发效率和代码质量至关重要。记住,模块化不仅是技术上的改进,更是软件工程理念的体现,有助...
但是引入模块我看到用 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 模块化是 JavaScript 语言中的一种模块管理机制,它提供了 import 和 export 两个关键字,用于实现模块之间的依赖关系和变量共享。本文将从 ES6 模块化的基本概念开始,逐步深入讲解 import 和 export 的用法...
- 这可能是一份全面的JavaScript语言参考,包含从基础到高级的各个层面,包括变量、数据类型、控制流、函数、对象、闭包,以及ES6的新增特性,如let和const变量声明、解构赋值、Promise、模块系统(import/export)...
以上是ES6中的核心特性,学习和掌握这些知识点能够帮助开发者编写更现代、更健壮的JavaScript代码。在实际开发中,理解并熟练运用这些特性,可以提高代码质量和开发效率。同时,不断关注和学习新的JavaScript特性和...
1. **箭头函数**:箭头函数是ES6中的一种新语法,它使得函数的定义更加简洁。例如,`const add = (x, y) => x + y;`。箭头函数没有自己的`this`值,它会继承外层作用域的`this`,这对于处理回调函数或事件处理程序中...
以上只是 ES6 中部分关键特性的介绍,实际学习中还需要深入理解迭代器、Proxy、Reflect、尾调用优化等其他概念。这个 ES6 入门教程将详细讲解这些内容,帮助你快速掌握 ES6 的核心知识,提升编程能力。无论你是初学...
《ES6 阮一峰》是一本详细解读ECMAScript 6(也称为ES2015)标准的中文指南,由知名前端开发者阮一峰编写。...同时,书中还可能涵盖了ES6标准的其他细节和最佳实践,帮助读者在实际项目中更好地应用这些新特性。
- **模块化**:ES6引入了真正的模块支持,通过`import`和`export`关键字来组织和管理代码,这对于构建大型应用尤其有用。 - **类与继承**:虽然关于ES6中引入类特性存在争议,但它确实提供了一种更直观的方式来实现...
这个名为“linux-ES6中的跨平台linux命令.zip”的压缩包很可能是关于如何在ES6环境中利用JavaScript编写可移植的Linux命令的教程或代码示例集合。 首先,我们要理解Linux命令的本质。Linux命令是通过shell(如bash...
es6的常用方法,es6初学者可以看下:关于箭头函数与function的区别,reduce() 方法说明及应用,export 与import是es6中新增模块功能最主要的两个命令,es6基础系列二:Number
**ES6,全称ECMAScript 2015,是JavaScript语言的一个重大更新版本,...以上只是ES6众多特性中的一部分,通过深入学习这两份学习资料,你将能全面理解ES6的精髓,并在实际开发中熟练运用,提升JavaScript编程的水平。