前端模块化是什么意思

㈠ 前端模块化和 js 模块化的区别

两者是包含与被包含的关系，前端模块化泛指JS、CSS、HTML等资源的模块化，而JS模块化单指JS资源模块化。

㈡ 如何理解前端模块化

前端模块化
在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀

这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（mole）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码

模块
既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可

import java.util.ArrayList;
遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。

一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了

规范形成的过程是痛苦的，前端的先驱在刀耕火种、茹毛饮血的阶段开始，发展到现在初具规模，简单了解一下这段不凡的历程

函数封装
我们在讲函数的时候提到，函数一个功能就是实现特定逻辑的一组语句打包，而且JavaScript的作用域就是基于函数的，所以把函数作为模块化的第一步是很自然的事情，在一个文件里面编写几个相关函数就是最开始的模块了

function fn1(){
statement
}

function fn2(){
statement
}
这样在需要的以后夹在函数所在文件，调用函数就可以了

这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。

对象
为了解决上面问题，对象的写法应运而生，可以把所有的模块成员封装在一个对象中

var myMole = {
var1: 1,

var2: 2,

fn1: function(){

},

fn2: function(){

}
}
这样我们在希望调用模块的时候引用对应文件，然后

myMole.fn2();
这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系

看似不错的解决方案，但是也有缺陷，外部可以随意修改内部成员

myModel.var1 = 100;
这样就会产生意外的安全问题

立即执行函数
可以通过立即执行函数，来达到隐藏细节的目的

var myMole = (function(){
var var1 = 1;
var var2 = 2;

function fn1(){

}

function fn2(){

}

return {
fn1: fn1,
fn2: fn2
};
})();
这样在模块外部无法修改我们没有暴露出来的变量、函数

上述做法就是我们模块化的基础，目前，通行的JavaScript模块规范主要有两种：CommonJS和AMD

CommonJS
我们先从CommonJS谈起，因为在网页端没有模块化编程只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以虽然JavaScript在web端发展这么多年，第一个流行的模块化规范却由服务器端的JavaScript应用带来，CommonJS规范是由NodeJS发扬光大，这标志着JavaScript模块化编程正式登上舞台。

定义模块
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性

模块输出：
模块只有一个出口，mole.exports对象，我们需要把模块希望输出的内容放入该对象

加载模块：
加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的mole.exports对象

㈢ 前端为什么要使用模块化

当严谨古板的德国工程师用“积木游戏”来形容未来的造车理念时，全球汽车制造业的天空彻底“变色”了。在全世界范围内品牌和车型的设计、采购、制造的灵活度都在不断提升的今天，一套类似于乐高积木的高集成度模块化生产方式出现了。没有统一着装、埋头苦干的工人师傅，也没有烟尘漫天、气味刺鼻的车间环境，取而代之的是科技含量愈来愈高的流水线，过程愈来愈简单的操作和愈来愈少的人力成本，这些都是模块化生产的优势所在。
“当今，模块化的概念不仅是经济学、经营学专家之间最热门的话题之一，而且它还有可能彻底改变现存产业、企业的结构，具有十分强大的冲击力。”国际经济学会主席、斯坦福大学经济学教授青木昌彦如是说。
从19世纪末的福特T型车的流水线生产，到近代以日系企业丰田为代表的精益生产方式，再到最近被媒体炒得火热但实际推进阻力重重的大众MQB平台，汽车的生产模式一直围绕着两个根本目标：降低生产成本和使用成本。进入新世纪，随着数字化技术在生产中的应用，汽车的生产制造模式开始向集约化和标准化发展，由此带来的生产模式的变革让汽车“生产结构”开始趋向于电脑生产一样简单。
模块化简单来说就是“数线并产”，每条生产线产出不同的模块，最后将所有模块拼装整合，工作效率以数量级方式提升。比如大众采用的MQB平台就是将发动机、变速箱加上前轴和前悬挂放在同一模块内，再和车身等模块总装。通过模块化平台应用的加深，大量的汽车零部件实现标准化，在不同品牌和不同级别的车型中达到共享，从而实现生产从A00、A0、A到B四个级别的车型的共通生产。
随着模块化生产概念的不断深入，现今的分级采购模式将不复存在，取而代之的是模块化整体采购。现在各大主机厂的采购的是一个个零部件。日常接触和交易对象可能是大零部件供应商，也可能是小零部件企业，而模块化采购的交易品是高集成度的各种模块，对象是模块集成供应商。因此，模块化采购使得与主机厂发生直接关系的的供应商数量大为削减，并由此改变模块供应商与其他零部件生产企业的关系。毫不夸张的说，模块化生产会将许多规模小、产品类型单一的供应商企业冲击的七零八落，市场上航母级的零件供应商可以趁机重新划定市场版图，吞并无力支撑的中小型供应商，重组企业关系，最终完成“模块”帝国的最后一块拼图。

