nodejs和前端js模块导出和引入

经常容易忘记node的模块导入和导出的细节,还有就是上次作业node和前端js导入导出分不清,所以特意进行测试记录

node中模块导入和导出

学习网址

module

node中的module对象,通过console.log(),可以看到以下结果

Module {
  id: '.',
  exports: {},
  parent: null,
  filename: 'D:\vscode_work\houduanwork\test\test.js',
  loaded: false,
  children: [],
  paths:
   [ 'D:\vscode_work\houduanwork\test\node_modules',
     'D:\vscode_work\houduanwork\node_modules',
     'D:\vscode_work\node_modules',
     'D:\node_modules' ] }

module.filename 模块的文件名,带有绝对路径。
module.loaded 返回一个布尔值,表示模块是否已经完成加载。
module.parent 返回一个对象,表示调用该模块的模块对象。
module.children 返回一个数组,表示该模块要用到的其他模块对象。
module.exports 表示模块对外输出的值。

module.exports和exports

module.exports={a:”1”,b:”2”}

exports.a:”1”

exports.b:”2”

module.exports和exports两者结果相同.

本质上两者等同于如下关系。公用同一个对象。

let exports = module.exports;

在新版的node中不支持export和export default。所以在node中文件导出基本就是对module.exports进行操作.

require

//foo.js

var firstName = 'Michael';
var lastName = 'Jackson';

exports.ahh = firstName;
exports.lastName = lastName;

//test.js

const  hh = require('./foo');
console.log(hh);
//{ ahh: 'Michael', lastName: 'Jackson' }

require接受的是对应的module.exports中的数据,一般为对象.所以经常用解构赋值获取其中的值.

const  {ahh,lastName} = require('./foo');
console.log(ahh,lastName);
//Michael Jackson

require同一个文件多次只有最后一次有效.

导入模块在node中只有require.

在前端js中的模块导入和导出

学习网址

在非webpack中 大专栏  nodejs和前端js模块导出和引入,在html引入需要引用其他模块的js,需要将 type=”module” 否则

出现Cannot use import statement outside a module

<script src="./test.js" type="module"></script>

export

export导出模块要注意写法,因为export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系,也就是说必须要提供一个key一个value值。下面的错误写法,本质上都是只提供了一个值。

错误写法:

// 报错
export 1;

// 报错
var m = 1;
export m;

正确写法:

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

同理 function和class的输出,也遵循这种写法

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

export可以任意位置,任意多个,但是不能放在块级作用域比如说函数中

import

通过import…from加载模块,变量名必须和接口名一致,可以通过as进行重命名

import {a,b} from "./foo.js"
import {a,b as ahh} from "./foo.js"

import 可以直接去执行被import的模块

test.js

import "./foo.js"

foo.js

console.log("233")
//浏览器中可以看到输出

export default

相比较与export,export default不需要知道所要加载的变量名称。使用import时可以任意命名。

test.js

import ahh from "./foo.js"
ahh()//foo

foo.js

export default function () {
    console.log('foo');
}

export default中函数名在模块外部无效。

// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者写成  在export中这种写法无效

function foo() {
  console.log('foo');
}

export default foo;

export default 本质上就是输出一个default的变量或者方法

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

因此

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

// 正确
export default 42;

// 报错
export 42;

欢迎指出任何有错误或不够清晰的表达。

猜你喜欢

转载自www.cnblogs.com/liuzhongrong/p/12408265.html