🍉前端模块化

简介: 🍉前端模块化

1. 使用模块作为出口


我们可以使用将需要暴露到外面的变量,使用一个模块作为出口

常见的模块化规范:CommonJS、AMD、CMD、也有ES6的Modules


2. CommonJS(了解)


CommonJS导出


module.exports = {
    flag: true,
    test(a, b) {
        return a + b
    }
}
复制代码


CommonJS导入


let { test, flag } = require('moduleA');
复制代码


以上代码只有在node.js环境下才起作用,在Webpack中会用到。


3. ES6模块化


3.1 export基本使用


//info.js
export let name="橙子"
//info.js
let name ="橙子"
export{name}
// export function test(content){
    console.log(content)
}
复制代码


3.2 export default


某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以来命名。 这个时候就可以使用export default


// info.js
export default function(){
    console.log("default function")
}
import myFunc from "./info.js"
myFun()
复制代码


export default 在同一个模块中,不允许同时存在多个


统一全部导入


import * as aaa from "./info.js"
console.log(aaa.flag)


相关文章
|
7月前
|
资源调度 前端开发 JavaScript
构建高效前端项目:现代包管理器与模块化的深度解析
【2月更文挑战第21天】 在当今快速演变的前端开发领域,高效的项目管理和代码组织已成为成功交付复杂Web应用的关键。本文将深入探讨现代前端包管理器如npm, yarn和pnpm的工作原理,以及它们如何与模块化编程实践(例如CommonJS、ES6模块)协同工作以优化开发流程。我们将剖析这些工具的内部机制,了解它们如何解决依赖冲突,提高安装速度,并保证项目的健壮性。同时,本文还将介绍模块化编程的最佳实践,包括代码拆分、重用和版本控制,帮助开发者构建可维护且性能卓越的前端项目。
|
7月前
|
前端开发 JavaScript jenkins
构建高效前端项目:从模块化到自动化
【2月更文挑战第13天】 随着Web技术的不断进步,前端项目的复杂性日益增加。为了确保可维护性和性能,前端工程师必须采用模块化和自动化的策略来优化开发流程。本文将探讨如何使用现代前端工具和最佳实践来构建一个高效的前端项目架构,包括模块打包、代码分割和持续集成等方面。
|
2月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
92 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
2月前
|
前端开发 JavaScript 开发者
深入解析前端开发中的模块化与组件化实践
【10月更文挑战第5天】深入解析前端开发中的模块化与组件化实践
27 1
|
4月前
|
前端开发 JavaScript
前端必会的JavaScript模块化
【8月更文挑战第3天】JavaScript模块化
32 1
|
6月前
|
JavaScript 前端开发
必知的技术知识:esm前端模块化
必知的技术知识:esm前端模块化
133 0
|
7月前
|
前端开发 JavaScript 安全
【Web 前端】怎么实现Module模块化?
【5月更文挑战第1天】【Web 前端】怎么实现Module模块化?
|
7月前
|
JavaScript 算法 前端开发
【专栏】前端开发中的slot算法和shadow DOM,两者提供更灵活、高效和模块化的开发方式
【4月更文挑战第29天】本文探讨了前端开发中的slot算法和shadow DOM,两者提供更灵活、高效和模块化的开发方式。slot算法允许在组件中定义插槽位置,实现内容的灵活插入和复用,提高代码可读性和维护性。shadow DOM则通过封装DOM子树,实现样式和事件的隔离,增强组件独立性和安全性。这两种技术常应用于组件开发、页面布局和主题定制,但也面临兼容性、学习曲线和性能优化等挑战。理解并掌握它们能提升开发效率和用户体验。
109 2
|
7月前
|
前端开发 JavaScript 安全
前端模块化发展
前端模块化发展
|
7月前
|
JavaScript 前端开发 开发者
【Web 前端】JS模块化有哪些?
【4月更文挑战第22天】【Web 前端】JS模块化有哪些?