Vuejs学习笔记(二)-13.javascript模块化

常见模块化规范：CommonJS,AMD,CMD,ES6的Modules,现在一般用到CommonJS和ES6的modules.

由于后续学习的webpack使用到了CommonJS.此处需要了解以下。

 

一、CommonJS模块化

CommonJS导出的语法：

var flag = true

function sum(num1,num2){

　　return num1+num2

}

 

module.export = {

　　flag:flag

      sum: sum

}

CommonJS导入命令：

var {flag,sum} require( '../xxx.js')

var sum = xxx.sum;

var flag = xxx.flag;

 

二、ES6模块化

2.1第一种导入导出方式

1.html内需要在script中引用js文件，并将其设置成模块类型

 

 2.在a.js文件中定义变量和方法，并将变量和方法导出

 

 

3.b.js中导入a.js文件，并且导入需要的模块，然后进行使用

 

 4.控制台打印结果

 

 

 

2.2 第二种导入导出方式，直接导出

1.html内需要在script中引用js文件，并将其设置成模块类型

 

 

 

 2.在c.js文件中定义变量和方法，并将变量和方法导出

 

 

3.d.js中导入c.js文件，并且导入需要的模块，然后进行使用

 

 

 三、默认导出项

之前的导出由于参数较多，所以在使用时都使用大括号{}，在某些场景下，对于导入者来说，想自己命名模块名称

3.1 导出使用default，但是一个模块只能有一个default导出

 

 

3.2 导入时，自己命名

 

 

四、导入的灵活写法

4.1 全部导入

先看导出值，有多个类型导出

 

 导入文件直接使用 * 

import * as a from './c.js'