1. 使用require.js的意义

 
(1)实现JS文件的异步加载,避免网页因为加载JS文件缓慢造成网页未响应
(2)管理模块之间的依赖性,便于代码的编写和维护。页面中只需要引入require.js和main.js,其余的js文件全部通过require.js管理。

 
2. 获取require.js
 

3. 使用require.js

把require.js放入项目的js目录下:

我们需要在html页面中引入require.js:

1 <script src="js/require.js" type="text/javascript" charset="utf-8" defer="defer" async="async"></script>

接下来,在js目录下新建我们的入口js文件,我们把它命名为“main.js”。这个文件就相当于java语言中的main函数,是整个js模块体系的入口,我们在main.js中引用我们需要依赖的js文件。

在刚刚引入require.js的script标签中添加一行一个data-main属性,并赋值为“js/main”。

1 <script src="js/require.js" data-main = "js/main" type="text/javascript" charset="utf-8" defer="defer" async="async"></script>

这个属性的值就是指定main.js文件的路径,可以省略.js后缀。


4. 如何配置main.js文件
完成了准备工作,接下来看我们可以在main.js中可以干什么。
(1)写js
我们可以直接在main.js中编辑javaScript代码:
1 // main.js
2 console.log("main.js被执行");

(2)引入依赖模块(require()函数)
- 加入要引入的依赖模块和main.js在同一层目录,可以直接使用模块文件名。
1 require(['firstModule','secondModule','thirdModule'],function(firstModule,secondModule,thirdModule){
2 //模块加载完成后执行的回调函数
3 });
- 如果我们需要手动配置模块文件路径,使用require.config()方法。
该方法需要写在main.js文件的头部:
1 require.config({  // main.js文件的路径是js/main.js
2 paths:{
3 "firstModule":"lib/firstModule.js" // 路径是js/lib/firstModule.js
4 "secondModule":"lib/secondModule.js" // 路径是js/lib/secondModule.js
5 "thirdModule":"lib/thirdModule.js" // 路径是js/lib/thirdModule.js
6 }
7 });

我们发现这三个依赖的js文件都在js目录下的lib目录下,为了书写简单,我们可以设置“基目录”:

1 require.config({  // main.js文件的路径是js/main.js
2 baseUrl:"js/lib",
3 paths:{
4 "firstModule":"firstModule.js" // 路径是js/lib/firstModule.js
5 "secondModule":"secondModule.js" // 路径是js/lib/secondModule.js
6 "thirdModule":"thirdModule.js" // 路径是js/lib/thirdModule.js
7 }
8 });

我们发现这样写有一个问题,就是依赖几个js模块,就得发送几次js请求,require.js针对这个问题有一个优化工具,可以把多个模块合并在一个文件中,减少js请求。这个等我了解之后再单独说... ...


5. 接下来,我们看一个完整的使用AMD写法实现的模块加载到调用执行的例子:

目录结构如下:

 1 /*
2 * js/lib/dates.js
3 */
4 define(function(){
5 let date = new Date();
6 let outDate = function(){
7 console.log(date.getDate());
8 };
9 return {
10 outDate:outDate
11 };
12 });
13
14
15
16 /*
17 * js/main.js
18 */
19 require(['lib/dates'],function(dates){
20 dates.outDate();
21 });

执行结果:


6. 如何加载没有使用AMD规范的模块(没有使用define()函数定义)

方法:使用require.config()方法的shim属性配置。
以jquery.scroll插件为例演示:
1 shim:{
2 "jquery.scroll":{
3 deps:['jquery'],
4 exports:'jQuery.fn.scroll'
5 }
6 }
- deps : 是一个数组,表明该模块依赖的模块
- exports : 表明模块外部调用该模块时的变量名
 

