美文网首页
前端模块化-1、介绍

前端模块化-1、介绍

作者: Aleph_Zheng | 来源:发表于2017-06-16 14:05 被阅读19次

本文主要从模块化的产生背景及对前端模块的简单介绍,作为CommonJS,AMD,CMD等规范的引言。
更重要的是,作为本人学习的一份笔记。

什么是模块化

本人简单的理解,模块化就是指把一个个功能独立开来,需要使用的时候,分别“组装”这些功能,以达到我们需要的效果。
还是拿熟悉的汽车作比较,汽车早已经将生产模块化,就是建立几个平台,同一平台下的零件有很多可以通用。比如下图就是丰田的新平台TNGA(更多信息,点击这里

丰田全新平台TNGA

这样我们生产一辆汽车,只需要按照市场需求、开发目标等因素,就可以计划在某一平台下生产。而这一平台很多零件是通用,我们只需要根据车辆需求再进行调教就可以。
汽车价格的降低,品质的稳定,很大程度就是依赖这些平台的模块化。

简图,原谅我的渣画工

产生背景&必要性

在网络发展前期,对于一个网页,代码内容比较少,网页的效果也比较简单,甚至寥寥数十行代码便可完成,在这种情况下,模块化没有产生的必要。拿画画作比较,前期的效果如下图:

前期的页面效果

而随着网络的快速发展,人们需求的增多,一张网页需要引入的文件越来越多,代码也越来越多,这时我们需要作出的效果是这样的:

现在的效果

所以我们需要引入像汽车产业一样的模块化。

模块化的意义:

简单地说,有以下:

  • 提高代码的复用性
    需要使用某个功能时,我们只需要引入该模块就可以了,而不必重新造轮子。
  • 各个模块独立存在
    避免命名冲突,提高阅读性,便于维护,降低耦合。

以上就是模块化的简单介绍,接下来的文章将介绍模块化的主要规范及使用方法。
To be continued...

相关文章

  • 前端模块化-1、介绍

    本文主要从模块化的产生背景及对前端模块的简单介绍,作为CommonJS,AMD,CMD等规范的引言。更重要的是,作...

  • webpack基础笔记

    webpack基础 1.前端工程化 实际的前端开发: 模块化:(js的模块化,css的模块化,资源的模块化) 组件...

  • 关于前端模块化开发

    关于前端模块化开发 1 前端中有哪些模块化开发的规范以及实现方案 2 模块化的开发的好处 3 CommonJS

  • 前端自动化构建工具,前端工程化,前端模块化,前端组件化

    前端自动化构建,前端工程化,模块化,组件化, 1:前端自动构建工具webpack等,是为了前端的规范化,模块化,提...

  • 前端模块化(requirejs)

    前端模块化 什么是前端模块化 将代码依据不同功能,或者职责进行模块的划分,就称为前端模块化 模块化的好处 结构更轻...

  • es6总结

    1.模块化 /*关于模块化的了解 非模块化有以下缺点: 1.命名冲突 2.文件依赖 前端流行的模块化:AMD re...

  • 前端知识体系4.前端工程化2.其它

    本文目录 1.es6的模块管理 与 commonjs 的对比 2.简单介绍下前端模块化规范:amd,cmd,com...

  • JavaScript模块化(ES Module/CommonJS

    1模块化历史 1.1前言 参照前端模块化开发的价值 1.2无模块化 每次说到JavaScript都会想到Brend...

  • 模块化之CommonJs、AMD、CMD

    介绍 随着前端业务得复杂程度越来越高,模块化成了大趋势,目前有这么几种模块化得规范,AMD,CMD,CommonJ...

  • 前端模块化

    什么是前端模块化? 前端为什么需要模块化? CommonJS、AMD、ES6、CMD区别是什么? 一、什么是模块化...

网友评论

      本文标题:前端模块化-1、介绍

      本文链接:https://www.haomeiwen.com/subject/mpzpqxtx.html