前端模块化汇总
模块化
含义
模块化: 模块化就是将单个文件当成一个模块,在日常项目开发里面我们不会将所有逻辑写在一个文件里面,不管是css还是js。原因是这样会导致单个文件过大,无法实现复用和维护,所以我们会将文件进行切割分离,这样分离独立出来的每一个文件都是一个模块。
css的模块化
- 在css里面,我们可以将单个公用的css文件进行分离,在需要的css文件里面导入。
- 原生css里面我们可以使用
@import(css文件路径);
进行导入。 - sass/less/stylus都有各自的导入文件方法,例如sass的
@import css文件路径;
- 所以css文件的模块化相当于来讲比较简单,不需要导出,只需要导入使用css文件。
js的模块化
- 在js里面,原生的js不支持一个js文件导入另一个js文件,我们需要将用到的js文件按照顺序利用script标签导入到html里面使用。这样文件依次加载,必须保证严格的加载顺序,而且文件之前的依赖关系不能很好的展示,对于开发来说,不利于阅读和维护。
- 所以针对于这样的情况,很多大佬们提出了js模块化的管理机制,下面就详细介绍四种主流的模块化机制以及代码演示。
- commonjs规范
- 以nodejs为代表
- 导入
- const math = require('./math')
- 导出
// 多个导出 module.exports = { add: function(){ }, plus: function(){ } }
// 单个导出 exports.add = function(){ } exports.plus = function(){ }
- esm规范
- es6提出的模块化方案
- 导入
- 按需导入 import {add, plus} from './math.js'
- 默认导入 import math from './math.js'
- 导出
// 按需导出 const add = (a,b) => a+b const plus = (a,b) => a-b export {add, plus}
// 默认导出 export default { add: (a,b)=> a+b, plus: (a,b) => a-b }
- AMD规范
- 以requirejs为代表
- 导入
require(['./math'], (math)=>{ console.log(math.add(1,2)) console.log(math.plus(1,2)) })
- 导出
define(()=>{ const add = (a,b) => a+b const plus = (a,b) => a-b return { add, plus } })
- CMD规范
- 以seajs为代表
- 导入
define((requires)=>{ // 导入 const math = requires('./math') console.log(math.add(2,3)) console.log(math.plus(2,3)) })
- 导出
define((requires, exports, modules)=>{ // 导出 const add = (a,b) => a+b const plus = (a,b) => a-b exports.add = add exports.plus = plus })
- 我们会发现js模块化不管哪一种语法,都包含导入和导出,所以
模块化管理就是一种话导入和导出。
- commonjs规范
模块化规范的区别
- esm规范是es6推出的模块化方案,目前这种方案逐渐被各大主流浏览器最新版本支持,是未来js在浏览器(客户端)的选择方向。
- commonjs目前主要引用范围是基于node,目前主要适用于js服务端的模块化管理。
- AMD规范和CMD规范都是在es6模块化出现之前让浏览器(客户端)支持模块化的方案,两种的区别主要体现在加载依赖的时机不一样。
- AMD推崇的是依赖前置,就是用到哪些依赖就提前导入
// requirejs defined(['./math'], function(math){ // 当前模块用到了math模块,要在定义模块的时候导入math })
- CMD推崇的是依赖就近,就是什么时候用到什么时候导入
// sea.js defined(function(require){ // 当前模块用到了math模块,在需要的用的时候就近导入 const math = require('./math') })
- 项目的源代码地址
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步