JavaScript模块化思想requireJS的使用的更多相关文章

  1. JavaScript模块化思想之入门篇

    在写正文之前先写一点废话,从我大三下学期正式接触前端到现在,已经六个月了.自己从HTML,CSS,简单的JS验证开始,一点点开始走入前端的世界.越发的感觉前端这一领域散发着无穷的魅力,也许这和我真心喜 ...

  2. Javascript 模块化编程 --RequireJs

    什么是模块化 模块就是实现特定功能的一组方法,常见的几种js写法 原始写法 function A() { } function B() { } 上面函数A()和B()组成一个模块,使用的时候直接调用就 ...

  3. JavaScript模块化思想

    1. 首先,我们需要明白为什么要用模块化? 功能都是为了解决需求的.模块化可以带来的优点有以下几点: (1)可维护性.举个例子,如果我们把未使用模块化的代码比作油和水混合在了一起,模块化之后的代码就好 ...

  4. JavaScript模块化思想之CommonJS、AMD、CMD、UMD

    前一篇文章了解了什么是模块,这一篇就简单介绍一下如何定义并加载一个模块. 我所了解的三种模块加载方式分别是CommonJS.AMD和CMD 网上关于这三种模块加载方式讲解的文章很多,我就简单的做个介绍 ...

  5. JavaScript 模块化简述

    JavaScript 模块化简述 前言 关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以 ...

  6. JavaScript 模块化简析

    关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以及 RequireJS.SeaJS 等陌 ...

  7. Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  8. JavaScript模块化编程之AMD - requireJS基础使用

    JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...

  9. javascript模块化编程思想、实现与规范

    随着BS架构的发展,网站逐渐变成了互联网应用程序,嵌入网络的JavaScript代码越来越庞大,越来越复杂(业务逻辑处理或用户交互很多写在前端).网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...

随机推荐

  1. BZOJ 1188: [HNOI2007]分裂游戏(multi-nim)

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1386  Solved: 840[Submit][Status][Discuss] Descripti ...

  2. Python相关机器学习‘武器库’

    开始学习Python,之后渐渐成为我学习工作中的第一辅助脚本语言,虽然开发语言是Java,但平时的很多文本数据处理任务都交给了Python.这些年来,接触和使用了很多Python工具包,特别是在文本处 ...

  3. 【机器学习基本理论】详解最大后验概率估计(MAP)的理解

    [机器学习基本理论]详解最大后验概率估计(MAP)的理解 https://blog.csdn.net/weixin_42137700/article/details/81628065 最大似然估计(M ...

  4. Android为TV端助力 MediaPlayer的一些使用方法简历

    这里提供一些MediaPlayer的简单方法,方便以后熟练的使用它! 1)如何获得MediaPlayer实例: 可以使用直接new的方式: MediaPlayer mp = new MediaPlay ...

  5. WannaCry勒索比特币蠕虫病毒解决方案

    WannaCry ransomware used in widespread attacks all over the world Customer Guidance for WannaCrypt a ...

  6. 钉钉扫码登录web网站

    钉钉扫码登录网站 前言  由于本公司前后台分离,这里主要讲述后台的实现逻辑与过程,前端相关的一略而过.前端我们采用的是把二维码内嵌到我们的网页中. 流程如下: 1.登录钉钉后台创建一个企业应用 2.根 ...

  7. RHEL 5.7 使用rpm安装XtraBackup问题总结

    在Red Hat Enterprise Linux Server release 5.7 (Tikanga)上使用RPM方式安装Percona Xtrabackup 2.4.6时遇到了一些问题,特意总 ...

  8. SQL Server 提供的各种数据访问接口

    在创建SQL Server的链接服务器时,可以看到有如下几种访问接口,其中我们常用的只有1.3.4.6.其中4是安装Oracle客户端才会出现的接口,3.6是由于我电脑上装了2008R2和2012两个 ...

  9. SQL Server最大内存设为0后的处置办法

    故障说明: 远程调整实例内存时疏忽,将实例最大内存调整为了0,因此最大内存变成了128MB的最小值. 解决方式: 1.正常关闭SQL Server服务,如果是集群,需要先关停止集群角色防止故障转移,然 ...

  10. sql 重复数据查询

    具体代码: ); ORDER BY tcount DESC;