RequireJS介绍与应用

介绍

官方介绍
RequireJS是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但可以在其他JavaScript环境（例如Rhino和Node）中使用。使用像RequireJS这样的模块化脚本加载器将提高代码的速度和质量。下面我们会使用一个实例对其引用方式、使用方法进行说明

1、示例目录结构

下图是使用RequireJS的常规目录结构介绍：
1、apps/中data.js用于数据层处理，view.js用于视图层处理，index.js用于绑定数据和视图。
2、libs/中存放依赖组件jquery-xxx.js和require.js。
3、main.js是主配置文件，用于建立其它js文件和RequireJS关系。
4、index.html是一个视图模板。

2、实例开发

2.1、模板编写

在index.html模板中需要使用脚本标签引入require.js，并且需要指定data-main="js/main.js"

<script data-main="js/main.js" src="js/libs/require.js"></script>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入require.js --><script data-main="js/main.js" src="js/libs/require.js"></script>
</head>
<body><div id="testId"></div>
</body>
</html>

2.2、配置文件处理

在主配置文件main.js中，将需要引用的各js文件，交给requirejs管理。这里是给每一个js文件起一个别名，然后以对象形式注入到requirejs中，后续在其它js文件中可以直接使用别名调用。

//主配置文件
requirejs.config({//定义基础目录路径baseUrl:'js/',//创建文件映射关系，.js后缀不需要写paths:{"jquery":"libs/jquery-3.2.1","data":"apps/data","index":"apps/index","view":"apps/view"}
});//在requirejs中引入上面定义的js文件，$符号表示jquery对象
requirejs(["jquery","data","index","view"],function ($,data,index,view) {});

2.3、数据处理

在data.js中定义一个数据处理函数，返回hello world文本。另外，我们可以看到requirejs使用define()函数进行自定义。

/***  数据定义：负责数据处理*/
define(function () {function getData() {return "hello world";}return{getData:getData}
});

2.4、视图处理

在view.js中定义一个视图处理函数，里面包括了get方法和set方法，get方法用于绑定html模板中testId值，set方法用于给html模板赋值后暴露给外部调用

/***  视图定义：负责视图处理*/
define(["jquery"],function ($) {//get视图function getView() {return  $("#testId");}//set视图function setView(data) {getView().html(data);}return{setView:setView,}
});

2.5、数据与视图绑定

在index.js中绑定数据，渲染视图

/***  绑定数据，渲染视图*/
define(["data","view"],function (data, view) {view.setView(data.getData);
});

2.6、效果查看

访问index.html界面，可以看到hello world文本渲染成功，同时在控制台也可以看到相关的js文件加载成功