js模块化

最新推荐文章于 2021-12-29 20:14:52 发布

要爆炸的臭臭君

最新推荐文章于 2021-12-29 20:14:52 发布

阅读量199

点赞数 1

分类专栏： nodeJS web 文章标签： node.js javascript es6

本文链接：https://blog.csdn.net/weixin_46475440/article/details/113356914

版权

web 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

nodeJS

3 篇文章 0 订阅

订阅专栏

一、何为模块化？

javascript中，有两种格式的模块，一种是Node.js专用的CommonJS模块，简称CJS，另一种为，ES6模块简称ESM。

二、两种模块的差异（CommonJS和ESM）、

CommonJS是使用require()方法引入，module.exports进行抛出，而ESM是使用import引入，export抛出
CommonJS是同步执行的，而ESM是异步执行的！

三、node中模块分类

在nodejs中，应用有模块组成，一个js文件就是一个模块，每个js文件都是一个独立的作用域，在这个文件中定义的变量，函数，对象，都是私有的，对其他文件不可见

核心模块

由node本身提供，不需要自行安装，可以直接引用

例：

1、fs模块（文件操作模块）

const fs = require('fs')

fs.readFileSyc(url,codeformat)//读取文件内容，使用变量接收返回值（同步执行）
fs.readFile(url,codeformat,callback(error,data))//读取文件内容，回调函数中的data为读取的数据（异步执行）

2、http模块（网络操作模块）

const http = require('http')
var server = http.createServer(function(request,response){}).listen(port)
server.on('request',function(request,response){
    
})

3、url模块（解析地址模块）

var myurl = new URL(input,base)
myurl.search  //获取地址后面传值
myurl.searchparams.get(attribute)
myurl.pathname //获取url的路径部分

4、path模块（路径操作模块）

const path = require('path')
path.extname('index.html') //extname返回文件后缀名
__dirname  返回当前文件的绝对路径

5、querystring模块（解析参数字符串的模块）

第三方模块

由社区或者个人提供的模块，需要通过npm或者cnpm进行安装后使用

例：

1、nodemon （实时运行模块）

这个安装后使用命令行工具

node index.js（正常命令）

nodemon index.js（使用nodemon命令）

2、mysql （数据库连接操作模块）

const mysql = require('mysql')
var connection = mysql.createconnect({
    "host":'localhost',
    "user":"root",
    "password":"root",
    "database":"sys",
    "port":"3306"
})
connection.query(sql,sqlbind,callback)//执行SQL命令

3、mime （判断请求文件的类型）

const = require('mime')
var url = "index.js";
var type = mime.getType(url)

4、moment （时间转换模块）

const moment = require('moment')
//创建一个时间戳
var date = Date.now()
//使用moment中的函数进行格式转化
console.log(moment(date).format('YYYY年MM月DD日 HH:mm:SS'))

自定义模块

由我们自己创建的js文件

使用module对象里的exports对象抛出一个模块，使其他文件可以引用这个模块中的方法或变量

演示：

//module1.js文件
var a=1;
var b=2;
function sum(a,b){
    return a+b
}
//抛出模块
module.exports={
    a,
    b,
    sum
}

//module2.js文件（引入module1.js模块）
var res = require('./module1')//引入模块，注意路径，根据实际路径写入(可以不加后缀名)
console.log(res.sum(res.a,res.b))//输出结果为3

四、ES6模块

使用ESM跟CommonJS的用法有好多不同之处，比如文件后缀名以及，package.json文件的配置

如果nodejs中要是用引用ES6模块，写有import方法的文件和写有export方法的文件的后缀名，必须是mjs，如果希望改变后缀名的话可以在package.json文件中写入:

{
    "type":"module"
}

演示代码：

//module1.mjs文件

let a = 'hellow'
let b = 'word'
export {
    a,
    b
}

//module2.mjs文件（需要使用module1.mjs文件）
import {a,b} from "./module1.mjs";//引入的变量或方法，需要使用逗号隔开，需要使用花括号括起来。（路径必须写后缀名）
console.log(a,b)//输出结果为hellow word

如果想要在前端页面中的js脚本中使用ESM需要在script标签引入的时候加type属性为module

演示代码：

<--index.html 文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <--script标签引入时要加type属性为module-->
    <script type="module" src="./module2.js"></script>
</body>
</html>

//module1.js文件
let a='hellow'
let b='word'
let sum = (a,b)=>{
    console.log(a+" "+b)
}
export {
    a,
    b,
    sum
}

//module2.js文件
import { a,b,sum } from './module1.js';//注意加后缀
console.log(a,b)//输出结果为hellow word
sum(a,b)//输出结果为hellow word

要爆炸的臭臭君

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录