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

RequireJS介绍

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

兼容性

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

优点

实现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的简单介绍即使用方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • require.js的用法详解

    require.js的用法详解

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></s

  • Require.js的基本用法详解

    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染和其后的脚本的执行,并提供了在加载完成之后的执行相应回调函数的功能: ②:require.js要求js脚本必须要实现模块化,即文件化:而require.js的作用之一就是加载js模块,也就是js文件. ③:require.js可以管理js模块/文件之间的依赖;即不同的框架例如Jquery,Angul

  • 基于require.js的使用(实例讲解)

    本篇文章总结下require.js使用方法. 1.为什么使用require.js? 使用之前,我的页面的js是这样的 <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script>

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

    RequireJS介绍 RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用.使用RequireJS加载模块化脚本将提高代码的加载速度和质量. 兼容性 浏览器(browser) 是否兼容 IE 6+ 兼容 ✔ Firefox 2+ 兼容 ✔ Safari 3.2+ 兼容 ✔ Chrome 3+ 兼容 ✔ Opera 10+ 兼容 ✔ 优点 实现js文件的异步加载,避免网页失去响应 管理模块之间的依赖性,便于代码的编写和维护 快速上手 step 1 引入require

  • PyTorch中torch.utils.data.DataLoader简单介绍与使用方法

    目录 一.torch.utils.data.DataLoader 简介 二.实例 参考链接 总结 一.torch.utils.data.DataLoader 简介 作用:torch.utils.data.DataLoader 主要是对数据进行 batch 的划分. 数据加载器,结合了数据集和取样器,并且可以提供多个线程处理数据集. 在训练模型时使用到此函数,用来 把训练数据分成多个小组 ,此函数 每次抛出一组数据 .直至把所有的数据都抛出.就是做一个数据的初始化. 好处: 使用DataLoade

  • Atom-IDE 的使用方法简单介绍

    Atom-IDE 的使用方法简单介绍

    Atom-IDE 的使用方法简单介绍 今日,GitHub 宣布与 Facebook 合作推出了 Atom-IDE -- 它包括一系列将类 IDE 功能带到 Atom 的可选工具包. 初次发布的版本包括更智能.感知上下文的自动完成:导航功能,如大纲视图和 goto-definition,以及其他有用的功能:还包括错误.警告提醒和格式化文档功能. 查看 Atom 博客以了解更多. Atom-IDE 包括适用于 C#, Flow, Java, JavaScript, PHP, 和 TypeScript

  • BootstrapTable refresh 方法使用实例简单介绍

    本文就bootstrapTable refresh 方法如何传递参数做简单举例说明.下面代码中,一个table,一个button,单击button会触发刷新表格操作. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../libs/bootstrap

  • 简单介绍HTTP请求方式中8种请求方法

    简单介绍 HTTP是超文本传输协议,其定义了客户端与服务器端之间文本传输的规范.HTTP默认使用80端口,这个端口指的是服务端的端口,而客户端使用的端口是动态分配的.当我们没有指定端口访问时,浏览器会默认帮我们添加80端口.我们也可以自己指定访问端口如:http://www.ip138.com:80. 需要注意的是,现在大多数访问都使用了HTTPS协议,而HTTPS的默认端口为443,如果使用80端口访问HTTPS协议的服务器可能会被拒绝. HTTP请求的方法:HTTP/1.1协议中共定义了八种

  • 简单介绍Python虚拟环境及使用方法

    简单介绍Python虚拟环境及使用方法

    一.为什么需要虚拟环境? 这里的环境,指的就是 Python 代码的运行环境.它应该包含以下信息: Python 解释器,用哪个解释器来执行代码? Python 库的位置,该去哪里 import 所需要的模块? 可执行程序的位置,比如说安装了 pip,那么 pip 命令是在哪里? 由于每个项目的情况都可能不一样,比如这个项目用的是vtk 7.1,另一个项目用的是vtk 9.0.如果不进行环境隔离而是全局安装,就会导致包的冲突从而出现问题,这个时候让每个项目都拥有一套独立的Python环境,这样就

  • node.js中http模块和url模块的简单介绍

    node.js中http模块和url模块的简单介绍

    前言 本文主要给大家介绍了关于node.js中http模块与url模块的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.http模块的简单介绍 node.js当中的http内置模块可以用于创建http服务器与http客户端. 1.引包 const http = require('http'); 2.创建http服务器 var server = http.createServer((req,res)=>{ }); 使用http的.createServer()方法可以

  • Apache shiro的简单介绍与使用教程(与spring整合使用）

    Apache shiro的简单介绍与使用教程(与spring整合使用）

    apache shiro框架简介 Apache Shiro是一个强大而灵活的开源安全框架,它能够干净利落地处理身份认证,授权,企业会话管理和加密.现在,使用Apache Shiro的人越来越多,因为它相当简单,相比比Spring Security,Shiro可能没有Spring Security那么多强大的功能,但是在实际工作时可能并不需要那么复杂的东西,所以使用简单的Shiro就足够了. 以下是你可以用 Apache Shiro所做的事情: Shiro的4大核心部分--身份验证,授权,会话管理

  • JS操作时间 - UNIX时间戳的简单介绍(必看篇)

    准备知识 GMT(Greenwich Mean Time) - 格林尼治时间.UTC(Universal Time Code) - 国际协调时间.PST(Pacific Standard Time,太平洋标准时间). UTC出现的比GMT时间晚,可以认为UTC时间更加精确,不过它们之间只相差几秒钟. UTC开始时间为:1970-01-01T00:00:00.000Z(这种时间设置可以一直精确到毫秒,字母T和Z仅仅是一种格式) UNIX时间戳指的是从1970-01-01T00:00:00.000Z

  • 简单介绍下 PHP5 中引入的 MYSQLI的用途

    在新下载的PHP5中你会发现多了一个mysqli.dll,它是干什么用的呢?我简单介绍下... mysqli.dll是PHP对mysql新特性的一个扩展支持.在PHP5中可以在php.ini中加载. mysql后面的i,指improved, interface, ingenious, incompatible or incomplete(改扩展仍在开发中,因为MYSQL4.1和MYSQL5都没有正式推出尚在开发中,新的特性没有完全实现) mysqli想实现的目标具体有: -更简单的维护 -更好的

随机推荐