㈣ 什么是前端工程化

前端工程化其实就是软件工程在前端方向上的应用。前端工程化的目的就是为了提升开发效率。

㈤ 如何学习前端模块化知识

学习前端模块化知识主要集中精力学好以下知识点：

1、学好三驾马车：HTML5 + CSS3 + JavaScrip

2、推荐学习过程：

1）CSS

（1）入门：

Codeademy上的html&css课程——在线交互式编程平台，弄清楚基本概念和基本语法

w3school上的HTML/CSS教程——技术手册式的教程，比较全面，照着实例敲一遍

（2）进阶：

《精通CSS·高级Web标准解决方案》——对CSS有一个比较深入的学习，对核心技术了解。

《HTML5权威指南》——非常全面的书，内容也很新，包含了HTML5+CSS3+JS DOM

（3）实战：

bootstrap框架: bootstrap中文网/《bootstrap实战》——流行的前端框架，注重实用即可

Codeademy上的Web Developer Skills+Projects——通过自己做小页面/小网站来运用所学

（4）提高：

《CSS禅意花园》——提高自己的艺术设计能力，通过实例来学习如何用CSS设计出漂亮的页面

2）.Javascript：

（1）入门：

Codeademy上的javascript教程——实例比较多，比较浅，算是基本了解JS

w3school上的JS教程——比较详细的了解下JS的特性

《JavaScript DOM编程艺术》——讲js和DOM的基本知识和运用，了解JS和DOM可以做什么

（2）进阶：

《JavaScript高级程序设计》——JS圣经，比较全面，非常好的一本书，比犀牛书可阅读性强

《JavaScript权威指南》——传说中的犀牛书，好厚好厚的一本书，不适合入门，适合当工具书看

《JavaScript语言精粹》——很薄的一本书，但是可以帮助你快速了解JS的精华部分

（3）实战：

jQuery框架: w3school上的jQuery教程/Codeademy上的jQuery教程——了解Jquery

《jQuery基础教程》——流行的前端框架，注重实用

（4）提高：

《高性能JavaScript》——讲如何提高js性能，以及构建和部署文件到生产环境的最佳实践

《Secrets of the JavaScript Ninja》——jQuery作者写的书，如果你觉得精通JS了再看这本书

㈥ 在前端中什么是组件化 什么是模块化

模块化更一种开发规范，比如cmd amd 是为了更好的解藕，比如一个网站，按照不同的模块来开发，比如你有个评论区，a 项目有，b 项目有，如果仅是单纯的模块开发，这个js 文件你就可以单独来回引用，
更比如 ，一个页面 分好多个功能， 这时候你要是都写在一个js 中 会越来越大，
而你把他分成不同的模块，
比如评论是一块
分页又是一块，
已经上线，或你不做了，后期别人拉手，或你接手别人的项目， 这时候来个需求让你把分页去掉，或修改 你可以清楚的找到对应模块文件 进行修改 或去掉
模块是自定义的，

组件，更想当于一个通用的东西，有的分功能组件，有的分业务组件
大图切换，这种就是单纯的一个效果展示，只要调用就ok
一个分页，也是只单纯的调用，
组件更是一个多处都可以使用 ，不需要再单独开发的

