关于RequireJS的简单介绍即使用方法

来源：懂视网责编：小采时间：2020-11-27 20:28:33

关于RequireJS的简单介绍即使用方法

关于RequireJS的简单介绍即使用方法:RequireJS介绍RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。兼容性优点实现js文件的异步加载，避免网页失去响应管理模块之间的依赖性，便于代码的编写和维护快速上手step

推荐度：

点击下载本文 文档为doc格式

导读关于RequireJS的简单介绍即使用方法:RequireJS介绍RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。兼容性优点实现js文件的异步加载，避免网页失去响应管理模块之间的依赖性，便于代码的编写和维护快速上手step

RequireJS介绍

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

兼容性

优点

实现js文件的异步加载，避免网页失去响应

管理模块之间的依赖性，便于代码的编写和维护

快速上手

step 1

引入require.js

require()中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义

第二个参数是回调函数（callback）,可以用来解决模块之间的依赖性

<!DOCTYPE html>
<html>
 <head>
 <script type="text/javascript" src="require.js"></script>
 <script type="text/javascript">
 require(["js/a"], function(){
 alert("load finished");
 });
 </script>
 </head>
 <body>
 body
 </body>
</html>

step 2

require.config是用来配置模块加载位置

如果固定的位置比较长，可以使用 baseUrl : "js"，则paths中就不用写js了

<!DOCTYPE html>
<html>
 <head>
 <script type="text/javascript" src="require.js"></script>
 <script type="text/javascript">
 require.config({
 paths : {
 "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"],
 "a" : "js/a" 
 }
 });
 
 require(["jquery", "a"], function(){
 alert("load finished");
 });
 </script>
 </head>
 <body>
 body
 </body>
</html>

step 3

step 2中重复出现了require.config配置，如果每个页面中都加入配置，就显得不大好了，requirejs提供了一种叫"主数据"的功能

创建一个main.js把step 2中require.config放到main.js中

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

step 4

通过require加载的模块一般都需要符合AMD规范即使用define来申明模块，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能：shim

require.config({
 shim: {
 "underscore" : {
 exports : "_";
 },
 "jquery.form" : ["jquery"]
 }
});
require(["jquery", "jquery.form"], function($){
 $(function(){
 $("#form").ajaxSubmit({...});
 })
});

关于RequireJS的简单介绍即使用方法

推荐度：

点击下载本文 文档为doc格式

标签：使用使用方法简单

热门焦点

关于RequireJS的简单介绍即使用方法

关于RequireJS的简单介绍即使用方法

关于RequireJS的简单介绍即使用方法

最新推荐

猜你喜欢

热门推荐