ES6学习-module语法

这篇具有很好参考价值的文章主要介绍了ES6学习-module语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Module语法

CommonJS模块

let { readfile }  = require('fs')
# 等同于
let _fs = require('fs')
let readfile = _fs.readfile //这种加载称为“运行时加载”

ES6模块

import { stat, exists, readFile } from 'fs';

这种加载称为“编译时加载”或者静态加载

静态加载带来的各种好处
  1. 效率要比 CommonJS 模块的加载方式高。
  2. 能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。
  3. 不再需要UMD模块格式了,将来服务器和浏览器都会支持 ES6 模块格式。
  4. 将来浏览器的新 API 就能用模块格式提供,不再必须做成全局变量或者navigator对象的属性。
  5. 不再需要对象作为命名空间(比如Math对象),未来这些功能可以通过模块提供。

import()

import命令会被 JavaScript 引擎静态分析,先于模块内的其他语句执行

importexport命令只能在模块的顶层

这样的设计,固然有利于编译器提高效率,但也导致无法在运行时加载模块。在语法上,条件加载就不可能实现。

import()函数,支持动态加载模块。

运行时执行:也就是说,什么时候运行到这一句,就会加载指定的模块。

import()返回一个 Promise 对象。

import('xxx')
.then(module => {module.default})
适用场合
  1. 按需加载
  2. 条件加载
if(a) {import('xxx').then(({a,b,c}) =>{})}
  1. 动态的模块加载
import(f())

import()也可以用在 async 函数之中。

严格模式

ES6 的模块自动采用严格模式

export 命令

export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

// 报错
var m = 1;
export m;

因为没有提供对外的接口。直接输出 1。1只是一个值,不是接口。

export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错

因为处于条件代码块之中,就没法做静态优化了

import 命令

import命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口。

import命令具有提升效果,会提升到整个模块的头部,首先执行。

foo();
import { foo } from 'my_module';

上面的代码不会报错,因为import的执行早于foo的调用。这种行为的本质是,import命令是编译阶段执行的,在代码运行之前。

由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。

// 报错
import { 'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import { foo } from module;

import语句会执行所加载的模块,因此可以有下面的写法。

import 'lodash';

多次重复执行同一句import语句,那么只会执行一次,而不会执行多次。

import 'lodash';
import 'lodash';
import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';

import在静态解析阶段执行,所以它是一个模块之中最早执行的。

require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');
import React from 'React';

模块的整体加载

import * as circle from './circle';
console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));

export default 命令

export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。

// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
// 正确
export default 42;
// 报错
export 42;

因为export default命令的本质是将后面的值,赋给default变量,所以可以直接将一个值写在export default之后。

如果想在一条import语句中,同时输入默认方法和其他接口,可以写成下面这样。

import _, { each, forEach } from 'lodash';

export 与 import 的复合写法

export { foo, bar } from 'my_module';

在一个模块之中,先输入后输出同一个模块

foobar实际上并没有被导入当前模块,只是相当于对外转发了这两个接口,导致当前模块不能直接使用foobar

Module 的加载实现

没看文章来源地址https://www.toymoban.com/news/detail-636321.html

到了这里,关于ES6学习-module语法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 后端程序员的前端必备【Vue】 - 07 ES6新语法

    使用let定义变量能更加精准的确定变量的作用域 使用const定义常量,常量一旦定义不可以改变 使用模板字符串可以避免大量的字符串拼接 类似于springmvc中接受参数拥有默认值 使用箭头函数可以简化复杂的代码结构(类似于java中lambda表达式) 箭头函数应用 定义:从一个大的数

    2024年02月04日
    浏览(48)
  • js数组学习(ES6+)

    js(ES6+)数组学习 1.Array.prototype.forEach(fn) 遍历数组,传一个函数,每次遍历会运行该函数 2.Array.prototype.map(fn) 数组映射,传入一个函数,映射数组中的每一项,不会改动原数组,然后返回一个新的数组! 3.Array.prototype.filter(fn) 数组筛选,传入一个函数,仅保留满足条件的项。不

    2024年02月12日
    浏览(43)
  • 前端小白的学习之路(ES6 一)

    提示:声明:let与const,长度单位:em与rem,vw与wh,解构赋值,箭头函数(简介) 目录 一、ES6介绍 二、letconst 1.let 1) 用 let 声明的变量不能提前引用 2) 不允许重复声明变量 3) 可以产生块级作用域 { }   总结 2.const 三、 长度单位 1.em与rem 1).em 2).rem 2.vw与vh 四、 解构赋

    2024年04月15日
    浏览(49)
  • Node.JS学习 | Babel | webpack | ES6

    💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Node.JS能够在服务器端运行JavaScript的开放源代码、跨平台运行环境;Node.js采用Google开发的V8运行代码,使用事件驱动、非阻塞IO和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模 let有效避免var的变

    2024年02月07日
    浏览(44)
  • 前端框架学习-ES6新特性(尚硅谷web笔记)

    ECMASript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。javaScript也是该规范的一种实现。 笔记出处:b站 尚硅谷Web前端ES6教程,涵盖ES6-ES11 阮一峰大佬的:ECMAScript 6 入门 ES6 let 使用let声明变量的特点: 不允许重复声 块儿级别作用域 不存在变量提升 不影

    2024年02月12日
    浏览(35)
  • es6 ...展开语法

    ES6中的...(展开)语法是一种可以将数组或对象展开为函数参数或数组字面量的语法。它通常用于函数调用或数组字面量的展开。 在函数调用中,...可以将一个数组展开为函数的参数列表。例如: js 复制代码   function sum( a, b, c) {   return a + b + c;   }       const numbers = [ 1,

    2024年02月05日
    浏览(32)
  • ES6核心语法

    主要记录学习ES6的语法 同es5中的var来声明变量。三者的区别分别是: var声明的变量存在变量提升,先声明未赋值,值为undefined。且变量声明可在函数块内使用。变量声明之后可以重复声明 let声明的变量无变量提升。作用域是块级(例如if或者for等等)。不能被重复声明。声

    2024年02月10日
    浏览(35)
  • ES6基础语法

    目录 解构 数组解构 对象解构  基本数据解构 对象 对象简写 箭头函数 扩展运算符 函数参数解构  对象API拓展 Object.is() Object.assign() Object.getPrototypeOf() Object.setPrototypeOf() Object.keys() Object.values() Object.entries() Object.fromEntries()  数组方法拓展 String类型方法 String.prototype.trimStart()/

    2024年02月16日
    浏览(38)
  • 【web前端学习】7个ES6解构技巧让代码更简洁

    各位前端er,代码打久了,是否厌倦了编写臃肿且难以阅读的代码?想要提升编码技能并使代码更具可读性和简洁性? 今天这篇文章,与小千一起深入学习 ES6 解构的世界,向您展示如何使用它来编写更干净、更高效的代码 本文将从 解构对象和数组到使用默认值和展开运算符

    2024年02月05日
    浏览(33)
  • CommonJS 和 ES6 module

    本文主要自己觉得要记录的点记录下来,不耽误大家时间,会持续更新。 Module对象 CommonJS加载一次之后会缓存文件 加载过程 CommonJS返回的是对象引用之后,在A地方修改后,会影响到B地址的加载结果。 CommonJS  模块同步加载并执行模块文件,ES6 模块提前加载并执行模块文件,

    2024年02月12日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包