javaScript 里面的模块化

最新推荐文章于 2024-10-11 17:39:47 发布

fly_1_2_3

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量169

点赞数

分类专栏： ECMA6 文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_43684022/article/details/126631794

版权

ECMA6 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.两种方式

1.CommonJS

2.ES6

1.CommonJS

常用于后端编写规范。

特征：

1.模块是运行时加载。

2.require()是同步加载模块。

3.只能是模块里面值的拷贝。

2.ES6

常用于前端编写（VUE REACT)

特征：

1.ES6 模块的import命令是异步加载。

2.ES6 模块是编译时输出接口。

3.可以直接输出模块里面变量的引用。（可以，具体看写法）

3. 两个暴露出来的对象都被全部模块共享！

（ CommonJS 共享一个对象，export default {..} 共享这个对象）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fly_1_2_3

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Javascript中的模块化详解

ICanWin_lll的博客

10-08

724

事实上模块化开发最终的目的是将程序划分成一个个小的结构；这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；也可以通过某种方式，导入另外结构中的变量、函数、对象等；

【JavaScript】模块化规范

前端学习博客

04-01

3346

文章目录JavaScript 模块化规范CommonJS定义和引用特性举例require文件查找规则模块的加载过程CommonJS规范缺点AMD定义和引用CMD定义和引用ES6 模块定义和引用exports关键字(导出)import关键字(导入)export和import结合使用default用法 JavaScript 模块化规范 JavaScript 模块化规范，包括原生规范 ES6 模块、Node.js 采用的 CommonJS，以及开源社区早期为浏览器提供的规范 AMD，具有 CommonJS 特性和

参与评论您还未登录，请先登录后发表或查看评论

javascript的模块化

拥抱变化！

09-08

1445

使用require(“模块的路径”)函数来引入模块模块名要以./ 或 …/开头扩展名可以省略（除了扩展名是.cjs）在 JavaScript 中，引入模块时可以省略文件扩展名。当引入的模块是 JavaScript 文件（.js）、JSON 文件（.json）和node（.node）时，可以不写扩展名，Node.js 会根据需要自动解析文件类型并加载对应的模块。* 如果没有.js 后缀的同名文件它会寻找 .json后缀的。（如果两个后缀名都有，则优先导入后缀名为.js的）

Javascript前端模块化

点火三周的专栏

06-30

3098

随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。 Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Ja

javascript模块化之require.js

铁臂阿凡达的博客

03-11

5145

一、模块化的由来在没有模块化思想之前，我们总是将大量的逻辑代码写在一起，这样的代码杂乱无章，没有条理性，不便于维护，不利用复用。并且很多代码重复，逻辑重复。甚至造成全局变量污染，也不方便保护私有数据。为了解决上面的问题，模块化的编程思想应运而生。 模块化的基本思想就是：闭包自调用函数对闭包了解不够的同学，请先查看《 JS闭包全面解析》一文。二、模块规范想要了解模块化就要先知道JS中3个...

JavaScript模块化-ES Module

m0_71485750的博客

07-16

1067

JavaScript没有模块化一直是它的痛点font>，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等，所以在ECMA推出自己的模块化系统时，大家也是非常兴奋。ES Module和CommonJS的模块化有一些不同之处：ES Module模块采用export和import关键字来实现模块化：了解：采用ES Module将自动采用严格模式：use strict注意: 如果直接在浏览器中运行代码，会报错, 这个报错在MDN上面有给出解释：我这里使用的VSCode插件：Live Serve

初探Javascript模块化开发

levin217的博客

12-06

1494

随着简单网页逐渐变成交互复杂的网站应用，网页上的Javascript代码也变得越来越庞大，越来越复杂。加之随即而来的多人协作分工的开发方式，每个人只负责其中一个或者几个很小的功能模块，最终必须通过把各个功能模块组合才能变成一个完整的功能。而多个模块又涉及到加载顺序，依赖关系等的影响，当功能模块增加、依赖关系越来越复杂的时候，让人工的去保证这些信息的严格正确性已经变得更加困难了。在这种情况下

javascript：模块化以及块作用域

胡世林的博客

06-05

1392

现在的前端，基本都是用模块化的方式来写代码了，也是，毕竟一个项目太多js文件的情况下，全局污染必定存在，而js又提供了闭包，能很好的避免污染的问题作用域大家都知道，就比如一个匿名函数，内部定义了一个变量，而这个变量的作用域就是在这个函数中，在其他的函数中无法调用到这个变量，比较麻烦，不像java等语言一样，可以用class，于是，js要获得块级作用域就只能用刚刚说的闭包来处理了，代码模式...

