JS模块化详解-优快云博客

module模块功能主要由两个命令构成：export和import

1、export用法
　　export用于规定模块的对外接口，import用于输入其他模块提供的功能

　　export var firstName = 'multiply';
　　export var lastName = 'Json';
　　export var year = 1987;

　　var firstName = 'Mich';
　　var lastName = "Json";
　　var year = 1958;
　　export { firstName, lastName, year };

　　export function multiply(x, y) {
　　　　return x * y;
　　}

　　as关键字为变量重新命名
　　function v1() {};
　　function v2() {};
　　export {
　　　　v1 as streamV1,
　　　　v2 as streamV2,
　　　　v2 as streamLatestVersion
　　}

　　// 写法一
　　export var m = 1;
　　// 写法二
　　var m = 1;
　　export {m};
　　// 写法三
　　var n = 1;
　　export {n as m};

2、import命令加载模块
　　import {firstName, lastName, year} from './profile.js';
　　function setName(element) {
　　　　element.textContent = firstName + ' ' + lastName;
　　}

1）as关键字为变量重新命名
　　import {lastName as surname} from './profile.js';

2）import输入的变量都是只读的，本质就是输入接口，不能改写接口如果对接口变量重新命名会报错。但是，如果变量是一个对象，改写变量的属性是允许的。

3）import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js
　　import {myMethod} from 'util';

4）import命令具有提升效果，会提升到整个模块的头部，首先执行。
　　foo();
　　import { foo } from 'my_module';

5）import语句会执行所加载的模块
　　import 'lodash';

　　/*如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。*/
　　import 'lodash';
　　import 'lodash';//只会执行一次

　　import { foo } from 'my_module';
　　import { bar } from 'my_module';

　　import{ foo, bar } from 'my_module';

3、模块的整体加载
　　//circle.js
　　export function area(radius) {
　　　　return Math.PI * radius * radius;
　　}
　　export function circumference(radius) {
　　　　return 2 * Math.PI * radius;
　　}
　　//main.js
　　import { area , circumference} from './circle';
　　console.log('圆面积：' + area(4));
　　console.log('圆周长：' + circumference(14));

　　//整体加载
　　import * as circle from './circle';
　　console.log('圆面积：' + circle.area(4));
　　console.log('圆周长：' + circle.circumference(14));

4、export default 命令
　　//export-default.js
　　export default function() {
　　　　console.log('foo');
　　}
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。需要注意的是，这时import命令后面，不使用大括号。
　　//import-default.js
　　import customName from './export-default';
　　customName();

比较：第一组是使用export default时，对应的import语句不需要使用大括号；
　　　第二组是不使用export default时，对应的import语句需要使用大括号。
　　// 第一组
　　export default function crc32() { }
　　import crc32 from 'crc32'; // 输入
　　// 第二组
　　export function crc32() { };
　　import {crc32} from 'crc32'; // 输入

　　本质上，export default就是输出一个叫做default的变量或方法。只能有一个默认输出

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

　　import _, { each, each as forEach } from 'lodash';
　　export default function (obj) {}
　　export function each(obj, iterator, context) {}
　　export { each as forEach };

5、跨模块常量
　　//constants.js模块
　　export const A = 1;
　　export const B = 3;
　　export const C = 4;
　　//test1.js 模块
　　import * as constants from './constants';
　　console.log(constants.A);
　　console.log(constants.B);
　　//test2.js模块
　　import {A, B} from './constants';
　　console.log(A);
　　console.log(B);

　　 如果要使用的常量非常多，可以建一个专门的constants目录，将各种常量写在不同的文件里面，保存在该目录下。
　　//constants/db.js
　　export const db = {
　　　　url: 'http://my.couchdbserver.local:5984',
　　　　admin_username: 'admin',
　　　　admin_password: 'admin password'
　　};
　　//constants/user.js
　　export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
　　//constants/index.js
　　export {db} from './db';
　　export {users} from './users';
　　//script.js
　　import {db, users} from './index';

转载于:https://www.cnblogs.com/insignificant-malt/p/8610506.html