什么是requireJs？有什么用？用了有什么好处？马上稍等一一解答....
最早的前端Js代码可能如下面这样的代码，相信大家都见过,如下面这段示例代码..
//文件名字 calc.js
//内容如下:
function add(x,y){
return x+y;
};
function sub(x,y){
return x-y;
};
.....然后在需要用到这些方法的地方，引用js
<script language="JavaScript" src="calc.js"></script>
// 假若还依赖其他js
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>这样以来，有以下几点问题:
1.页面要等待js代码加载，完成才能加载
2.由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
3.空间污染
requireJS就是为了解决这两个问题而来
1）实现js文件的异步加载，避免网页失去响应；
2）管理模块之间的依赖性，便于代码的编写和维护，独立变量空间，防止污染
如何来使用requireJs？
1.创建test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title1</title >
</script>
</head>
<body>
body2
//也许你更喜欢，把javascript放这里，原因就不说了..
<script data-main="main"
src="http://apps.bdimg.com/libs/require.js/2.1.9/require.min.js" >
</body>
</html>2.创建main.js
require.config({
baseUrl:"../js",//指定js代码的根路径
paths : {
"jquery" ://两个参数，如果CDN加载失败，就采用第二个参数，加载本地资源 ["http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min","util/jquery.min"],
"jquery-cookie":["http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.min"],
'jquery.tabs': "util/jquery.tabs.min"
},
shim: {//用于处理非AMD规范的JavaScript代码，什么是AMD规范？请百度，google..
'jquery.tabs': {
deps: ['jquery'],//此模块依赖的其它模块
exports: 'jQuery.fn.tabs'//此模块的引用名字，eg：jquery用$
}
}
});
require(["jquery","j1"],function($,J1){//main.js运行后，jquery模块就有了，这里直接注入即可，j1同理，分别对应两个模块的引用对象
function Controller() {
// 继承于J1类
J1.init.call(this);
alert(this.add(3,4));//调用继承于J1.js的add函数
alert(this.sub(4,3));//调用继承于J1.js的sub函数
alert(this.type(3)); //调用继承于J1.js的type函数
this.init();//调用本地的init函数
}
Controller.prototype.init=function () {
alert("init load");
}
//初始化Controller类
$(document).ready(function () {
new Controller;
});
});3.创建J1.js
define(["jquery"],function ($){//注入jquery模块
function Calc() {
this.add = function (x,y){
return x+y;
};
this.sub=function (x,y) {
return x-y;
};
this.type=function (x) {
return $.type(x);//用jquery的方法
}
};
return {
init: Calc //返回此Calc类，让其它模块继承
};
});简单描述以下上述代码的意思
html页面上的：
<script data-main="main" src="http://apps.bdimg.com/libs/require.js/2.1.9/require.min.js" ></script>这个引用百度CDN的requirejs文件,加载完毕后，加载同级目录下的main.js文件。熟悉Java的朋友，可以简单吧requireJs看做是个spring，管理依赖注入的容器
mian.js：这个主要是实现，把项目依赖的js文件，让requirejs管理起来，注入到对应的模块去使用，
J1.js：主要写了一些公共的方法，让继承它的子类去使用。通过define定义一个模块，第一个参数，指定此模块的依赖其它的模块，第二个参数，指 注入成功后，的回调函数处理
上述代码，如有问题，欢迎纠正，学习阶段…………….
扫一扫
1384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
