js require 导入文件_require.js 文件使用详解

RequireJS 是一个 JavaScript 模块加载器，主要用于实现异步或动态加载 js 文件，它的模块管理遵守AMD规范(Asynchronous Module Definition)。通过 RequireJS 我们可以很好地解决 js文件间相互依赖关系及 js 文件过多导致的页面加载慢等问题，很好地提高了代码的性能和可维护性。

RequireJS的基本设计思想是：通过define方法将代码定义为模块然后通过require方法，实现代码的模块加载。下面简单说下 RequireJS 的使用方法：

require.js 文件的引入

在引入 require.js 文件之前，我们需要先获取它。

与其他的 js 文件一样，require.js 同样通过 script 便签引入，代码如下：

注意：data-main 指向配置文件位置，比如上面代码中为 js文件下的 main.js 文件。省略此参数则在 require.js 文件底部配置亦可。

require.js 的基本配置

require.js 通过 config 方法进行配置，config 方法接受一个对象作为参数。完整的配置代码如下：

require.config({

baseUrl：'js/libs',

paths: {

'qrcode' : 'libs/jquery.qrcode.min',

'lazyload' : 'libs/lazyload.min',

'videojs' : 'libs/videojs.min'

shim: {

'jquery.scroll': {

deps: [ 'jquery' ],

exports: 'jQuery.fn.scroll'

}

});

其中，baseURL 与 shim 可以省略。

baseURL：设置基准路径。默认为当前位置所在路径。

paths：指定各个模块的位置。这个位置可以是同一个服务器上的相对位置，也可以是外部网址。其中每一组参数的左侧定义模块的ID，右侧定义模块的路径，路径不包含“.js”扩展名。可以为每个模块定义多个位置，如果第一个位置加载失败，则加载第二个位置。

shim：有些库不是AMD兼容的，这时就需要指定shim属性的值。shim可以理解成“垫片”，用来帮助require.js加载非AMD规范的库。其中 deps 定义依赖关系， exports 定义输出方式。

如何请求 require.js

定义好的模块需要调用时采用如下方式调用：

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

// Some Code

});

如果需要加载错误处理函数，可以这么写：

require(

['moduleA', 'moduleB', 'moduleC'],

function (moduleA, moduleB, moduleC){

// Some Code

}，

function (err){

// Some Code

}

);

require 的三个参数分别为依赖关系、回调函数、错误处理函数。

定义一个自己的模块

除了一些现有的模块文件，我们也可以使用 define 定义一个自己的模块。定义方法如下：

define(['moduleA','moduleB'], function(moduleA, moduleB) {

// Some Code

});

第一个参数为依赖关系，第二个参数为回调函数。需要注意的是函数的参数与前面的依赖一一对应。

js require 导入文件_require.js 文件使用详解相关推荐

【Matlab】Matlab导入多个.mat文件并画图的过程详解
Matlab导入多个.mat文件并画图的过程详解 0. 实验背景 1. 导入.mat文件存储 1.1 导入.mat文件及作图最简单的方式: 1.2 导入.mat文件及作图的脚本代码 2. plot画图 ...
fileinput 时间_JavaScript_Bootstrap Fileinput文件上传组件用法详解，最近时间空余，总结了一些关...
最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到phpstudy平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的 ...
Linux 创建网页服务,Linux使用Node.js建立访问静态网页的服务实例详解
Linux使用Node.js建立访问静态网页的服务实例详解一.安装node.js运行所需要的环境,: 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.j ...
fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
java spring mvc 上传_Java Spring MVC 上传下载文件配置及controller方法详解
下载: 1.在spring-mvc中配置(用于100M以下的文件下载) 下载文件代码 @RequestMapping("/file/{name.rp}") public Respo ...
linux中的文件夹压缩文件,linux将文件拷贝到目录下Linux下文件的压缩与打包详解...
在Linux中,有很多的压缩命令.利用这些压缩命令,可以方便的从网络上下载大型的文件.同时,我们知道,Linux文件的扩展名是没有特殊意义的,不过,因为Linux下存在着许多压缩命令,所以为了方便记忆 ...
JS逆向之补环境过瑞数详解
JS逆向之补环境过瑞数详解 "瑞数" 是逆向路上的一座大山,是许多JS逆向者绕不开的一堵围墙,也是跳槽简历上的一个亮点,我们必须得在下次跳槽前攻克它!! 好在现在网上有很多讲解瑞数 ...
linux命令rz和sz,linux传输文件命令 rz 和 sz详解
linux传输文件命令 rz 和 sz详解一. 概述 rz,sz是Linux/Unix同Windows进行ZModem文件传输的命令行工具. 优点就是不用再开一个sftp工具登录上去上传下载文件. ...
python怎么去掉视频字幕_利用Python实现字幕挂载(把字幕文件与视频合并)思路详解...
其实超简单超简单!python好现成的库,一下子省略了好多步骤! 本文在Windows环境下!linux只是不需要手动输入imagicmagick的位置! 需要用到的环境 python(基本上只要不是 ...
python统计csv行数_对Python 多线程统计所有csv文件的行数方法详解
如下所示: #统计某文件夹下的所有csv文件的行数(多线程) import threading import csv import os class MyThreadLine(threading.Th ...

js require 导入文件_require.js 文件使用详解

js require 导入文件_require.js 文件使用详解相关推荐

最新文章

热门文章