㈦ 什么是"前端工程化"

前端工程化是指使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化。其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。

前端工程化是前端架构中重要的一环，主要就是为了解决上述大部分问题的。而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。

前端工程化有四个特点：模块化、组件化、自动化、规范化。

1、模块化：

就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协助的可能。在工程化之前，一直是使用js、jquery、ajax，这没有模块概念，对于开发大型且复杂的系统会有一定的限制。

2、组件化：

组件化≠模块化。模板化只是在文件层面上，对代码和资源的拆分；组件化是在设计层面上，对于UI的拆分。目前市场上的组件化框架最多，主要的有Vue，React，Angular2。

3、自动化：

“简单重复的工作交给机器来做”，自动化也就是有很多自动化工具代替我们来完成，例如持续集成、自动化构建、自动化部署、自动化测试等等。

4、规范化：（至关重要的一环）

在项目规划初期制定的好坏对于后期的开发有一定影响。包括的规范有：

目录结构的制定、编码规范、前后端接口规范、文档规范、组件管理、Git分支管理、Commit描述规范、定期codeReview、视觉图标规范。

(7)前端模块化是什么意思扩展阅读：

为什么需要前端工程化：

前端越来越复杂，设计的问题和环节也越来越多，不采用工程化管理，就无法很好的实现团队协同和降低复杂性。 原因如下：

1、前端范畴不断扩大

早期的前端只需要适配桌面浏览器，而现在的前端，需要适配不同类型和尺寸的设备，包括移动端网页，app应用等。

2、前后端分离

早期的前端只是后端 MVC 框架的一层模块， 而现在的前端普遍是从后端接口获取数据，编写处理逻辑，各种前端mvc前端框架也层出不穷。

3、模块化开发的出现

现在的前端开发不再是从零写起，重复造轮子，而是会引用大量内部和外部的组件和模块，这也导致前端必须进行模块管理。

4、转码器的盛行

为了提高效率，前端工程往往不会直接写html,css,和js代码，而是改用其他格式书写，再用工具编译为目标格式。

比如用Jade 写HTML，用less、sass、stylus 编写CSS,用ES6、Typescript编写JavaScript。

5、开发流程和团队

早期的前端团队往往只有几个人，而现在的前端团队可以扩展到几十人，甚至上百人。每个人只负责自己的一块内容。所以，如何协调多人多团队的工作，保证沟通顺畅，保证权限管理，越来越成为一大问题。

前端工程化的具体内容：

1、代码规范: 保证团队所有成员以同样的规范开发代码。

2、分支管理: 不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。

3、模块管理: 一方面，团队引用的模块应该是规范的;另一方面，必须保证这些模块可以正确的加入到最终编译好的包文件中。

4、自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的；

5、构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源；

6、部署：将构建好的代码部署到生产环境。

㈧ 前端模块化的意义是什么

前端模块化的本质就是组件化、复用性，是为了提高开发效率而生的。

在网站发展的早期，前端页面上的JavaScript仅是用来做页面逻辑交互和表单验证的，随着Web2.0的兴起，各种前端技术也层出不穷，前端代码越来越臃肿了。而JavaScript由于设计时的定位问题，导至没有“类”的概念历返念，导致以前的JS代码写的都很分散，没有“模块化”的思想。

那时我们开发网站，仔饥前端页面就存在一个“复用性”的问题，比如你写了给网站A写了一个表单验证处理逻辑，等开发网站B时还是存在表单验证逻辑，还需要再次写代码，浪费精力。

虽然可以写成公共函数库，但不可避免的存在多个函数库某个函数命名冲突的情况，所以前端“工程化”难以实现。这时，国外很多大牛就意识到“模块化”的重要性了，于是推出了不少模块化的实现框架。

前端模块化能给我烂凯们带来以下便利：

组件化，提高生产力，代码扩展性强；

解决了命名冲突，减少了全局空间的污染；

解决了文件依懒问题，让开发者关注于业务的实现。