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 {}
可以分行写,导入多个模块或变量