js模块化规范—commonjs

时间:2022-09-29 18:40:45

commonjs规范说明

每个js文件都可当作一个模块

在服务器端: 模块的加载是运行时同步加载的(不会阻塞,等待时间回比较长)。在浏览器端: 模块需要提前编译打包处理

commonjs规范基本语法

暴露模块:暴露的模块本质上就是exports,exports本来就是一个空的对象,将value赋给它

module.exports = value

exports.xxx = value

引入模块:第三方模块:xxx为模块名。自定义模块: xxx为模块文件路径

require(xxx)

commonjs基于服务器端(node)应用

/**
* 使用module.exports = value向外暴露一个对象
*/
"use strict"
module.exports = {
foo() {
console.log('moudle1 foo()')
}
}
/**
* 使用module.exports = value向外暴露一个函数
*/
"use strict"
module.exports = function () {
console.log('module2()')
}
/**
* 使用exports.xxx = value向外暴露一个对象
*/
"use strict"
exports.foo = function () {
console.log('module3 foo()')
} exports.bar = function () {
console.log('module3 bar()')
}
"use strict"
//引用模块
let module1 = require('./modules/module1')
let module2 = require('./modules/module2')
let module3 = require('./modules/module3')
let uniq = require('uniq') // 安装的一个npm包
let fs = require('fs') //使用模块
module1.foo()
module2()
module3.foo()
module3.bar() console.log(uniq([1, 3, 1, 4, 3])) fs.readFile('app.js', function (error, data) {
console.log(data.toString())
})

js模块化规范—commonjs

commonjs基于浏览器端应用

创建项目结构

|-js
|-dist //打包生成文件的目录
|-src //源码所在的目录
|-module1.js
|-module2.js
|-module3.js
|-app.js //应用主源文件
|-index.html
|-package.json
{
"name": "browserify-test",
"version": "1.0.0"
}

下载browserify

Browserify:也称为CommonJS的浏览器端的打包工具

全局: npm install browserify -g,局部: npm install browserify --save-dev

定义模块1

/**
* 使用module.exports = value向外暴露一个对象
*/
module.exports = {
foo() {
console.log('moudle1 foo()')
}
}

定义模块2

/**
* 使用module.exports = value向外暴露一个函数
*/
module.exports = function () {
console.log('module2()')
}

定义模块3

/**
* 使用exports.xxx = value向外暴露一个对象
*/
exports.foo = function () {
console.log('module3 foo()')
} exports.bar = function () {
console.log('module3 bar()')
}

app.js (应用的主js)

//引用模块
let module1 = require('./module1')
let module2 = require('./module2')
let module3 = require('./module3') let uniq = require('uniq') //使用模块
module1.foo()
module2()
module3.foo()
module3.bar() console.log(uniq([1, 3, 1, 4, 3]))

打包处理js

browserify js/src/app.js -o js/dist/bundle.js

页面使用引入

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<script type="text/javascript" src="js/src/app.js"></script>-->
<script type="text/javascript" src="js/dist/bundle.js"></script>
</body>
</html>