ES6模块加载

两种加载方式

加载方式

规范

命令

特点

运行时加载

CommonJS/AMD

require

社区方案,提供了服务器/浏览器的模块加载方案

非语言层面的标准

只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。

编译时加载

ESMAScript6+

import

语言规格层面支持模块功能

支持编译时静态分析,便于JS引入宏和类型检验

动态绑定

export命令

定义

export命令用于规定模块的对外接口

输出变量

1.       单个输出

// profile.js

export var firstName = ‘Michael‘;

export var lastName = ‘Jackson‘;

export var year = 1958;

2.       批量输出

// profile.js

var firstName = ‘Michael‘;

var lastName = ‘Jackson‘;

var year = 1958;

export {firstName, lastName, year};

3.       重命名

var n = 1;

export {n as m};

4. 动态绑定

export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。

export var foo = ‘bar‘;

setTimeout(() => foo = ‘baz‘, 500);

上面代码输出变量foo,值为bar,500毫秒之后变成baz。

输出函数

1.       单个输出

a)         方式一

export function multiply(x, y) {

return x * y;

};

b)         方式二

function f() {}

export {f};

2.       批量输出

function v1() { ... }

function v2() { ... }

export {v1,v2}

3.       重命名

function v1() { ... }

function v2() { ... }

export {

v1 as streamV1,

v2 as streamV2,

v2 as streamLatestVersion

};

重命名后,v2可以用不同的名字输出两次。

输出类

export default

import命令

定义

使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。

导入变量

1.       批量导入

import命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

import {firstName, lastName, year} from ‘./profile‘;

2.       重命名

import { lastName as surname } from ‘./profile‘;

提升

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

foo();

import { foo } from ‘my_module‘;

上面的代码不会报错,因为import的执行早于foo的调用。

执行

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

import ‘lodash‘;

上面代码仅仅执行lodash模块,但是不输入任何值

小结

1.       import命令导入的对象可能是一个变量,也可能是一个函数,或者一个类,要视具体情况而定。

2.       import与require的差异较大,最大不要混用。要尽可能的使用import.

来自为知笔记(Wiz)

时间: 11-06

ES6模块加载的相关文章

深入浅出nodejs(一) 模块加载机制

声明: 深入浅出nodejs系列文章将会在后面持续更新. 该系列文章部分参考 朴灵<深入浅出nodejs>,并加以总结补充 你真的了解require函数吗? 看似简单的require函数, 其实内部做了大量工作...下面我们将详细说明require为我们所做的一切 nodejs模块加载原理 node加载模块步骤: 1) 路径分析 (如判断是不是核心模块.是绝对路径还是相对路径等) 2) 文件定位 (文件扩展名分析, 目录和包处理等细节) 3) 编译执行 原生模块加载顺序 1) 缓存 2) 本地

Python学习-3.Python的模块加载

Python中使用import关键字进行模块加载. 先在Visual Studio中建立PythonModuleLoad项目作为演示. 1.同目录加载 建立SameFolder.py文件 写入代码: 1 def printSameFolder(): 2 print("this method is in the same folder") 修改启动文件,默认为PythonModuleLoad.py 1 import SameFolder 2 SameFolder.printSameFol

JavaScript模块加载框架sea.js 学习一

简单总结sea.js 学习 文件目录结构 /sea/sea.js      下载地址  http://seajs.org/docs/#downloads /sea/jquery-sea.js   下载地址 http://jquery.com/download/ /sea/sea_config.js /sea/home.jsdata.js /sea/data.js 1.html页面代码文件 <style> .ch{height:200px;width:200px;background:#ccc;

开发史上最强模块加载工具

haha好吧,我承认这篇文章有点标题党了. 这次要记录的是一个很简单的但是基本符合AMD规范的浏览器端模块加载工具的开发流程.因为自从使用过require.js.webpack等模块化加载工具之后就一直对它的实现原理很好奇,于是稍微研究了一下. 实现的方法有许多,但简单实现的话大致都会有这样几个过程: 1 实现模块的加载.从主模块说起,我们需要通过一个入口来加载我们的主模块的依赖模块,同时在加载完主模块依赖之后,能够取得所各依赖模块的返回值,并将它们传入主模块代码中,再去执行我们的主模块代码.函

Vs2013在Linux开发中的应用(22):模块加载

快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载,但请保留作者信息 当gdb检测到模块的加载时会输出: =library-loaded,id="/lib/ld-linux.so.2",target-name="/lib/ld-linux.so.2",host-name="/lib/ld-linux.so.2",symbols-loaded="0",thread-group="i1&q

seajs实现JavaScript 的 模块开发及按模块加载

seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http://seajs.org/docs/#docs 首先看看seajs是怎么进行模块开发的.使用seajs基本上只有一个函数"define" fn.define = function(id, deps, factory) { //code of function- } 使用define函数来进行定

[转] 通过反射实现动态功能模块加载

原文 如何通过反射实现动态功能模块加载 程序集包含模块,而模块包含类型,类型又包含成员.反射则提供了封装程序集.模块和类型的对象.您可以使用反射动态地创建类型的实例,将类型绑定到现有对象,或从现有对象中获取类型.然后,可以调用类型的方法或访问其字段和属性. 下面我们将介绍如何通过不使用反射的方式和使用反射的方式加载功能模块.实现效果: 1. WinForm 主程序 主程序我们使用Winform程序,VS2008 工具C#语言开发.包括工具栏.状态栏及TabControl控件.我们使用TabCon

Zendframework 模块加载事件触发顺序。

模块加载时事件触发的时间顺序: 1.  loadModule.resolve(ModuleEvent::EVENT_LOAD_MODULE_RESOLVE):模块将被加载时触发,事件监听者将模块名解析成类的实例.监听者使用getModuleName()获取模块名. 2.  loadModule(ModuleEvent::EVENT_LOAD_MODULE):一旦模块被解析成对象后,本事件会被触发,与之相对的事件监听者会加载模块(将新建的对象传递给所有的监听者). 3.  mergeConfig(

【模块化编程】理解requireJS-实现一个简单的模块加载器

在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ...... 为了深入了解加载器,中间阅读过一点requireJS的源码,但对于很多同学来说,对加载器的实现依旧不太清楚 事实上不通过代码实现,单单凭阅读想理解一个库或者框架只能达到一知半解的地步,所以今天便来实现一个简单的加载器 加载器原理分析 分与合 事实上,一个程序运行需要完整的模块,以下代码为例: 1