js学习笔记（九）

JavaScript

JavaScript 模块的导入与导出

js模块的产生是便于代码的复用，可以从一个程序导出也可以导入到另一个程序中使用。
- 代码的可维护性和易用性提高；
- 复用代码的逻辑框架
- 保护模块也保护不受其他模块影响
- 解决命名空间问题和命名冲突问题

一、模块modules的导出

模块导出可以使用module.exports来导出

let Animal ={}  //定义一个代表模块的对象
Animal.name = 'dog'  //添加模块的属性
Animal.age = 1
module.exports = Animal  //将Animal对象作为模块导出，其中module代表了这一模块，exports将这一模块作为对象导出。
//--------------------------------------

//另一中导出的方法，利用module.exports={code集合}来定义需要导出的属性和方法,定制
let plant = {}  //同样定义一个对象代表导出的模块
module.exports{
    name: 'flower',
    age : 1,
    showName(){console.log(this.name)}, //使用this指针指代导出的对象。
//注:对象的函数定义可以使用函数表达式，也可使用es6新方法》》但箭头表达式有疑问《《？？
//注：两种导出方法不要混用
}
//--------------------------------------

//es6中导出模块可用export default代替module.exports
let Micro = {
    name: 'cell',
    age: 'days',
    exportName: function(){return this.name},
}
export default Micro  //利用export default 来代替先前的module.exports
//注：此时导入模块需要使用 import moduleNameVar from './modulefilename',无需js后缀，import name可以自定义
//--------------------------------------

//第四种方法称为命名导出named export，无需定义模块对象。直接将需要的数据函数对象变量导出即可，此方法得名于直接导出相应变量名。
let sea = ['red sea','mediterranean sea']
function showName(){console.log(sea[1])}
export {sea, showName} //直接导出对应的变量名，可分行写导出多次多个变量
//--------------------------------------

//第四种方法可以直接在变量名前加注 关键字export 注明为可导出变量
export let sky = 'blue'
export function show(){console.log(sky)}
//之间将变量名expose出去即可使用，export关键字标明了变量可以导出的属性 
//导入变量时同样需要import {name}形式来导入
//--------------------------------------

//第五中方式是别名导出的方式 export {varName1 as alias，varName2 as alias2...}
let animnalName = 'dog'
function showAnimal(name){console.log(name)}
//先定义变量与函数对象，随后利用别名导出
export {animalName as Aname, showAnimal as showA}   //此时用Aname指代了animalName，showA指代了showAnimal()

导出模块共分为三步：
- 定义一个表示模块的对象
- 为模块添加数据和方法（func）
- 导出模块module.exports

二、模块的导入require()

利用require()函数导入模块，从而可以外部控制模块内部的数据和行为。

const Animal=require('./animal.js')  //从animal.js这个文件中导入模块，需要用const定义一个变量来接收导入的模块，常量的命名自由
console.log(Animal.name)  //操作模块内部的数据
//--------------------------------------

//当使用export default 形式导出时
import moduleNameVar from './modulefilename'  // 需要使用import 的形式导入，其中moduleNameVar即为导入后代表模块的变量名，无需后缀
//--------------------------------------

//当使用export {varName1,varName2,...}形式导出时
import {varName1,varName2,} from 'moduleFilePath/Name'   //从文件名导入无需js后缀
//import {} 可以分行写导入，多次导入多个模块变量
//--------------------------------------

//当变量直接export前缀时，可以直接导入变量名，与上同
import {varName1,..} from 'moduleFileName'
//导入的变量名包含了方法和属性数据，可以直接通过变量名访问使用
//若导出时使用了混合导出，既有export {}，也有export default obj，
//function isAnimalWow() {};
//export default isAnimalWow;
//则导入时需要另起一行import 导入default的对象
//--------------------------------------

//别名导入的方式 import 别名 from 'moduleFile'
import {var_alias1,...} from './menu';
//若没有用export导出别名，而是直接导出全名，则可利用import var1Name as alias来导入
impot {varName1 as alias1，varName2 as alias2,...} from './moduleFileName'
//--------------------------------------

//整体导入，将所有的变量作为整体别名模块导入，类似python
import * as Alias from 'moduleFileName'

导入模块主要分为两步：
- require('module/path')或者import导入模块所在js文件；
- 可以利用函数、表达式操作代表模块的const变量，从而操作模块内部的属性数据和方法。

三、总结

利用module.exports 导出模块，利用require()导入模块
ES6标准中可以利用export, export default， export as等导出，利用import 导入

tips
1.js**导出**模块时的一些迷惑 module.exports

module.exports 初始值为一个空对象 {}
exports 是指向的 module.exports 的引用
require() 返回的是 module.exports 而不是 exports

2.js的this指针
3.老版本的类定义方法
4.import {} 和 export {}可以分行写，导入多个模块或变量