requireJs

来源：互联网发布：店铺淘宝客怎么找商品编辑：程序博客网时间：2024/05/29 19:45

一.引入requireJs 简单的小例子

require ( ['js/requireJs1'] ) ;

注意： require 依赖的是一个数组，即便只有一个值，也是数组形式

requireJs引入成功！

1. require(['js/requireJs1']);

HTML 代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/require.js"></script>
<script>
require(['js/requireJs1']);
</script>
</head>
<body>
</body>

</html>

javascript 代码：

define(
function fun(){
function fun1(){
alert('requireJs引入成功！');
//$('.box').css({'width':'200px','height':'100px','border':'1px solid red'});
}
fun1()
}

);

2. require(['js/requireJs1']，function（）{ alert(123) }); 同样的代码，也能成功

二.基本API

require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短

define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块，并执行加载完后的回调函数

三.同时引入多个js文件

注意：

① 引入的文件 .js 后缀不需要写

② require.config 配置完后，需要 require ([ ]) 再引入一下

③ 使用 jq 时， function（$）函数要传参 $。不然不报错 $ : unfined

引入jq 第一次打开页面报错： Uncaught ReferenceError: $ is not defined

页面刷新后就不再报错。

js/requireJs1：

define(
function fun(){
function fun1(){
alert('requireJs引入成功！');
$('.box').css({'width':'200px','height':'100px','border':'1px solid red'});
}
fun1()
}

);

① 引入一个外部文件

<head lang="en">

<meta charset="UTF-8">
<title></title>
<script src="js/require.js"></script>
<script>
require.config({
paths: {
"jquery": ["http://libs.baidu.com/jquery/2.0.3/jquery"]
}

});

require(['jquery','js/requireJs1'],function($){

$(function(){
alert('同时引入jq成功');
})
})
</script>

</head>

② 引入 2 个外部文件 ' jquery ' : 'js/jquery-1.10.1.min', = == jquery : 'js/jquery-1.10.1.min',

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/require.js"></script>
<script>
require.config({
paths: {
'jquery' : 'js/jquery-1.10.1.min',
'r1': 'js/requireJs1'

}，

shim : {

'rel' : ['jquery']

}

});
require(['jquery','r1'],function($){
$(function(){ alert('加载成功！') })
})
</script>
</head>
<body>
</body>
</html>

③ 注明加载插件，js 文件的顺序

四.首次加载 $ not fined -- shim 注释

如果没有 shim 声明，require 加载 js 文件就比较随机性，异步加载。

加了shim 声明，就限制了一些文件，只有在加载完 *.js 文件才可以了在加载当前文件。

require.config({

paths:{
"jquery" : "jquery-1.10.1.min",
"r1" : "requireJs1"
},

shim:{

'r1': ['jquery'] // 注明：加载了 jquery 文件后才能加载 r1.js