当前位置：首页 > news >正文

ECMAScript入门（七）--Module语法

news 来源：原创 2024/5/19 3:33:49

你带着你的同事联调的时候
????
图片描述

从古至今，Javascript都没有自带的模块体系，能做的，也就只是将不同作用的代码写在不同的JS文件中，然后通过<script>分别引入。这样做又一个非常致命的问题，那就是我们要定位一个方法变得非常的困难。

一个灵活的模块体系，能让你的代码之间的依赖关系更加直观，一个好的模块式的写法让没个方法都能很快的找到声明位置所在。

在NODE中是有这种写法的，我们称为CMD语法，就是通过require关键词，引入所要依赖的文件。

当然，随着前端在WEB开发中占据的比重越来越高，客户端JS的模块化也尤为重要。其实已经有比较成熟的前端框架来实现这个功能，比如RequireJs和Seajs。ES6的出现，让JS实现模块功能变得更�加简单。

//requirejs的语法
define(['moudleA'], function(){
　　function foo(){
　　　　doSomething();
　　}
　　return {
　　　　foo : foo
　　};
});

//seajs的用法
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');
  // 通过 exports 对外提供接口
  exports.doSomething = ...
  // 或者通过 module.exports 提供整个接口
  module.exports = ...
});

ES6的Module语法

ES6的模块功能主要通过两个关键字来实现export和import。

从字面上不难看出，export是输出，即用来将模块内部的方法暴露出来，而import是输入，即引入其他模块的方法，便于在本模块中调用其他模块的方法。

export关键字

正常来讲，我们可以将每个模块都写成一个独立的文件，由于Javascript作用域的问题，每个模块内部的变量及方法都是私有的，即只能内部访问，外部无法访问。要想使模块内部的方法可以从外部访问，就必须使用export关键字。

//moduleA.js
var moduleA1 = "a";
var moduleA2 = "aa";
function moduleFunc(){
    console.log(moduleA2);
}
export {
    moduleA1,
    moduleA2 as moduleA,
    moduleFunc as module
};

如上面的代码所示，在模块中声明了变量和方法，我们只需要将变量名或者方法名，置于export的作用下，就可以被其他模块使用。

as关键词可以用来重命名，上面的例子中moduleA就等于moduleA2。

这里需要注意的是，export定义的是对外的接口，接口必须在模块内部被声明或实现过，不然就会报错。

var a = 1;
export a;//不报错

export b;//报错

import关键字

使用export定义了模块的接口之后，其他模块就可以通过import命令来引入这个模块

//moduleB.js
import {moduleA1, moduleA} from './moduleA.js';

import {module as moduleFunc} from './moduleA.js';

moduleFunc();

如上面的代码所示，通过import关键字从moduleA.js中引入了moduleA1、moduleA2、moduleFunc()三个变量，这样在这个模块中就能使用A模块中的变量了。

需要注意的是，import关键字有提升效果，也就是无论写在哪个位置，都和写在模块顶部效果一样。import加载模块的过程是在编译阶段执行的，代码运行之前就已经完成了加载过程。

如果我们需要引入一个模块中的所有变量，可以用下面的方法

//moduleC.js
import * as module from './moduleA.js';

module.moduleA;//"a"
module.moduleFunc();//"aa"

另外，import加载的文件是不会重复加载的

//moduleD.js
import {moduleA1} from './moduleA.js';
import {moduleA2} from './moduleA.js';

//等同于
import {moduleA1, moduleA2} from './moduleA.js';

moduleA.js只会加载一次。

export default

export default是用来声明模块的默认接口的。

//hello.js
var name = "dahan";
function sayHello(){
    console.log("Hello");
}

export default sayHello;

//person.js
import hello from './hello.js';
hello();
//"Hello"

使用export default声明的接口，引入的时候不需要使用大括号，也不用指定特定的变量名。

图片描述