当前位置：首页 > 资讯 > 技术文档

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

时间：2021-05-20 22:33 编辑：来源：阅读：
扫一扫，手机访问

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

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

浏览器（browser）	是否兼容
IE 6+	兼容 ✔
Firefox 2+	兼容 ✔
Safari 3.2+	兼容 ✔
Chrome 3+	兼容 ✔
Opera 10+	兼容 ✔

[b]优点[/b] 实现js文件的异步加载，避免网页失去响应管理模块之间的依赖性，便于代码的编写和维护 [b]快速上手[/b] [b]step 1[/b] 引入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>

[b]step 2[/b] 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>

[b]step 3[/b] step 2中重复出现了require.config配置，如果每个页面中都加入配置，就显得不大好了，requirejs提供了一种叫"主数据"的功能创建一个main.js把step 2中require.config放到main.js中

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

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

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

以上就是小编为大家带来的关于RequireJS的简单介绍即使用方法全部内容了，希望大家多多支持编程素材网~

全部评论(0)

上一篇：固定网页背景图同时保持图片比例的思路代码
下一篇：浅谈node的事件机制

资讯排行榜
更多>>