1.传统代码的缺陷
传统的用script标签导入的JS文件,有可能会阻塞页面渲染,
而且正常我们开发的时候会导入JS文件,
都会用script标签,很容易造成混乱,不容易维护
什么是模块化
1.随着网页越来越复杂,网页中引入的JS文件也就越来越多,单纯的用script引入js文件,
已经满足不了我们的需求。我们需要要团队协作,模块分离。
2.模块化是指在处理某些问题时,按照一种分类或思想功能进行模块化管理和使用。
3.设计一个模块化需要具备的能力
模块化的演变
1.平时我们把功能写在普通函数中,缺点:容易造成函数明明冲突
function fn1(){}
function fn2(){}
2.为了解决明明冲突的问题,可以用对象来封装函数,缺点:外部可以通过MyModule.count来操作count属性
var MyModule = new Object({
count = 0,
fn1: function (num){
return count += num;
},
fn2: function (num){
return count -= num;
}
})
3.匿名函数闭包(这种方式已经是模块化变成的雏形了,能够实现功能的封装,也能够隐藏私有变量)
var MyModule = (function(){
var count = 0;
var fn1 = function (num) {
return count += num;
}
var fn2 = function (num){
return count -=num;
}
return {
fn1:fn1,
fn2:fn2
}
})();
模块化变成规范
AMD是requireJS在推广中对模块化编程规范的产出
特点:对于依赖的模块,AMD是提前执行,异步加载
推崇:AMD推崇依赖前置
define(['a','b'],function(){
//依赖必须写好才能用
a.doSomething();
b.doSomething();
})
CMD是seaJS在推广中对模块化变成规范的产出
特点:CDM是延时加载
推崇:CMD推崇依赖就近
define(function(require,exports,modules){
//依赖就行书写
var a = require("a");
a.doSomething();
var b = require("b");
b.daSomething();
});
总结:这些规范目的都是为了更合理的去实现模块化变成,贴别是在浏览器中,大部分都支持模块化编程
requireJS 的基本API
一.requireJS有三个变量:(requirejs,require,define)
其中:requirejs和require是一个意思,我们一般使用require就可以,require是加载模块用的,
而且加载模块后,还可以执行回调函数
define:是定义模块(一个模块就是功能一个js文件)
二.如何使用requireJS
1.使用define定义模块
2.通过require方法来加载模块
require(['js/sayHello'])
注意:sayHello相当于sayHello.js .js可以不写
//还可以设置回调函数
require(['js/sayHello'],function(){
alert("加载完毕");
})
//如果该模块有导出内容的话,需要在回调函数中写上形参
require(['js/sayHello',function(say){
alert("加载完毕!" + say);
}])
3.通过require.config来配置路径,通过require.config不仅能加载本地问价,
还可以加载网络文件
require.config({
path:{
jquery:'http//libs.baidu.com/jquery/2.0.0/jquery',
say:'js/say'
}
});
require(['jquery','say'],function($){
$(function(){
alert("加载完毕!");
});
});