‘壹’ 前端为什么要使用模块化
当严谨古板的德国工程师用“积木游戏”来形容未来的造车理念时，全球汽车制造业的天空彻底“变色”了。在全世界范围内品牌和车型的设计、采购、制造的灵活度都在不断提升的今天，一套类似于乐高积木的高集成度模块化生产方式出现了。没有统一着装、埋头苦干的工人师傅，也没有烟尘漫天、气味刺鼻的车间环境，取而代之的是科技含量愈来愈高的流水线，过程愈来愈简单的操作和愈来愈少的人力成本，这些都是模块化生产的优势所在。
“当今，模块化的概念不仅是经济学、经营学专家之间最热门的话题之一，而且它还有可能彻底改变现存产业、企业的结构，具有十分强大的冲击力。”国际经济学会主席、斯坦福大学经济学教授青木昌彦如是说。
从19世纪末的福特T型车的流水线生产，到近代以日系企业丰田为代表的精益生产方式，再到最近被媒体炒得火热但实际推进阻力重重的大众MQB平台，汽车的生产模式一直围绕着两个根本目标：降低生产成本和使用成本。进入新世纪，随着数字化技术在生产中的应用，汽车的生产制造模式开始向集约化和标准化发展，由此带来的生产模式的变革让汽车“生产结构”开始趋向于电脑生产一样简单。
模块化简单来说就是“数线并产”，每条生产线产出不同的模块，最后将所有模块拼装整合，工作效率以数量级方式提升。比如大众采用的MQB平台就是将发动机、变速箱加上前轴和前悬挂放在同一模块内，再和车身等模块总装。通过模块化平台应用的加深，大量的汽车零部件实现标准化，在不同品牌和不同级别的车型中达到共享，从而实现生产从A00、A0、A到B四个级别的车型的共通生产。
随着模块化生产概念的不断深入，现今的分级采购模式将不复存在，取而代之的是模块化整体采购。现在各大主机厂的采购的是一个个零部件。日常接触和交易对象可能是大零部件供应商，也可能是小零部件企业，而模块化采购的交易品是高集成度的各种模块，对象是模块集成供应商。因此，模块化采购使得与主机厂发生直接关系的的供应商数量大为削减，并由此改变模块供应商与其他零部件生产企业的关系。毫不夸张的说，模块化生产会将许多规模小、产品类型单一的供应商企业冲击的七零八落，市场上航母级的零件供应商可以趁机重新划定市场版图，吞并无力支撑的中小型供应商，重组企业关系，最终完成“模块”帝国的最后一块拼图。
‘贰’ 对前端模块化的理解有哪些
前端模块化指的是：
1、将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),
并进行组合在一起
2、块的内部数据与实现是私有的,
只是向外部暴露一些接口(方法)与外部其它模块通信
说白了就是把常见的工具函数和一些UI组件封装，可以再后续的开发过程中非常方便的进行调用，这就是前端模块化
‘叁’ gulp+webpack怎么实现前端模块化
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成
javascript/coffee/sass/less/html/image/css
等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。
webpack
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
**当然个人还是喜欢webpack的模块化优秀
废话不多说现在开始gulp之旅
初始化项目(此处已经认为node环境已经安装)
建立文件夹 名字自己随便取 比如 gulpText，然后输入以下命令
$ cd gulpText
$ mkdir images //建立存放图片文件夹
$ mkdir src // 存放 js 以及css
$ mkdir index.html //主页
$ mkdir gulpfile.js //编写gulp 任务文件
$ mkdir mock //mock数据
然后输入以下命令 然后一路点下去生成json文件
$npm init
打开json文件看到这样的
1474889102536.png
全局安装gulp以便我们运行gulp进行打包等操作
$npm install gulp -g
如果感觉npm安装比较慢可以切换至cnpm下载，代码如下
$npm install cnpm -g
安装gulp包，方便我们引用gulp
$npm install gulp
成功截图
1474889517162.png
编写gulp任务
引入 gulp
//引入gulp
var gulp = require('gulp');
拷贝Index.html
//html
gulp.task('-index',function () {
gulp.src('./index.html')
.pipe(gulp.dest('./build'));
})
执行命令
$ gulp -index
1474890843877.png]( http://upload-images.jianshu.io/upload_images/2905209-c00d640651bde279.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
1474890828271.png
拷贝images
// images
gulp.task('-images',function () {
gulp.src('./images**/*')
.pipe(gulp.dest('./build/'));
})
执行命令
$ gulp -iamges
1474891076408.png
1474891039689.png
css预处理
现在我们在src目录里创建文件styles放我们的scss代码，需要把scss代码编译到/build/prd/styles/下
$ cd src
$ mkdir styles
$ cd styles
$ touch app.scss
$ touch common.scss
app.scss项目代码
@charset "UTF-8";
@import "./common.scss";
body{
background-color: $base-color;
color: #000;
font-size: 20px;
font-weight: 800;
}
html{
width: 100%;
height: 100%;
}
html{
width: 100%;
height: 100%;
}
.lsds{
width: 100px;
height: 100px;
}
common.scss代码
$base-color:yellow;
安装css预编译包
$ npm install gulp-sass //sass编辑包
$ npm install gulp-minify-css'); //css压缩包
//引入css预处理模块
var sass= require('gulp-sass');
//引入css压缩模块
var minifyCSS = require('gulp-minify-css');
//css预处理
var cssFiles=[
'./src/styles/app.scss'
];
gulp.task('scss',function () {
gulp.src(cssFiles)
.pipe(sass().on('error',sass.logError))
.pipe(minifyCSS())
.pipe(gulp.dest('./build/prd/styles/'))
})
编辑scss
$ gulp scss
开启服务
安装server包
$ npm install gulp-webserver
//引入gulp-webserver 模块
var server = require('gulp-webserver');
gulp.task('server',function () {
gulp.src('./')
.pipe(server({
host:'127.0.0.1', //ip
port:80, //端口
directoryListing:{
enable:true,
path:'./'
},
livereload:true,
}));
})
‘肆’ 什么叫前端模块化 前端工程化和前端模块化是什么意思
模块化更一种开发规范，比如cmd amd 是为了更好的解藕，比如一个网站，按照不同的模块来开发，比如你有个评论区，a 项目有，b 项目有，如果仅是单纯的模块开发，这个js 文件你就可以单独来回引用，
更比如 ，一个页面 分好多个功能， 这时候你要是都写在一个js 中 会越来越大，
而你把他分成不同的模块，
比如评论是一块
分页又是一块，
已经上线，或你不做了，后期别人拉手，或你接手别人的项目， 这时候来个需求让你把分页去掉，或修改 你可以清楚的找到对应模块文件 进行修改 或去掉
模块是自定义的，
组件，更想当于一个通用的东西，有的分功能组件，有的分业务组件
大图切换，这种就是单纯的一个效果展示，只要调用就ok
一个分页，也是只单纯的调用，
组件更是一个多处都可以使用 ，不需要再单独开发的
‘伍’ 什么是前端模块化开发
模块化更一种开发规范，比如cmd amd 是为了更好的解藕，比如一个网站，按照不同的模块来开发，比如你有个评论区，a 项目有，b 项目有，如果仅是单纯的模块开发，这个js 文件你就可以单独来回引用，
更比如 ，一个页面 分好多个功能， 这时候你要是都写在一个js 中 会越来越大，
而你把他分成不同的模块，
比如评论是一块
分页又是一块，
已经上线，或你不做了，后期别人拉手，或你接手别人的项目， 这时候来个需求让你把分页去掉，或修改 你可以清楚的找到对应模块文件 进行修改 或去掉
模块是自定义的，
组件，更想当于一个通用的东西，有的分功能组件，有的分业务组件
大图切换，这种就是单纯的一个效果展示，只要调用就ok
一个分页，也是只单纯的调用，
组件更是一个多处都可以使用 ，不需要再单独开发的
‘陆’ 如何理解前端模块化
前端模块化
在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对象
‘柒’ 如何实现前端模块化开发
SeaJS 是一个适用于 Web 浏览器端的模块加载器。
使用 SeaJS，可以更好地组织 JavaScript 代码。
‘捌’ 前端模块化框架有哪些
基于Vue的UI框架：ElementUI
ElementUI是由饿了么UED设计、饿了么前端团队开发的，基于Vue2.0的桌面端组件库。Vue可以说是2017年最火的引擎类前端框架，ElementUI以其美观的设计和高质量的组件很快俘获了一大批Vuer的芳心。
不足之处在于组件的种类和功能不够多（例如数据表格组件），很多时候需要自己也要开发一些组件，否则难以完成复杂的企业级应用开发。
‘玖’ 前端问独立开发了哪些模块有
1、模块化概述
模块化开发，当下最重要的前端开发范式
模块化，只是思想
2、模块化演变过程
早期在没有工具和规范的情况下，对模块化的落地方式，仍然存在一些没有解决的总是。
stage1-文件划分方式（不同的文件是不同的模块，约定每一个文件就是一个独立的模块）
风险：污染全局作用域，命名冲突问题，无法管理依赖关系
早期模块化完全依靠约定
stage2-命名空间方式（将每一个模块包裹为一个全局对象的形式实现）
通过命名空间，减小命名冲突，
没有私有空间，所有模块成员也可以在模块外部被访问或者修改
无法管理依赖关系
stage3（2004）-IIFE（立即调用的函数表达式，声明函数的同时立即调用这个函数，实现数据的私有化隔离）
不污染全局环境，提供闭包环境
有了私有成员的概念，私有成员只能在模块成员内通过闭包的形式访问。
通过IIFE参数，可以传递依赖模块的内容
stage4(2009)-模块化
2009年，随着Node.js的发布，JS才真正迎来了模块化时代。
针对于模块加载的问题，之前都是用script标签引入的方式，会有忘引入或误删除的问题
‘拾’ 在前端中什么是组件化 什么是模块化
模块化更一种开发规范，比如cmd amd 是为了更好的解藕，比如一个网站，按照不同的模块来开发，比如你有个评论区，a 项目有，b 项目有，如果仅是单纯的模块开发，这个js 文件你就可以单独来回引用，
更比如 ，一个页面 分好多个功能， 这时候你要是都写在一个js 中 会越来越大，
而你把他分成不同的模块，
比如评论是一块
分页又是一块，
已经上线，或你不做了，后期别人拉手，或你接手别人的项目， 这时候来个需求让你把分页去掉，或修改 你可以清楚的找到对应模块文件 进行修改 或去掉
模块是自定义的，
组件，更想当于一个通用的东西，有的分功能组件，有的分业务组件
大图切换，这种就是单纯的一个效果展示，只要调用就ok
一个分页，也是只单纯的调用，
组件更是一个多处都可以使用 ，不需要再单独开发的