js模块化

Posted 老刘大话前端

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js模块化相关的知识,希望对你有一定的参考价值。

一. 什么是模块化

模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口、模块间具有透明性。
js中的模块化方法,大致分为以下几个:commonJS, amd, cmd, umd, esModule。下面我们来逐个击破。

二. CommonJS

commonjs规范为js提供一个美好的愿景-希望js能够在任何地方都去运行。它的定义也十分简单,主要分为:模块引用、模块定义、模块标识。
1. 模块引用

在commonjs中,使用require方法引用模块

2. 模块定义
在模块中,上下文提供了exports对象,用来导出模块的方法或变量。另外还存在一个module对象,它代表着模块本身。在node.js中,一个文件就是一个模块。具体导出方式:
module.exports.test = () => {
  return "test";
}
3. 模块标识

模块标识实际上就是require方法的参数,即引入模块的路径。

commonjs的优点:
  • 所有代码都运行在模块作用域,不会污染全局
  • 模块的加载只需要运行一次,以后都从缓存中加载
  • 模块加载是同步的,按照代码中出现的顺序
  • 简单易用
commonjs缺点:
  • 同步加载的方法,不适合浏览器环境。浏览器环境瓶颈在于带宽,服务器环境瓶颈在于cpu和内存。浏览器环境需要异步加载模块。
  • 非es官方标准
实现:node.js

三. AMD

amd规范是commonjs的延伸,amd全名:异步模块定义,针对浏览器设计。定义一套模块异步加载规范,来解决commonjs同步加载问题。
它的规范只有1个定义:
define(id: string, dependencies: Array<string>, factory: Function)

举个

以上是关于js模块化的主要内容,如果未能解决你的问题,请参考以下文章

模块和组件模块化和组件化的理解

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段

js代码片段: utils/lcoalStorage/cookie