什么是RequireJs
RequireJS 是一个JavaScript模块加载器。
在ES6出现之前,JS不像其他语言同样拥有“模块”这一概念,于是为了支持JS模块化,出现了各种各样的语言工具,如webpack,如ReuqireJS。

为什么使用RequireJS
· 模块化:模块化就是将不同功能的函数封装起来,并提供使用接口,他们彼此之间互不影响。
· 不会阻塞页面:RequireJS,会在相关的js加载后执行回调函数,这个过程是异步的,所以它不会阻塞页面。
· 按需加载:平时我们写html文件的时候,在底部可能会引用一堆js文件。在页面加载的时候,这些js也会全部加载。使用require.js就能避免此问题。举个例子,比如说我写了一个点击事件,放到了一个js文件里,并在html引用,在不使用require.js的情况下,页面加载它跟着加载,使用后则是什么时候触发点击事件,什么时候才会加载js。

如何使用RequireJS
1.按照如下目录结构,创建一个文件夹

 
目录结构

:马赛克部分是后续写的模块;jquery版本需要用1.7.0及以上的;main.js是主要的配置文件;html文件名称随意

2.在html引入require.js

<script type="text/javascript" data-main="js/script/main" src="js/lib/require.js"></script>

require.js可以npm下载,或者去官网下载。
script里有个data-main属性,require.js会在加载完成以后通过回调方法去加载这data-main里面的js文件,所以这个js文件被加载的时候,RequireJS已经加载执行完毕。

3.配置main.js,这里主要介绍如何在main.js里引入jquery

require.config({
paths:{
"jquery":'../lib/jquery.min'
}
});
require(['jquery'],function($){
...
//通过此方式引入jquery才能使用$,接下来正常写jquery代码就好
})

require.config()可以对模块的加载行为进行自定义,并把模块变为全局可使用的。require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。
require( [ ] ,function( ){ } )是require.js的核心之一,它接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['jquery'];第二个参数是一个回调函数,当前面指定的模块加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
既然第一个参数是数组,里面就可以有多个值
eg.

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

require()会异步加载每个模块,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

4.自己编写的模块不像第三方插件可以直接引用,要引用自己写的模块,首先要对模块进行定义。
如下面的例子,我写了一个弹窗文件,命名为mtWindow.js,也在script目录下

define(function(){
var mtWindow=function(msg){
$(".body_contanier").append('<div class="modai"><div class="motai_up"><p class="attention">提示</p><p class="charcter">'+msg+'</p></div><span class="mt_line"></span><p class="motai_down">确定</p></div><div class="overlay"></div>');
$(".modai").css("display","block")
.next().css("display","block");
$(".motai_down").click(function(){
$(".modai").css("display","none")
.next().css("display","none");
$(".modai").remove();
$(".overlay").remove();
});
}
return {
mtWindow:mtWindow
};
})

注意,此模块也用到了$,因此在main.js里引用此模块的时候,需要嵌套引用。

require(['jquery'],function($){
require(['mtWindow'],function(mtWindow){
mtWindow.mtWindow("手机号格式错误");
})
})

注:require数组里的mtWindow是文件路径,不用写文件后缀.function里的参数需要与文件名保持一致(非三方插件),否则会报错。

定义分两种情况:有依赖、无依赖。
上面的define代码就是没有依赖的,即不依赖其他模块。它返回的是一个对象,相当于对外提供一个接口,在调用此模块的时候,先使用require()引用,再在回调函数内部使用 A.B的形式调用即可。
如果此模块依赖其他模块,define里增加一个数组参数,来说明依赖模块的路径
eg.

define(['依赖的模块路径'], function(依赖模块名称){
 ...
 return {
  ...
 };
});

自定义的模块如果不需要变为全局来利用,不需要在require.config里配置路径

5.运行html文件,观察js的执行顺序
eg.

 
登录

功能:点击获取验证码,会验证手机号以及验证码格式,格式错误则弹窗提示,加载的是mtWindow.js,此时我们可以看到下面并没有这个文件。

 
刚打开页面时加载的js文件

现在我们输入一个错误的手机号码,来观察是否会加载mtWindow.js

 
手机号码输入错误
 
弹窗提示
 
文件出现

由此,我们确实看到,当触发模块时它才会加载,而不是一开始就全部加载。
注:addClass.js是另外一个模块,也是弹窗出现后才加载出来的js.

总结
require.js将javascript模块化确实比较好用,语法也简单,主要掌握三个语法就能实现一定的功能,即require.config()、require()、define()。但可惜自从webpack出现后,RequireJs几乎退出了人们的视野,官网也不再升级版本,后续出现的框架如angular、React、Vue又将前端模块上升到了另外一个高度。跟随前端时代的变迁固然重要,但有时,尝试一些“老技术”也无可厚非,或许也能给我们带来不同的体会。

