UDN-企业互联网技术人气社区

板块导航

浏览  : 1856
回复  : 0

[干货] 使用ES6新特性开发微信小程序(7)——模块

[复制链接]
舞操的头像 楼主
发表于 2017-1-6 21:20:31 | 显示全部楼层 |阅读模式
  在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种。前者用于服务器,后者用于浏览器。ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。

  Modules(模块)

  每一个ES6模块都是一个包含JS代码的文件,模块本质上就是一段脚本,而不是用 module 关键字定义一个模块。默认情况下模块都是在严格模式下运行。模块功能主要由两个命令构成:export和import。export命令用于用户自定义模块,规定对外接口;import命令用于输入其他模块提供的功能,同时创造命名空间(namespace),防止函数名冲突。

  export

  export用于从给定文件(或模块)导出函数和对象。

  1.   export { name1, name2, …, nameN };

  2.   export { variable1 as name1, variable2 as name2, …, nameN };

  3.   export let name1, name2, …, nameN; // also var

  4.   export let name1 = …, name2 = …, …, nameN; // also var, const

  5.   export default expression;

  6.   export default function (…) { … } // also class, function*

  7.   export default function name1(…) { … } // also class, function*

  8.   export { name1 as default, … };

  9.   export * from …;

  10.   export { name1, name2, …, nameN } from …;

  11.   export { import1 as name1, import2 as name2, …, nameN } from …;
复制代码


  单个导出

  1.   // export.js

  2.   export let firstName = 'Michael';

  3.   export let lastName = 'Jackson';

  4.   export let year = 1958;

  5.   function add(x, y) {

  6.   return x + y;

  7.   }

  8.   export { add };

  9.   export function multiply(x, y) {

  10.   return x * y;

  11.   };
复制代码


 
  1.  批量导出

  2.   // export.js

  3.   let firstName = 'Michael';

  4.   let lastName = 'Jackson';

  5.   let year = 1958;

  6.   function multiply(x, y) {

  7.   return x * y;

  8.   }

  9.   export {firstName, lastName, year, multiply};
复制代码


  重命名导出

  1.   let n = 1;

  2.   function f()) {

  3.   }

  4.   export { n as m, f as g};
复制代码


  默认导出,每个模块只能有一个默认导出:

  1.   // exportDefault.js

  2.   function f() {

  3.   }

  4.   export default f;

  5.   export{ f as default };
复制代码


  import

  import用于从外部模块、其他脚本中导入函数、对象或者原型,这些被导入的模型必须在其他的模块或者脚本中被导出的。

  1.   import defaultMember from "module-name";

  2.   import * as name from "module-name";

  3.   import { member } from "module-name";

  4.   import { member as alias } from "module-name";

  5.   import { member1 , member2 } from "module-name";

  6.   import { member1 , member2 as alias2 , [...] } from "module-name";

  7.   import defaultMember, { member [ , [...] ] } from "module-name";

  8.   import defaultMember, * as name from "module-name";

  9.   import "module-name";
复制代码


  无对象导入,如果模块包含一些逻辑要执行,且不会导出任何对象,此类对象也可以被导入到另一模块中。

 
  1.  import './module';
复制代码

  导入默认对象,采用Default导出方式导出对象,该对象在import声明中将直接被分配给某个引用。

 
  1.  import d from './exportDefault';
复制代码

  批量导入

 
  1.  import {firstName, lastName, year, multiply} from './export';
复制代码

  重命名导入

  1.   import { lastName as surname } from './export';
复制代码


  导入所有对象

  
  1. import * as o from './export';
复制代码

  import命令导入的对象可能是一个变量,也可能是一个函数,或者一个类,要视具体情况而定。import与require的差异较大,好不要混用。

  实例

  f10_modules_math.js

  1.   export function sum(...x) {

  2.   return x.reduce((m, n) => m + n);

  3.   }

  4.   export var pi = 3.141593;
复制代码


  f10_modules_app.js

  1.   import * as math from "f10_modules_math";

  2.   function execute() {

  3.   console.log("π = " + math.sum(math.pi));

  4.   console.log("2π = " + math.sum(math.pi, math.pi));

  5.   console.log("3π = " + math.sum(math.pi, math.pi, math.pi));

  6.   console.log("4π = " + math.sum(math.pi, math.pi, math.pi, math.pi));

  7.   }

  8.   export { execute };
复制代码


  f10_modules.js

  1.   import * as app from "f10_modules_app";

  2.   function f10_modules() {

  3.   console.log("\nf10:Modules");

  4.   app.execute(); // 输出:π = 3.141593 2π = 6.283186 3π = 9.424779 4π = 12.566372

  5.   }
复制代码


  其他

  完整代码:https://github.com/guyoung/GyWxappCases/tree/master/ES6

原文作者:佚名  来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部