作者:CSDN-PleaSure乐事
欢迎大家阅读我的博客 希望大家喜欢
使用环境:vscode Chrome浏览器
目录
1.模块化概述
1.1什么是模块化
- 将程序⽂件依据⼀定规则拆分成多个⽂件,这种编码⽅式就是模块化的编码⽅式。
- 拆分出来每个⽂件就是⼀个模块,模块中的数据都是私有的,模块之间互相隔离。如果不进行隔离,可能会造成模块间的变量定义有冲突,导致程序崩溃。
- 同时也能通过⼀些⼿段,可以把模块内的指定数据“交出去”,供其他模块使⽤。
1.2为什么需要模块化
随着应⽤的复杂度越来越⾼,其代码量和⽂件数量都会急剧增加,会造成如全局污染、依赖混乱、数据安全等问题。
1.2.1全局污染
其中全局污染问题是html文件引入不同js文件时,js当中同名的函数、变量等因引入先后顺序的问题导致相互覆盖,最终造成调用不清晰的问题,如a.js和b.js中都包含函数getData,但是由于a先引入而b后引入,最终在函数调用时,我们会使用b、中的getData。
1.2.2依赖混乱
依赖混乱主要是由于引入js文件顺序不同最终导致页面效果混乱,例如若某几个js文件引入后正常显示轮播图效果,但是改变其中某些文件的顺序后,则控制台会直接产生报错:
1.2.3数据安全
在js文件引入后,若不及时有效处理,可能会直接造成用户密码等敏感信息泄漏,进而造成损失。
2.有哪些模块化规范
随着时间的推移,针对 JavaScript 的不同运⾏环境相继出现了多种模块化规范。按照时间排序有以下四种模块化规范:
- CommonJS——服务端应用广泛
- AMD
- CMD
- ES6模块化——浏览器端应用广泛
3.导入与导出
模块化的核⼼思想就是:模块之间是隔离的,通过导⼊和导出进⾏数据和功能的共享。
3.1导入
导入的概念是引入并使用其他模块导出的内容,并重用其代码和功能。
3.2导出
导出的概念是模块公开一部分内容,例如变量函数等使得其他模块可以使用这些变量函数。
3.3大白话
导入与导出使用通俗的大白话讲就是一家商店卖(导出)一些商品(变量或方法)给顾客,顾客对商品进行购买(导入),并使用它们(重用)。这就是模块的导入与导出。
4.CommonJs
4.1准备阶段
首先我们先准备两个js文件供后续使用:
4.1.1文件1:school.js
const name = '蓝翔'
const slogan = '你干嘛哎呦'
function getTel (){
return '12345678'
}
function getCities(){
return ['北京','上海','深圳','成都','武汉','西安']
}
4.1.2文件2:student.js
const name = '张三'
const motto = '我可以'
function getTel (){
return '246810'
}
function getHobby(){
return ['唱','跳','rap']
}
此时在两个js文件当中我们都未讲文件进行导出,若此时我们想要在另外一个js文件当中对school和student文件进行引入,会产生如下问题:
若我们右键进行run code操作,会发现控制台打印一个空对象,原因是此时我们并没有给school和student当中的对象“填入”内容,会导致最终打印出空对象。
因此我们就需要引出4.2的内容:导出数据。
4.2导出数据
4.2.1方法一
首先是方法一,若我们不想要打印的对象为空对象,我们可以使用exports来导出,我们在student.js后加入这段代码即可实现导出:
exports.name = name
exports.slogan = slogan
exports.getTel = getTel
在school当中使用exports一样有效:
4.2.2方法二
我们使用module.exports也可以得出类似的效果。我们可以使用module直接赋值称为对象。
在两个js文件当中,分别加入如下代码即可达成与exports类似的效果:
//school.js
module.exports = {name,slogan,getTel}
//student.js
module.exports = {name,motto,getTel}
4.2.3注意点
在进行数据导入时,我们需要注意每个模块内部的this、exports、modules.exports 在初始时,都指向同⼀个空对象,该空对象就是当前模块导出的数据。⽆论如何修改导出对象,最终导出的都是 module.exports 的值。
4.3导入数据
如果我们想要导入数据,那我们直接在index.js当中使用require即可:
//赋值前直接进行解构
const {name,slogan,getTel} = require('./school.js')
//使用重命名防止变量名冲突,即变量名+冒号
const {name:stuName,motto,getTel:stuTel} = require('./student.js')
console.log(name)
console.log(slogan)
console.log(getTel())
console.log(stuName)
console.log(motto)
console.log(stuTel())
最终会得出如下结果:
4.4在浏览器中使用上述代码
Node.js 默认是⽀持 CommonJS 规范的,但浏览器端不⽀持,所以需要经过编译。
因此我们可以得出如下步骤:
首先我们需要全局安装browserify
npm i browserify -g
然后进行编译
browserify index.js -o build.js
随后会生成build文件,我们在页面中进行引入就可以完成代码在浏览器端的引入与使用。
作者:CSDN-PleaSure乐事
希望我的博客对您有帮助,也希望在对您有帮助时您可以为我留下点赞收藏与关注,这对我真的很重要,谢谢!