JavaScript模块化的那些事最骚操作

简介: JavaScript模块化的那些事最骚操作

模块化是一个很重要的编程思想,如果没有模块化,把代码写到一个文件里会造成代码很难阅读,并且文件体积也会变大,模块化就是把功能相似的代码放到一个文件中,然后通过模块导出让别人文件可以使用的代码,其他文件就可以通过导入进行使用模块中的导出的代码,这样就可以提高代码的复用性和封装性

导出模块 export

导出代码具体点叫导出模块
//es6原生支持模块化的加载
export 关键字 导出模块
export function formdata(){
console.log('我是菜菜')
}

导入模块 import

//如果需要在别的文件中使用已经导出的模块,需要导入导出模块的文件
//如果是通过外部引入js文件的页面需要在script标签上加个type=‘module’这个属性 
//为引入的这个js文件开启模块化,就不会和其他的js文件同名变量冲突
//这样才能使用import关键字,(因为type=“module”使得浏览器提供了一些支撑,所以type=“module”之后就可以使用es6的模块化,如果不设置则使用不了)
<script src='./index.js' type='module'></script>
//index.js
import{formdata} from‘路径’;
//使用
formdata()
//vscode支持自动导入

导出多个条目

//命名方式的导出
export{formdata,dit}
导出的时候用的什么名字,导入的时候就使用什么名字

默认导出

导出
export default formdata;
//使用default导出的话,导入就不用了指定导入的名字了
导入
import kk from‘路径’;

混合导入导出

导出
export default formdata;
export {dit};
导入
import formt,{dit}form ‘路径’;

别名导入 as 关键字

导出
export {dit};
导入
import {dit as data}form ‘路径’;

全部导出和导入

可以把一个模块所有导出的条目一次性导入,给他一个名字,他会用这个名字创建一个对象,通过他可以
访问所有导出的条目
//所有导出的条目用星号表示,然后通过as关键字给他一个别名
import * as data form ‘路径’;
//默认导出的条目没有名字
//默认条目导出
export default formdata;
//调用默认导出条目需要用一个default属性来访问他,default就是那个函数
data.default();
没有通过默认导出的条目直接通过对象点的方式调用即可
data.dit
javascript支持过程式,函数式,面向对象式这几种编程范式
相关文章
|
7月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
39 0
|
3月前
|
JavaScript UED
js之模块化(2)
js之模块化(2)
|
4月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
53 3
|
3月前
|
JavaScript 前端开发 开发者
js之模块化(1)
js之模块化(1)
|
2月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
36 0
|
3月前
|
JavaScript
js之模块化(3)
js之模块化(3)
|
4月前
|
前端开发 JavaScript
前端必会的JavaScript模块化
【8月更文挑战第3天】JavaScript模块化
31 1
|
4月前
|
存储 缓存 JavaScript
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
33 0
|
5月前
|
JavaScript 前端开发
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
55 1
|
6月前
|
JavaScript 前端开发
JavaScript进阶-Class与模块化编程
【6月更文挑战第21天】**ES6引入Class和模块化,提升JavaScript的代码组织和复用。Class是原型机制的语法糖,简化面向对象编程。模块化通过`import/export`管理代码,支持默认和命名导出。常见问题包括`this`指向和循环依赖。理解这些问题及避免策略,能助你写出更高效、可维护的代码。**
64 5