require.js 加载过程与使用方法介绍

2024-04-03 11:37:31

require.js简介

require.js是javascript模块化编程中常用的一个JS库。

现在的网页功能较以前已经丰富了许多，同时网页上需要导入越来越多的JS文件来实现这些功能。使用原有的script标签一个个导入js文件会导致代码的复杂与臃肿。并且导入的各个JS文件可能会有冲突，导致许多功能无法使用且会使bug非常难定位。

这样的情况下我们就需要一个合适的Javascript模块载入框架，来满足我们团队协作、模块复用、单元测试等等一系列复杂的需求。使用require.js进行模块化加载会使前端代码的质量得到提升。

require.js的优点

不使用require.js的写法

在以前的编程中，我们或许会这样导入js文件：

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="xxx.js"></script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

而在xxx.js文件中我们会这样写：

function fun1(){
 alert("it works");
}

fun1();

上述的xxx.js文件中的fun1方法可能会与其他文件中的方法重名导致方法被重载覆盖，会导致一些未知的bug。所以一些有经验的程序员或许会更倾向与这样写：

(function(){
 function fun1(){
  alert("it works");
 }

 fun1();
})()

这样编码的好处在于限制了fun1方法的作用域，这样就不会被其他的fun1方法所重写。并且这样的写法也防止了污染全局变量。

我们运行以上的代码时，会发现xxx.js中的alert运行时，页面并未加载完成。（body标签中的span并未显示在页面中）。这是因为alert阻塞了浏览器渲染，等alert完成后浏览器才会继续进行渲染。（这里很像主进程被阻塞了，程序会等待当前操作完成后再继续进行）。

使用require.js

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="require.js"></script>
  <script type="text/javascript">
   require(["a"]);
  </script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

这里先导入了require.js，然后使用require([“xxx”])来加载xxx.JS文件

xxx.js
define(function(){
 function fun1(){
  alert("it works");
 }

 fun1();
})

运行上两个文件，我们发现alert时并未阻塞浏览器渲染，body中的span依然出现在了页面上。所以首先我们可以发现，使用require.js进行加载时我们不会阻塞浏览器渲染。

同时，我们会发现使用require.js加载时，也是完全避免了js文件中的方法被重写覆盖或js文件中的变量、方法污染全局变量、方法的情况。

我们使用程序代码加载模块，也避免了下面这样丑陋的情况：

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

require.js 的加载

使用require.js异步加载js文件时，相当于是另开一个线程来进行加载文件这个操作。在require.js的定义中，我们可以在要加载的文件中添加它的依赖项，这些依赖文件会该文件被加载之前先加载，再以参数的方式传入到该文件之中。
xxx.js写法如下：

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

　　　　// some code here

　　});

此时xxx.js依赖于moduleA，moduleB，moduleC。使用require.js加载xxx.js时，会先加载moduleA，moduleB，moduleC三个模块，然后以参数的方式传入xxx.js中。

这里我们原则上要避免循环依赖的出现。例如：A依赖与B，B又依赖与A。这样就出现了循环依赖。

虽然出现循环依赖不会导致加载失败，但是在加载A时，传入A的依赖项B中的A参数会为null值，导致一些无法预知的问题。所以我们还是要尽量避免循环依赖的情况出现。

这里的异步加载都不会影响该文件以外的所有变量与方法。

20181029 更新

在实际的使用中遇到了一些问题，发现实际上在同一个页面中，如果出现了A依赖于C，B同时也依赖与C。我们如果在此时出现一个文件同时依赖与A与B，在这种情况下A与B所依赖的C会是同一个实例。

也就是说，在一个页面中，使用require.js加载的文件，是以类似于单例的形式的存在的。在首次加载时异步加载，其他文件需要依赖时就将已加载完成的文件注入。

这样就会导致A与B使用的是C的同一个实例，C中的全局变量变化会同时影响到A、B两个模块。这是在开发过程中需要注意的。！

总结

以上所述是小编给大家介绍的require.js 加载过程与使用方法介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

详解require.js配置路径的用法和css的引入

前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前所未有的热捧.大量的前端框架出现了,这些框架都在尝试着解决一些前端开发中的共性问题,但是实现又不尽相同.通常一般的前端加载js文件都是这样 : <script type="text/javascript" src="js/js1.js"></script> <script type="text/javascript" src="
require.js中的define函数详解

前言模块不同于传统的脚本文件,它良好地定义了一个作用域来避免全局名称空间污染.它可以显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入,而无需引用全局变量.RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其他模块. RequireJS的模块语法允许它尽快地加载多个模块,虽然加载的顺序不定,但依赖的顺序最终是正确的.同时因为无需创建全局变量,甚至可以做到在同一个页面上同时加载同一模块的不同版本. 在定义一个模块的时候,方法的第一行写一个"use
require.js配合插件text.js实现最简单的单页应用程序

