require.js使用方法的简单代码讲解笔记
更新时间：2022年12月17日 16:38:47 投稿：yin
页面需要加载多个js文件时，加载时浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；由于js文件之间存在依赖关系，必须严格保证加载顺序，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。这种情况下require.js插件应运而生。
页面需要加载多个js文件时，加载时浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；由于js文件之间存在依赖关系，必须严格保证加载顺序，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。这种情况下require.js插件应运而生。
目的：
这个插件的体积非常小14k左右，主要是解决目前我们js文件引入臃肿的问题，它可以将我们需要的js文件定义成一个模块的方式，只要我们想引入某个模块，我们声明引入就可以了。而且是异步加载的模式，对浏览器体验也非常好，不会阻塞渲染。
基本API
require定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短
- define 从名字就可以看出这个api是用来定义一个模块
- require 加载依赖模块，并执行加载完后的回调函数
第一步：a.js定义
define(function(){
function fun1(){
alert("it works");
}
fun1();
})第二步：引入这个模块
require(["js/a"],function(){
alert("load finished");
})注意：a.js引入在js文件下，同时a.js中后缀不要了。
加载文件
加载本地是上面的那个样子，如果我们要加载其他网站要用到require.config这个方法
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a" : "js/a"
}
})
require(["jquery","a"],function($){
$(function(){
alert("load finished");
})
})这样配置后，当百度的jquery没有加载成功后，会加载本地js目录下的jquery
- 在使用requirejs时，加载模块时不用写.js后缀的，当然也是不能写后缀
- 上面例子中的callback函数中发现有$参数，这个就是依赖的jquery模块的输出变量，如果你依赖多个模块，可以依次写入多个参数来使用：
讲讲data-main这个属性：
<script data-main="js/main" src="js/require.js"></script>
其实就是引入require.js后，再引入js文件夹下的main.js文件
相关文章
如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目，都用到了RequireJS，或者是我向它们推荐了增加RequireJS。在这篇文章中，我将描述RequireJS是什么，以及它的一些基础场景。 2016-04-04
typescript封装消息提示框插件ew-message使用实战
这篇文章主要为大家介绍了typescript封装消息提示框插件ew-message使用实战,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了Underscore.js常用方法总结,本文讲解了Underscore.js概述、在node.js下安装、与集合有关的方法、与对象有关的方法、与函数相关的方法等内容,需要的朋友可以参考下2015-02-02
Typescript使用装饰器实现接口字段映射与Mock实例
这篇文章主要为大家介绍了Typescript使用装饰器实现接口字段映射与Mock实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家介绍了TypeScript类型实现加减乘除示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
一般情况下web项目的浏览器下载文件，都是使用form表单或者ajax向后端提交数据，发送请求，后端文件的URL地址或者二进制文件流。这篇文章主要介绍了使用JS 的download库在浏览器直接下载文件。2022-12-12
layui中的layer弹出层有很多提示框，但是我们使用最多的应该就几种，layer.msg、layer.alert、layer.open、layer.load等。layer 有内置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不仅允许你传入layer内置的样式class名，可以自定义class名。2023-06-06
这篇文章主要介绍了数据结构TypeScript之栈和队列详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了TypeScript 高级数据类型实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了TS 中的类型推断与放宽实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论