RequireJs的理解的更多相关文章

  1. RequireJs 深入理解

    原文   http://www.tuicool.com/articles/jam2Anv RequireJs已经流行很久了,我们在项目中也打算使用它.它提供了以下功能: 声明不同js文件之间的依赖 可 ...

  2. RequireJS 配置理解

    RequireJS 配置: 1.首先加载RequireJS文件 <script src="//cdn.bootcss.com/require.js/2.1.22/require.js& ...

  3. 转: requirejs中文api (详细)

    RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代码,但其主要目的还是为了代码的模块化.它鼓励在使用脚本时以modul ...

  4. requireJs官方使用教程(转)

    原文地址:http://www.requirejs.cn § 1.使用 § 1.1 加载 JavaScript 文件 RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script ...

  5. Magento开发基础知识之RequireJs

    一.RequireJS概述 RequireJS是一个工具库,主要用于客户端的模块管理.实现异步或动态加载,从而提高代码的性能和可维护性. RequireJS的基本思想是,通过define方法,将代码定 ...

  6. 【RequireJS--API学习笔记】

    原文:http://blog.csdn.net/pigpigpig4587/article/details/23427573 目录 RequireJS 加载javascript文件 定义模块 简单的值 ...

  7. js模块化开发——require.js的用法详细介绍(含jsonp)

    RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签脚本加载步骤.可以用它回事.优化代码,但其主要的目的还是为了代码的模块化.它鼓励在使用脚本以moudle ...

  8. web前端知识总结

    前言: 一直想着整理一下关于前端的知识体系和资料,工作忙了些,挤挤总会有的,资料很多,就看你能不能耐下心坚持去学了,要多学多敲多想,祝你进步~ 学习之前首先要大概了解什么是HTML ,CSS , JS ...

  9. 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs

    [前端神秘的面纱] 对后端开发来说,前端是神秘的, 眼花缭乱的技术,繁多的框架, 如果你还停留在前端等于只用jquery做开发,那么你out了, 本文从Java的角度简述下目前前端流行的一些框架. 水 ...

随机推荐

  1. CentOS配置Tomcat开机启动

    通常我们进行服务器维护的时候需要注意点为,服务器上的容器一般都是开机启动,减少停机后应用还需要一个一个启动的麻烦. 1) 新建tomcat文件 touch /etc/rc.d/init.d/tomca ...

  2. Linux部署Web应用程序超链接下载中文名称文件404问题解决办法

    Web应用程序目录下有帮助文档,是中文名称的Word文件 超链接内容如下: <a href="jsp/plugin/用户手册.doc">用户手册</a> 开 ...

  3. 近5年常考Java面试题及答案整理(三)

    上一篇:近5年常考Java面试题及答案整理(二) 68.Java中如何实现序列化,有什么意义? 答:序列化就是一种用来处理对象流的机制,所谓对象流也就是将对象的内容进行流化.可以对流化后的对象进行读写 ...

  4. python mysql redis mongodb selneium requests二次封装为什么大都是使用类的原因,一点见解

    1.python mysql  redis mongodb selneium requests举得这5个库里面的主要被用户使用的东西全都是面向对象的,包括requests.get函数是里面每次都是实例 ...

  5. [Artoolkit] kpmMatching & Tracking of nftSimple

    1. kpmMatching thread main() --> loadNFTData() --> trackingInitInit() --> In static void *t ...

  6. 更改linux下文件目录权限、拥有者及用户组

    在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念 - 所有者 - 所在组 - 其它组 - 改变用户所在的组 所有者 一般为文件的创建者,谁创 ...

  7. android基础---->service的生命周期

    服务是一个应用程序组件代表应用程序执行一个长时间操作的行为,虽然不与用户交互或供应功能供其它应用程序使用.它和其他的应用对象一样,在他的宿主进程的主线程中运行.今天我们开始android中普通serv ...

  8. Pro ASP.NET MVC –第三章 MVC模式

    在第七章,我们将创建一个更复杂的ASP.NET MVC示例,但在那之前,我们会深入ASP.NET MVC框架的细节:我们希望你能熟悉MVC设计模式,并且考虑为什么这样设计.在本章,我们将讨论下列内容 ...

  9. python分支语句

    一.if else语句 if 条件表达式: else: a = 3 b = 4 if a >= b: print("a >= b") else: print(" ...

  10. Pyramid Analytics宣布无缝集成BI Office和微软Power BI Desktop

    全球领先的企业商业智能(BI)软件提供商Pyramid Analytics与微软联手,凭借完善的分析平台BI Office强化Power BI Desktop的个人生产力功能.新的“Publish t ...