模块化开发

1.什么是模块化？
模块指的是具有相同属性和行为的事物的集合。
在前端中，我们习惯将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块。
目的：为了分工及协作，使每个js文件只关注自身关注的事情，让每个js文件各行其职。
解决了js之间相互调用问题
2.什么是commonjs规范
模块化指的就是遵守commonjs规范，解决不同js模块之前相互调用问题
commonJs规范：
(1).如果我想在一个A.js文件中调用另一个B.js文件，一定要在A.js中require('B.js');
(2).另一个被调用的B.js一定要对外提供接口 module.exports = 接口

webpack最核心的是它的加载器 ---loaders:
css style-loader, css-loader
//script script-loader,coffee-loader,jsx-loader(jsx-loader对任何原生js都可以)
//es6支持babel-loader
怎么减少webpack太大这个问题呢？
减少公共的依赖，把一些公共的部分抽取出来比如css
webpack优点：
只要暴露了接口，可以随时调用
3.模块化工具gulp+browserify,webpack基于node进行模块化seajs
模块化最核心价值在于解决不同文件之间分工和协作，解决相互之间调用相互依赖的关系
gulp+browserify步骤：
a: npm install gulp --save -dev
b: npm install browserify --save -dev
c: npm install vinyl-source-stream --save-dev 文件流输出工具
d: 在gulpfile.js里面编写任务实现模块化

gulp本身没有模块化功能，他借助第三方相关插件（插件资源相当庞大哦~~）
gulp+browserify：实现模块化整合的过程和webpack一样，就是将相互之间有调用关系的文件整合在一个大的js文件里面（webpack中是整合在bundle.js中，gulp+browserify也是自动整合到一个js文件中）





对比gulp,webpack之间的区别：
a: gulp本身没有一些功能，只能依赖于插件
b: webpack 本身就可以检测当前项目里面文件变化
c: webpack -w 实时监听当前项目下面的js文件变化
d: webpack -p 直接对资源进行压缩（资源压缩）







共性：
I： 首先读取入口文件，可以自动识别相互之间的调用关系
II：将所有依赖关系的文件都整合到了一个大js文件里

4.seajs:

seajs与requirejs 声明方式都十分类似 （两者都是前端实现代码模块化，相当于一个前端的js模块化加载器，他俩和webpack是不一样的，webpack是通过nodejs将文件打包成完整的大文件【服务端进行整合】）
CMD规范：common module define 同步的 seaJS 遵循 CMD

AMD规范：async module define 异步的 requireJS遵循AMD

功能和webpack，gulp browserif类似，都可以实现模块化
webpack 遵循 commJs 规范 基于服务端的（基于node.js）

AMD 与 CMD 的区别：
1.对于依赖的模块，CMD 是延迟执行，AMD
是提前执行。
2. CMD 推崇依赖就近，AMD
推崇依赖前置。
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

seajs声明模块的时候：
①：首先要去define
②：在define中写一个回调函数三个值（require，exports，module）



5.模块化案例 前端mvc架构
Vue 组件化&模块化，react模块化， nodejs编程时，每个文件都是模块
A: 什么是MVC?

后端开发一种概念（很久之前是没有前端这个职位的）
view ------> html + js + css +img
controller ------>控制层
model ------>数据模型
model view controller

演变了一套MVC体系：
view (html +css +js)
controller(专注于实现服务和逻辑控制的层面叫做控制器)
//service (业务控制层) 如果用angely 时会用到这一层
model (数据变量||ajax从服务端取回的数据)

B:MVC有什么优势？为什么使用MVC
体现了一种分层概念，让每个层面只做自己该做行为，减少代码耦合和冗余
C:如何去构建MVC

基于webpack搭建一个MVC的架构

view ------ 写静态页面 css js img 效果

controller------ 监听页面中请求和事件，处理请求和事件，controller 访问 model,得到数据，在绑定到页面里面

model -----只负责对外提供一些数据



controller.js:
//控制层主要是检测view上面任何事件行为，以及对view中任何事件行为进行处理和响应

var btn =document.getElementById("btn");
btn.addEventListener('touchend',function(){

//1.点击以后查询model里面的数据 ，调用model里面的数据接口

var _model = require('../mode/model.js');

_model(function(res){

//2.得到model数据

res = JSON.parse(res);

//3.将数据关联到页面上

var str =' ';

for(var i=0;i<res.length;i++){

str+=‘<div><img src="'+res[i].goodsImg+'"/><span>'+res[i].goodsName+'</span></div>’

}

document.getElementsByClassName("list")[0].innerHTML = str;

});

model.js:
/*
* 引入rest.js作为ajax访问工具(rest.js)是之前写的ajax的一个插件
* model.js 里面引用rest.js API
*/
var rest = require('./rest.js');
/*
* 函数queryList被controller所调用(需要暴露接口)
*/
var quaryList = function(fn){
var service ="http://10.9.166.7:3000/query";
rest.get(service,function(response){

fn(response);
});
}
module.exports = queryList;});
view: