JavaScript模块化思想requireJS的使用
1. 使用require.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后缀。
1 // main.js
2 console.log("main.js被执行");
1 require(['firstModule','secondModule','thirdModule'],function(firstModule,secondModule,thirdModule){
2 //模块加载完成后执行的回调函数
3 });

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()函数定义)
1 shim:{
2 "jquery.scroll":{
3 deps:['jquery'],
4 exports:'jQuery.fn.scroll'
5 }
6 }
JavaScript模块化思想requireJS的使用的更多相关文章
- JavaScript模块化思想之入门篇
在写正文之前先写一点废话,从我大三下学期正式接触前端到现在,已经六个月了.自己从HTML,CSS,简单的JS验证开始,一点点开始走入前端的世界.越发的感觉前端这一领域散发着无穷的魅力,也许这和我真心喜 ...
- Javascript 模块化编程 --RequireJs
什么是模块化 模块就是实现特定功能的一组方法,常见的几种js写法 原始写法 function A() { } function B() { } 上面函数A()和B()组成一个模块,使用的时候直接调用就 ...
- JavaScript模块化思想
1. 首先,我们需要明白为什么要用模块化? 功能都是为了解决需求的.模块化可以带来的优点有以下几点: (1)可维护性.举个例子,如果我们把未使用模块化的代码比作油和水混合在了一起,模块化之后的代码就好 ...
- JavaScript模块化思想之CommonJS、AMD、CMD、UMD
前一篇文章了解了什么是模块,这一篇就简单介绍一下如何定义并加载一个模块. 我所了解的三种模块加载方式分别是CommonJS.AMD和CMD 网上关于这三种模块加载方式讲解的文章很多,我就简单的做个介绍 ...
- JavaScript 模块化简述
JavaScript 模块化简述 前言 关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以 ...
- JavaScript 模块化简析
关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以及 RequireJS.SeaJS 等陌 ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- JavaScript模块化编程之AMD - requireJS基础使用
JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...
- javascript模块化编程思想、实现与规范
随着BS架构的发展,网站逐渐变成了互联网应用程序,嵌入网络的JavaScript代码越来越庞大,越来越复杂(业务逻辑处理或用户交互很多写在前端).网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...
随机推荐
- BZOJ 1188: [HNOI2007]分裂游戏(multi-nim)
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1386 Solved: 840[Submit][Status][Discuss] Descripti ...
- Python相关机器学习‘武器库’
开始学习Python,之后渐渐成为我学习工作中的第一辅助脚本语言,虽然开发语言是Java,但平时的很多文本数据处理任务都交给了Python.这些年来,接触和使用了很多Python工具包,特别是在文本处 ...
- 【机器学习基本理论】详解最大后验概率估计(MAP)的理解
[机器学习基本理论]详解最大后验概率估计(MAP)的理解 https://blog.csdn.net/weixin_42137700/article/details/81628065 最大似然估计(M ...
- Android为TV端助力 MediaPlayer的一些使用方法简历
这里提供一些MediaPlayer的简单方法,方便以后熟练的使用它! 1)如何获得MediaPlayer实例: 可以使用直接new的方式: MediaPlayer mp = new MediaPlay ...
- WannaCry勒索比特币蠕虫病毒解决方案
WannaCry ransomware used in widespread attacks all over the world Customer Guidance for WannaCrypt a ...
- 钉钉扫码登录web网站
钉钉扫码登录网站 前言 由于本公司前后台分离,这里主要讲述后台的实现逻辑与过程,前端相关的一略而过.前端我们采用的是把二维码内嵌到我们的网页中. 流程如下: 1.登录钉钉后台创建一个企业应用 2.根 ...
- RHEL 5.7 使用rpm安装XtraBackup问题总结
在Red Hat Enterprise Linux Server release 5.7 (Tikanga)上使用RPM方式安装Percona Xtrabackup 2.4.6时遇到了一些问题,特意总 ...
- SQL Server 提供的各种数据访问接口
在创建SQL Server的链接服务器时,可以看到有如下几种访问接口,其中我们常用的只有1.3.4.6.其中4是安装Oracle客户端才会出现的接口,3.6是由于我电脑上装了2008R2和2012两个 ...
- SQL Server最大内存设为0后的处置办法
故障说明: 远程调整实例内存时疏忽,将实例最大内存调整为了0,因此最大内存变成了128MB的最小值. 解决方式: 1.正常关闭SQL Server服务,如果是集群,需要先关停止集群角色防止故障转移,然 ...
- sql 重复数据查询
具体代码: ); ORDER BY tcount DESC;