JavaScript模块化开发的演进历程

IronKee的博客

12-14

1463

JavaScript模块化开发的演进历程

JavaScript 模块化编程一

JackieLiuLixi的专栏

06-25

812

Javascript模块化编程(三)require.js的用法及功能介绍

12-10

这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。我采用的是一个非常流行的库require.js。一、为什么要用require.js？最早的时候，所有Javascript代码都写在一...

很全很全的JavaScript模块讲解

02-25

在JavaScript里面，如果一个变量在最顶级的函数之外声明，它就直接变成全局可用。因此，常常不小心出现命名冲突的情况。使用模块化开发来封装变量，可以避免污染全局环境。重用代码。我们有时候会喜欢从之前写过的...

JavaScript模块化开发

JUSNYA的博客

09-14

630

◼ 我们需要知道CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它的广泛性，修改为CommonJS，平时我们也会简称为CJS。 事实上AMD的规范还要早于CommonJS，但是CommonJS目前依然在被使用，而AMD使用的较少了； 注意：这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的； 在Node中每一个js文件都是一个单独的模块； 它也采用的也是异步加载模块，但是它将CommonJS的优点吸收了过来；

JavaScript-ES6模块化内容

LEElcg的博客

02-06

461

这篇文章讲述了ES6模块化，从模块化的简述，到特点，再有基本的暴露导出，还有默认暴露导出。本文讲解较详细。值得一看

【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台

杨荧的CSDN博客

10-10

1445

教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。

Puppeteer自动化：使用JavaScript定制PDF下载

ip16yun的博客

10-08

917

Puppeteer 是一个强大的Node.js库，提供了对无头Chrome或Chromium的控制，可以用于生成网页快照、抓取数据、自动化测试等任务。其中，生成PDF文件是一个常见的需求，本文将通过使用Puppeteer展示如何自动化生成定制的PDF，并使用代理IP、设置user-agent、cookie等技术来增强自动化过程的灵活性与稳定性。为了更好地理解如何定制Puppeteer生成的PDF文件，我们提供一个生成A4纸张格式的网页PDF的实例。用户可以根据需求自定义输出的PDF格式或内容。

javascript中==和===有什么不同

qq_48763502的博客

10-09

442

这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。

【JavaScript】移动色块案例实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）

最新发布

m0_66584716的博客

10-11

1332

- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个

探秘纯前端Excel表格：构建现金流量表的完整指南

葡萄城技术团队博客

10-10

1110

现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。。

模块化vuex怎么获取模块里面的值

05-24

在使用模块化的 Vuex 中，获取模块里面的值需要使用模块命名空间（module namespace）。在定义模块时，可以通过 `namespaced: true` 开启模块命名空间，这样在获取模块内部的状态、getters、mutations、actions 时，就需要加上模块的命名空间。举个例子，假设我们有一个 `user` 模块，其中定义了一个 `state`： ```javascript // user.js export default { namespaced: true, state: { name: '小明', age: 18 } } ``` 如果要在另一个模块中获取 `user` 模块的 `name` 值，可以这样写： ```javascript // other.js export default { computed: { userName() { return this.$store.state.user.name } } } ``` 但是在使用模块命名空间后，就需要添加模块命名空间前缀： ```javascript // user.js export default { namespaced: true, state: { name: '小明', age: 18 } } // other.js export default { computed: { userName() { return this.$store.state.user.name // 错误，需要加上模块命名空间前缀 // return this.$store.state['user'].name // 正确的方式 } } } ``` 如果需要在 getters、mutations、actions 中访问模块内部的状态和其他函数，也需要加上模块命名空间前缀，例如： ```javascript // user.js export default { namespaced: true, state: { name: '小明', age: 18 }, getters: { getNameAndAge(state) { return `${state.name} - ${state.age}` } }, mutations: { setName(state, newName) { state.name = newName } }, actions: { changeName({ commit }, newName) { commit('setName', newName) } } } // other.js export default { computed: { nameAndAge() { return this.$store.getters['user/getNameAndAge'] // 获取 user 模块的 getters } }, methods: { changeName(newName) { this.$store.commit('user/setName', newName) // 调用 user 模块的 mutation this.$store.dispatch('user/changeName', newName) // 调用 user 模块的 action } } } ``` 以上就是在模块化 Vuex 中获取模块里面的值的方法。