前端工程化(二)(精品、面试必备基础)(春招、秋招)

目录

什么是模块化?

事实上模块化开发最终的目的是将程序划分成一个个小的结构

这个结构中编写属于自己的逻辑代码,有自己的作用域,定义变量名词时不会影响到其他的结构;

CommonJS规范和Node关系

复制代码
 我们需要知道CommonJS是一个规范,最初提出来是在浏览器以外的地方使用,并且当时被命名为ServerJS,后来为了体现它
的广泛性,修改为CommonJS,平时我们也会简称为CJS。

Node 是 CommonJS在服务器端一个具有代表性的实现;
Browserify 是CommonJS在浏览器 中的一种实现;
webpack 打包工具具备对CommonJS的支持和转换;

模块化的核心

导入和导出
导出
exportsmodule.exports 可以负责对模块中的内容进行导出
require 函数可以帮助我们导入其他模块 (自定义、系统、第三方库模块)

exports 导出 & require 导入

exports是一个对象 ,我们可以在这个对象中添加很多个属性,添加的属性会导出;

导出

javascript 复制代码
let FriendName = "康康"
exports.FriendName = FriendName
// 两秒后, 修改一下 FriendName
setTimeout(()=>{
    exports.FriendName = "芜湖"
},2000)

导入

javascript 复制代码
const bar = require('./bar.js');
console.log(bar.FriendName)
setTimeout(() => console.log(bar.FriendName),5000)

结果

康康

芜湖

说明

也就是require通过各种查找方式,最终找到了exports这个对象;

并且将这个exports对象赋值给了bar变量;

bar变量就是exports对象了;

所以后面

setTimeout(()=>{

exports.FriendName = "芜湖"

},2000) 一定要 exports.FriendName 才可以修改 FriendName

模块加载(持续更新)

相关推荐
进击的丸子22 分钟前
APP人脸识别增值版Harmony Demo实操与关键代码解析
前端·程序员·harmonyos
a11177636 分钟前
唯美花朵风格的黑胶唱片音乐播放器
前端·css·css3
尤乐娃子1 小时前
进入大厂(厂子大)实习Day4
职场和发展·实习
Hilaku1 小时前
工作 5 年后,决定你薪资上限的究竟是什么?
前端·javascript·程序员
爱分享的程序猿-Clark1 小时前
【前端分享】vue3 有 keep-alive属性吗?
前端
Revolution611 小时前
页面更新后为什么出现 Loading chunk failed:旧页面如何请求了已删除的构建产物
前端·面试·前端工程化
JavaGuide1 小时前
GitHub 9.8 万 Star!把整个代码仓库变成知识图谱,这个 AI Coding 工具太适合 Claude Code / Codex 了
前端·后端·ai编程
hunterandroid1 小时前
[鸿蒙从零到一] HarmonyOS 通知与提醒实战:消息发布、点击跳转与定时触达
前端
Lxinz1 小时前
vscode调试ts代码思路
前端
极梦网络无忧2 小时前
real-ai-editor:一款轻量、智能的纯前端 AI 富文本与 Markdown 编辑器
前端·人工智能·编辑器