写了一个测试代码,用require.js配合它的一个插件text.js实现了最简单的单页应用程序,简单的记录一下,方便以后复习, git地址:https://github.com/lily1010/requireSPA 下面来看一下目录从上面项目可以看出,我将css单独抽离出去,实现了按需加载,即加载test1.html时会加载test1.css,加载test2.html时会加载test2.css. 一.先来看入口index.html代码 <!DOCTYPE html> <html&g
require.js 加载 vue组件 r.js 合并压缩的实例

准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多合并文件目录忽略部分文件及文件夹一.先说vue 组件先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入略 <div id="header"&g
基于Require.js使用方法(总结)

一.为什么要使用require.js 首先一个页面如果在加载多个js文件的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长:其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难. require.js,就是为了解决这两个问题: 1. 实现js文件的异步加载,避免网页失去响应: 2. 管理模块之间的依赖性,便于代码的编写和维护. 二.require.js的加载第一步,去官网下载最新版本,直接放到页面进行加载 <sc
require.js+vue开发微信上传图片组件

由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人--),没办法,想把vue用起来,唯有在原来的基础上改进.使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽.然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resou
Require.JS中的几种define定义方式示例

本文主要给大家介绍的是关于Require.JS中define定义方式的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 定义简单的键值对 define({ color: "black", size: "unisize" }); 定义不带依赖的函数 define(function () { //Do setup work here return { color: "black", size: "unisize" } })
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>
require.js 加载过程与使用方法介绍

require.js简介 require.js是javascript模块化编程中常用的一个JS库. 现在的网页功能较以前已经丰富了许多,同时网页上需要导入越来越多的JS文件来实现这些功能.使用原有的script标签一个个导入js文件会导致代码的复杂与臃肿.并且导入的各个JS文件可能会有冲突,导致许多功能无法使用且会使bug非常难定位. 这样的情况下我们就需要一个合适的Javascript模块载入框架,来满足我们团队协作.模块复用.单元测试等等一系列复杂的需求.使用require.js进行模块化加
Vue使用Three.js加载glTF模型的方法详解

前言 Three.js是一个跨浏览器的脚本,使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形,基于WebGL实现,对WebGL进行了进一步的封装,简化了多数复杂的接口. Three.js支持包括 .obj..gltf等类型的模型结构.glTF(GL传输格式)是Khronos的一个开放项目,它为3D资产提供了一种通用的.可扩展的格式,这种格式既高效又与现代web技术高度互操作. obj格式的模型只支持顶点.法线.纹理坐标和基本材质,而glTF模型除上述所有内容外
js加载之使用DOM方法动态加载Javascript文件

传统上,加载Javascript文件都是使用<script>标签. 就像下面这样: <script type="text/javascript" src="example.js"></script> <script>标签很方便,只要加入网页,浏览器就会读取并运行.但是,它存在一些严重的缺陷. (1)严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,
spring boot微服务场景下apollo加载过程解析

目录集成使用 1.添加gradle依赖 2.配置application.properties 必须配置可选配置加载过程解析 postProcessEnvironment方法逻辑解析 initialize方法逻辑解析结语集成使用 1.添加 gradle 依赖 implementation "com.ctrip.framework.apollo:apollo-client:1.6.0" 2.配置 application.properties apollo 自身的配置共包含 9 项
简单模拟node.js中require的加载机制

一.先了解一下,nodejs中require的加载机制 1.require的加载文件顺序 require 加载文件时可以省略扩展名: require('./module'); // 此时文件按 JS 文件执行 require('./module.js'); // 此时文件按 JSON 文件解析 require('./module.json'); // 此时文件预编译好的 C++ 模块执行 require('./module.node'); // 载入目录module目录中的 package.js
JS动态加载当前时间的方法

本文实例讲述了JS动态加载当前时间的方法.分享给大家供大家参考.具体实现方法如下: <body bgcolor="#fef4d9" onload ="time()"> <script language="JavaScript"> function time () { var now = new Date(); var yr = now.getYear(); var mName = now.getMonth() + 1; v
详解Vue.js在页面加载时执行某个方法

jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程总结以上所述是小编给大家介绍的Vue.js在页面加载时执行某个方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!
js针对图片加载失败的处理方法分析

本文实例讲述了js针对图片加载失败的处理方法.分享给大家供大家参考,具体如下: 在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数: $("img").error(function(){ //当图片加载失败时,你要进行的操作 //$(this).attr('src','images/no_pic.jpg')
jQuery NProgress.js加载进度插件的简单使用方法

NProgress.js 说明: NProgress是基于jquery的,且版本要 >1.8 下载地址: https://github.com/rstacruz/nprogress API: NProgress.start() - 启动进度条 NProgress.set(0.4) - 将进度设置到具体的百分比位置 NProgress.inc() - 少量增加进度 NProgress.done() - 将进度条标为完成状态使用步骤: 1. 引入 <link rel="styleshe

require.js 加载过程与使用方法介绍

相关推荐

随机推荐