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: