赞
踩
Module的语法 1 概述 JavaScript一直没有模块(module)体系,因此无法将一个大程序拆分成互相依赖的 小文件,再用简单的方法拼装起来,这对开发大型的、复杂的项目形成了巨大障碍。 在ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS和AMD 两种。前 者用于服务器,后者用于浏览器。 ES6 在语言标准的层面上实现了模块功能,而且实现得相 当简单,完全可以取代 CommonJS和AMD 规范,成为浏览器和服务器通用的模块解决方案 ES6 模块的设计思想是尽量静态化,使得编译时就能确定模块的依赖关系,以及输 入和输出的变量。 2 export,import 命令 在使用 ES6 的模块化设计时最常遇到的问题就是如何导入、导出属性和方法,在创 建或者使用对应的js文件时常用export命令导出对应的属性和方法、import命令导入对 应的属性和方法。 1. export命令 一个模块就是一个独立的文件,文件内部的所有变量外部无法获取。如果希望外部 能够读取模块内部的某个变量,就必须使用 export 关键字输出该变量。 示例 32是一个JS 文件(假设文件名为 profile.js ),使用 export 命令输出变量。 export 命令对外部输出了3个变量。 除了第一种写法之外,还有另一种写法是使用大括号指定 要输出的一组变量 它与第一种写法是等价的,但是应该优先使用第二种写法。因 为第 二种写法可以直接写在脚本尾部,方便集中管理 示例 32 //第一种写法 export var firstName = ’Michael'; export var lastName =’Jackson'; export var year= 1958; //第二种写法 var firstName =’Michael’, var lastName =’Jackson'; var year= 1958; export { firstName, lastName, year } ; export 命令除了输出变量,还可以输出函数,如示例 33 所示。 示例 33 导出单个函数 export function multiply(x, y) { return x * y; }; 导出多个函数 function v1() { } function v2() { } export { v1, v2 } 2.import 命令 使用 export 命令定义模块的对外接口以后,其他 JS文件就可以通过 import 命令加载这个模块。 import 命令用于加载其他的文件,并从中输入变量。import 命令接受一对大括号,里面指定要从其他模块导入的变量名(或者函数名), 大括号里面的变量名必须与被导入模块(profile.js)对外接口的名称相同。如示例34所示。 示例 34 // main.is import {firstName,lastName,year} from './profile.js'; function setName(element){ element.textContent = firstName +''+ lastName; } 注意 import 命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本中改写接口。 如果导入的是一个对象,改写对象的属性是允许的,但是这种改写不推荐使用,建议凡是输入的变量,都当作完全只读, 轻易不要改变它的属性。 import 后面的 from 指定块文件的位置,可以使用相对路径,也可以使用绝对路径,.js 后缀可以省略。 3 export default 命令 从示例 34可以看出,使用import命令时,用户需要知道所要加载的变量名或函数名,否则无法加载。 为了给用户提供方便,不用阅读文档就能加载模块,需要用到export default命令,为模块指定默认输出。使用方法如示例 35所示。 示例 35 //export-default.js export default function (){ console.log('foo'); } // import-default.js import customName from './export-default'; customName(): // 'foo' 示例 35 中的代码 export-default.js是一个模块文件,它的默认输出是一个函数。import-default.js为另外的模块。在加载 export-default.js模块时, import 命令可以为匿名函数指定任意名字。在示例 35中为匿名函数指定名称customName,这时就不需要知道原模块输出的函数名。 需要注意的是,这时import 命令后面不使用大括号。 注意 export default命令用在非匿名函数前也是可以的。因为函数名在模块外部是无效的,加载时视同匿名函数。 通过示例 33、示例 34 和示例 35 的对比可知,使用 export default 时,对应的 import语句不需要使用大括号;不使用export default 时, 对应的import 语句需要使用大括号。export default 命令用于指定模块的默认输出。显然一个模块只能有一个默认输出,因此export default 命令只能使用一次。所以import 命令后面才不用加大括号,因为只能唯一对应一个 export default 命令。 任务 6 Promise 对象 t小市而开于市市出面出最面后 2.6.1 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理、更强大。它由社区最早提出和实现,ES6将其写进语言标准,统一了用法, 原生提供了 Promise 对象。 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象, 可以从它获取异步操作的消息。Promise 提供统一的API,各种异步操作都可以使用同样的方法进行处理。 Promise 对象有两个特点。 >对象的状态不受外界影响。Promise 对象代表一个异步操作,有3种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。 只有异步操作的结果可以决定当前是哪种状态,任何其他操作都无法改变这种状态。这也是Promise名字的由来,它的中文意思就是“承诺”, 表示其他手段无法改变。 >一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled、从pending变为rejected。 只要这两种情况发生,状态就凝固了,不会再变了,并一直保持这个结果,这时就称为resolved(已定型)。如果改变已经发生了, 再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果错过了再去监听,将不会得到结果。 有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免使用层层嵌套的回调函数。此外,Promise对象提供统一的接口, 使得控制异步操作更加容易。 Promise 对象也有一些缺点。 >无法取消 Promise,一旦新建就会立即执行,无法中途取消 >如果不设置回调函数,Promise内部抛出的错误将不会反映到外部。 >当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。 2.6.2 基本用法 ES6规定,Promise对象是一个构造函数,用来生成Promise实例。 Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是resolve 和 reject。 它们是两个函数,由JavaScript引擎提供,不用自己部署。 resolve 函数的作用是将 Promise 对象的状态从“未完成”变为“成功”(即从 pending变为resolved),在异步操作成功时调用, 并将异步操作的结果作为参数传递出去. reject 函数的作用是将 Promise 对象的状态从“未完成”变为“失败”(即从 pending变为rejected),在异步操作失败时调用, 并将异步操作的报错作为参数传递出去。 在Promise 实例生成以后,可以用then方法分别指定resolved 状态和rejected 状态的回调函数。 then 方法可以接受两个回调函数作为参数。 第一个回调函数是在Promise 对象的状态变为resolved 时调用,第二个回调函数是在Promise 对象的状态变为rejected 时调用。 第二个回调函数是可选的,不一定提供。它们都接受Promise对象传出的值作为参数。下面来看一下示例 36。 示例 36 const promise = new Promise(function(resolve, reject){ // ... some code if(/*异步操作成功*){ resolve(value); } else { reject(error); }; }); promise.then(function(value){ // success }, function(error) { // failure });
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。