1 模块化出现的背景

(图片来源于网络)

在 Web 发展的早期,前端还没有作为一个单独的工种分离出来,JavaScript 的作用也只是在 HTML 上 用来实现简单的表单验证,到后来无非实现一些轮播图等简单的视觉效果。一句话来讲,很长时间以来我们的前端很简单,JS 代码也很少。

随着 Web 的发展,Web 应用越来越复杂,诸如淘宝、京东、美团等 Web 应用,其复杂度是极高的。前端的交互、视觉效果、逻辑控制需要编写大量的 JS 代码。前端急需使用工程化的方式来降低 Web 开发和维护成本,对 JS 模块化开发的需求越来越迫切。

2 模块化的意义

  • 避免命名冲突。模块化开发中,每个文件是一个模块,模块中定义的变量、函数、类都是该模块的私有变量,不会污染全局变量。同样也不会被全局变量污染。
  • 更清晰的依赖关系。在使用或定义一个模块的时候,会显式的声明对模块的引用,文件直接的依赖关系非常清晰,结合 Webpack 等构建工具,更是无需手动处理复杂的依赖关系。
  • 高可维护性。每个模块的功能职责单一,需要升级改动部分功能只需要针对具体的模块进行改动,大大提高可维护性。
  • 高可复用性。每个功能模块实现后,可以供开发者重复使用,开发者只需要关注本身的业务逻辑的开发,大大提高开发效率。
  • 降低复杂度。通过将复杂的应用拆解成多个容易实现的模块,模块化可以降低项目本身

第 04 课:前端模块化解决方案相关推荐

  1. fis pure开发php,GitHub - fex-team/fis-pure: 基于FIS的纯前端模块化解决方案

    fis-pure 基于FIS的纯前端模块化解决方案pure. 建议刚接触这个方案的同学直接使用 FIS3 而非 pure,FIS3可以更轻松的实现 pure 的功能. pure是基于FIS二次封装能力 ...

  2. 前端模块化开发学习之gulpbrowserify篇

     随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...

  3. 模块化加载_前端模块化简单总结

    来源 | http://www.fly63.com/article/detial/9827 前言 JavaScript初期就是为了实现简单的页面交互逻辑,如今CPU.浏览器性能得到了极大的提升,很多页 ...

  4. 基于webpack搭建前端工程解决方案探索

    关于前端工程 \\ 下面是百科关于"软件工程"的名词解释: \\ \ 软件工程是一门研究用工程化方法构建和维护有效的.实用的和高质量的软件的学科. \ \\ 其中,工程化是方法,是 ...

  5. web前端模块化开发_真正的模块化Web应用程序:为什么没有开发标准?

    web前端模块化开发 OSGI , SpringSource , Jboss模块 ,J2EE和清单永远不会结束.所有这些技术都向他们的最终用户/开发人员保证了相同的东西,或多或少是Java模块化Web ...

  6. [ES6] 细化ES6之 -- 前端模块化

    前端模块化 前言 前端开发领域发展到目前阶段: 零件化 - 最终呈现给用户是一个完整的产品(由各个零件组成的) 降低生产成本 – 多人协作(每个人各司其职) 降低使用成本 - 各个零件之间是低耦合的 ...

  7. 最全面、最详细的“前端模块化”总结

    背景 随着前端功能越来越复杂,前端代码日益膨胀,为了减少维护成本,提高代码的可复用性,前端模块化势在必行. 所有js文件都在一个html中引入,造成以下不良影响: 请求过多.首先我们要依赖多个模块,那 ...

  8. 前端异步解决方案大全(2021版)

    JavaScript是一门单线程语言,即一次只能完成一个任务,若有多个任务要执行,则必须排队按照队列来执行(前一个任务完成,再执行下一个任务). 这种模式执行简单,但随着日后的需求,事务,请求增多,这 ...

  9. 前端集成解决方案(webpack、gulp)

    一.什么是前端集成解决方案 FIS(Front-end Integrated Solution)是专为解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题的工具框架. 二 ...

最新文章

  1. cocos2d-js 中的Chipmunk矢量:cp.Vect
  2. Redis 通用操作1
  3. 用loader.loadbytes直接load bitmapdata.getpixels产生的bytearray
  4. linux android ndk r9b JNI 开发过程(COCOS2D-X配置)
  5. pycharm 如何使用git链接到github实现代码提交
  6. RunWith(SpringJUnit4ClassRunner.class)报错
  7. [云炬创业管理笔记]第6章制定创业行动测试4
  8. java下载pdf6_疯狂java讲义第6版 电子版(pdf格式)
  9. oracle插入回车换行符
  10. QtQuick 中的 qml 与 Qt 的 C++
  11. c语言变量生存期,C语言变量的生命周期
  12. Bzoj 2683: 简单题(CDQ分治)
  13. 实用 VSCODE 8类插件安利,提高开发效率
  14. 样条曲面_用SolidWorks画一个自然、光顺过渡的曲面
  15. 专访1药网董事长于刚:若没刘峻岭 就没我后面创业的精彩
  16. jQuery-ui-autocomplete
  17. python全栈自动化测试工程师第11期柠檬班vip_因为Python,班主任最近都开始化妆了!...
  18. android开机加速器,安卓手机开机如何加速
  19. activex服务器与com组件,COM和ActiveX控件设计.ppt
  20. cocos2d android 音乐,cocos2d-之音乐背景播放(示例代码)

热门文章

  1. Linux Command dnf 软件包管理
  2. Lavarel 5.5安装步骤整理
  3. Linux服务器上监控网络带宽的18个常用命令和工具
  4. Spring---浅谈IOC
  5. java开源框架总结
  6. 2.MySQL ---- 修改数据库的字符集(日常小技巧)
  7. 智能手机王者---摩托罗拉XT800
  8. 基于segment anything model(SAM)相关性研究的各个方向论文/项目汇总
  9. 基于SSM架构的超市管理系统设计
  10. js实现单选全选功能