每天3分钟,重学ES6-ES12(十七)模块化历史

简介: 每天3分钟,重学ES6-ES12(十七)模块化历史

19c2e7a9bfbb7f5e8c7d744db995e29.png

每天3分钟,重学ES6-ES12文章汇总

前言

今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间,重学ES6+,前面我们介绍了异步代码处理方案,今天介绍模块化的历史

什么是模块化

  • 到底什么是模块化、模块化开发呢?
  • 事实上模块化开发最终的目的是将程序划分成一个个小的结构;
  • 这个结构中编写属于自己的逻辑代码,有自己的作用域,不会影响到其他的结构;
  • 这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用;
  • 也可以通过某种方式,导入另外结构中的变量、函数、对象等;
  • 上面说提到的结构,就是模块;按照这种结构划分开发程序的过程,就是模块化开发的过程;
  • 无论你多么喜欢JavaScript,以及它现在发展的有多好,它都有很多的缺陷:
  • 比如var定义的变量作用域问题;
  • 比如JavaScript的面向对象并不能像常规面向对象语言一样使用class;
  • 比如JavaScript没有模块化的问题;
  • Brendan Eich本人也多次承认过JavaScript设计之初的缺陷,但是随着JavaScript的发展以及标准化,存在的缺陷问题基 本都得到了完善。
  • 无论是web、移动端、小程序端、服务器端、桌面应用都被广泛的使用;

模块化的历史

  • 在网页开发的早期,Brendan Eich开发JavaScript仅仅作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的:
  • 这个时候我们只需要讲JavaScript代码写到<script>标签中即可;
  • 并没有必要放到多个文件中来编写;甚至流行:通常来说JavaScript 程序的长度只有一行
  • 但是随着前端和JavaScript的快速发展,JavaScript代码变得越来越复杂了:
  • ajax的出现,前后端开发分离,意味着后端返回数据后,我们需要通过JavaScript进行前端页面的渲染;
  • SPA的出现,前端页面变得更加复杂:包括前端路由、状态管理等等一系列复杂的需求需要通过JavaScript来实现; *包括Node的实现,JavaScript编写复杂的后端程序,没有模块化是致命的硬伤;
  • 所以,模块化已经是JavaScript一个非常迫切的需求:
  • 但是JavaScript本身,直到ES6(2015)才推出了自己的模块化方案;
  • 在此之前,为了让JavaScript支持模块化,涌现出了很多不同的模块化规范:AMD、CMD、CommonJS等;
  • 之后的内容,我将详细介绍JavaScript的模块化,尤其是CommonJS和ES6的模块化。

没有模块化带来的问题

  • 早期没有模块化带来了很多的问题:比如命名冲突的问题
  • 当然,我们有办法可以解决上面的问题:立即函数调用表达式(IIFE)
  • IIFE (Immediately Invoked Function Expression)
  • 但是,我们其实带来了新的问题:
  • 第一,我必须记每一个模块中返回对象的命名,才能在其他模块使用过程中正确的使用;
  • 第二,代码写起来混乱不堪,每个文件中的代码都需要包裹在一个匿名函数中来编写;
  • 第三,在没有合适的规范情况下,每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况;
  • 所以,我们会发现,虽然实现了模块化,但是我们的实现过于简单,并且是没有规范的
  • 我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码;
  • 这个规范中应该包括核心功能:模块本身可以导出暴露的属性,模块又可以导入自己需要的属性;
  • JavaScript社区为了解决上面的问题,涌现出一系列好用的规范,接下来我们就学习具有代表性的一些规范。

代码演示

// a.js
var moduleA = (function() {
  var name = "why"
  var age = 18
  var isFlag = true
  return {
    name: name,
    isFlag: isFlag
  }
})()
// b.js
(function() {
  if (moduleA.isFlag) {
    console.log("我的名字是" + moduleA.name)
  }
})()


相关文章
|
算法
【MATLAB】语音信号识别与处理:SG滤波算法去噪及谱相减算法呈现频谱
【MATLAB】语音信号识别与处理:SG滤波算法去噪及谱相减算法呈现频谱
541 1
|
关系型数据库 MySQL 数据库
django4版本提示 django.db.utils.NotSupportedError: MySQL 8 or later is required (found 5.7.26)
在学习Django时,用户遇到`django.db.utils.NotSupportedError`,提示需要MySQL 8.0.25或更高版本,但其系统上是5.7.26。为解决这个问题,用户决定不升级MySQL,而是选择注释掉Django源码中的数据库版本检查。通过Python命令行找到Django安装路径,进入`db/backends/base/base.py`,注释掉`self.check_database_version_supported()`函数
1577 0
|
11月前
|
存储 安全 数据可视化
提升网络安全防御有效性,服务器DDoS防御软件解读
提升网络安全防御有效性,服务器DDoS防御软件解读
251 1
提升网络安全防御有效性,服务器DDoS防御软件解读
|
11月前
|
JavaScript 前端开发 开发者
前端技术分享:Vue.js 中的自定义指令
【10月更文挑战第1天】前端技术分享:Vue.js 中的自定义指令
146 5
|
11月前
|
编解码 Oracle Java
java9到java17的新特性学习--github新项目
本文宣布了一个名为"JavaLearnNote"的新GitHub项目,该项目旨在帮助Java开发者深入理解和掌握从Java 9到Java 17的每个版本的关键新特性,并通过实战演示、社区支持和持续更新来促进学习。
328 3
|
存储 安全 Java
Android DataStore:安全存储和轻松管理数据
Android DataStore:安全存储和轻松管理数据
|
前端开发 Java
SpringBoot之自定义注解参数校验
SpringBoot之自定义注解参数校验
|
10月前
|
Java Linux Windows
Java“Could Not Create Java Virtual Machine”解决
当在Java中遇到“Could Not Create Java Virtual Machine”错误时,通常是由于内存设置不当、Java版本不兼容、类路径错误或操作系统限制等原因导致JVM无法启动。解决方法包括调整内存参数、确认Java版本兼容性、检查类路径和启动参数、以及检查用户权限和文件系统。
4398 1
|
机器学习/深度学习 存储 人工智能
【AI】告别繁琐阅读,阿里通义智文阅读助手带您轻松畅游知识海洋!
阿里通义智文阅读助手是AI驱动的阅读辅助工具,能识别并解析PPT、图片、PDF等文档,提供摘要、关键词提取、语义理解与问答功能。用户可上传图片文件,工具自动识别文字,支持图表识别和全文搜索。此外,它还具有智能问答功能,能回答用户关于文档内容的问题。工具兼容多种文件格式,但有每日使用和存储限制。作者木头左邀请用户体验并期待下次分享。
【AI】告别繁琐阅读,阿里通义智文阅读助手带您轻松畅游知识海洋!
|
前端开发 JavaScript 开发者
Angular与Webpack协同优化:打造生产级别的打包配置——详解从基础设置到高级代码拆分和插件使用
【8月更文挑战第31天】在现代前端开发中,优化应用性能和加载时间至关重要,尤其是对于使用Angular框架的项目。本文通过代码示例详细展示了如何配置Webpack,以实现生产级别的打包优化。从基础配置到生产环境设置、代码拆分,再到使用加载器与插件,每个步骤都旨在提升应用效率,确保快速加载和稳定运行。通过这些配置,开发者能更好地控制资源打包,充分发挥Webpack的强大功能。
456 0