Javascript高级模块化
2017-06-29 本文已影响0人
fronter
RequireJS 是一个非常小巧的 javascript 模块载入框架，是AMD（Asynchronous Module Definition， 异步模块加载机制）规范最好的实现之一。
使用requireJS（AMD）异步加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/require2.1.11.js"></script>
<script type="text/javascript">
require(["js/test-01"]);
</script>
</head>
<body>
<h1>Hello requireJS</h1>
</body>
</html>
test-02.js文件
define(function(){
function fn1() {
alert("Hello requirejs~~~");
}
fn1();
});
基本API
requireJS 会定义三个变量： define、 require、 requirejs。
- require === requirejs，一般使用 require 更简短。
2.define 从名字就可以看出这个 api 是用来定义一个模块。
3.require 加载依赖模块，并执行加载完后的回调函数。
创建的test-02.js即是定义的模块
之前的例子中加载模块都是本地 js，但是大部分情况下网页需要加载的 JS 可能来自本地服务器、其他网站或 CDN，这样就不能通过这种方式来加载了，我们通过定义require的config方法实现对外部js文件的配置：
require.config({
paths : { //这样配置，减轻本地服务器的压力
"jquiry": "",
"test1" : "js/test-01",
"test2" : "js/test-02"
}
});
require(["test1","test2"]);
那么在引用外部js文件时，就不需要书写过多的js标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="lib/require2.1.11.js"></script>
<script src="js/config.js"></script>
</head>
<body>
<h1>Hello requireJS</h1>
</body>
</html>
1.引入requireJS源代码
2.require这个方法==requireJS 功（只有所有模块都加载成功，才会回调）
（3）是一个回调函数，加载失败
使用define的形式代替闭包函数.
