JavaScript模块化编程(总结)

最新推荐文章于 2022-08-10 21:39:45 发布

(￣o￣) . z Z

最新推荐文章于 2022-08-10 21:39:45 发布

阅读量648

点赞数

分类专栏： js模块化文章标签： es6 node.js javascript npm 前端

本文链接：https://blog.csdn.net/weixin_47594564/article/details/114006790

版权

js模块化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是模块化编程？

随着javascript得到重视，在开发中实现越来越多的复杂的功能，导致一个页面出现多个js文件，这就造成了全局污染和依赖管理混乱的问题，所以就出现了模块化。模块化开发是一种管理方式解决了全局污染、依赖管理混乱和代码维护性差的一系列问题。

常见的模块化规范有哪些？

Commonjs、es6、AMD、CMD
在这里小编只重点介绍一下commonjs规范和se6规范

Commonjs规范：

特点：既可以在浏览器端运行，又可以在服务器端运行

使用方式：

暴露方式：module.exports 或 expots.xxx

注意：

module.exports === expost = {}
在commonjs模块规范中 module.exports 和 exports.xx 不能混合使用，如果混合使用以 module.exports 为主。

引入方式：require(‘url’)

注意：

如果引入的是自定义模块，必须写路径。
如果引入第三方模块，则直接写模块名。

在服务器端运行：

模块一代码：
let obj = {
    name: '张三',
    fun: function() {
    	console.log("姓名：" + this.name);
    }
};
module.exports = obj;
---------------------------
模块二代码：
let arr = [1, 5, 8];
exports.arr = arr;
---------------------------
main.js:
let module1 = require("./module/module1");
let module2 = require("./module/module2");
console.log(module1.name);
module1.fun();
console.log(module2.arr);
---------------------------
在终端直接运行结果：
张三
姓名：张三
[ 1, 5, 8 ]

目录结构图片：
在这里插入图片描述
在浏览器端运行：

注意：在浏览器中运行和服务器端运行方式不同！
因为在浏览器端中浏览器无法识别require，浏览器不认识require
解决方法如下：
第一步：全局安装 npm install browserify -g
第二步：使用browserify编译js前面生成的js browserify js/dist/app.js -o js/dist/build.js
官网：http://browserify.org/

模块一代码：
let obj = {
    name: '张三',
    fun: function() {
    	console.log("姓名：" + this.name);
    }
};
module.exports = obj;
---------------------------
模块二代码：
let arr = [1, 5, 8];
exports.arr = arr;
---------------------------
main.js:
let module1 = require("./module/module1");
let module2 = require("./module/module2");
console.log(module1.name);
module1.fun();
console.log(module2.arr);
---------------------------
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/dist/build.js"></script>
</head>

<body>

</body>

</html>

目录结构：
在这里插入图片描述
浏览器端运行结果：

es6规范：

特点：只能在浏览器端运行，服务器端不能运行

使用方式：

暴露方式：分三种
1.分别暴露：export xxx
此种引入方式会将module暴露的内容，收集成一个对象：
import * as obj from “路径”
2.统一暴露
export {xxx}
此种引入方式会将module暴露的内容，收集成一个对象：
import * as obj from “路径”
3.默认暴露 export defalut xxx

注意：

默认暴露只能暴露一次

引入方式：分二种
1.import {xxx} from ‘路径’
1.分别暴露，统一暴露：
-import {xxx} from ‘路径’
-import * as obj from “路径”
-此种引入方式会将module暴露的内容，收集成一个对象：
2.默认暴露：（本身就暴露了一个对象）
import xxx from '路径’

注意：

几乎所有的第三方模块都用默认暴露的方式
当混合使用的时候默认暴露直接写变量名而统一暴露和分别暴露则需要统一写在{}里，这两个用逗号隔开。

浏览器端运行：
安装babel-cli , babel-preset-es2015 , browserify:
第一步：全局安装 npm install babel-cli browserify -g //转换成es5语法和编译es6模块化
第二步：局部安装 npm install babel-preset-es2015
第三步：创建.babelrc文件(给babel指定任务)
{
“presets” : [“es2015”]
}
第四步：编码 babel js/src -d js/dist
第五步：使用browserify编译js前面生成的js browserify js/dist/app.js -o js/dist/build.js

模块一代码：（分别暴露）
export let obj = {
    name: '张三',
    fun: function() {
        console.log("姓名：" + this.name);
    }
};
export let obj2 = {
    name: '李四',
    fun: function() {
        console.log("姓名：" + this.name);
    }
};
module.exports = obj;
---------------------------
模块二代码：（统一暴露）
let arr = [1, 5, 8];
let arr2 = [4.8, 3];
export { arr, arr2 };
---------------------------
模块三：（默认暴露）
let obj = {
    name: "王五",
    age: "20",
    fun: function() {
        console.log("姓名：" + this.name + "年龄:" + this.age);
    }
}
export default obj;
---------------------------
main.js:
let module1 = require("./module/module1");
let module2 = require("./module/module2");
console.log(module1.name);
console.log(module2.arr2);
module3.fun();
---------------------------
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/dist/build.js"></script>
</head>

<body>

</body>

</html>

目录结构：
在这里插入图片描述
运行结果：

(￣o￣) . z Z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript模块化编程(总结)

什么是模块化编程？        随着javascript得到重视，在开发中实现越来越多的复杂的功能，导致一个页面出现多个js文件，这就造成了全局污染和依赖管理混乱的问题，所以就出现了模块化。模块化开发是一种管理方式解决了全局污染、依赖管理混乱和代码维护性差的一系列问题。常见的模块化规范有哪些？Commonjs、es6、AMD、CMD在这里小编只重点介绍一下commonjs规范和se6规范Commonjs规范：
复制链接

扫一扫