requireJS使用指南


Posted in Javascript onApril 27, 2016

项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下。通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requireJS的一些感受。

AMD:一种基于模块的异步加载JavaScript代码的机制,它推荐开发人员将JavaScript代码封装进一个个模块,对全局对象的依赖变成了对其他模块的依赖,无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的JavaScript代码好处很明显,各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。这种非阻塞式的并发式快速加载JavaScript代码,使Web页面上其他不依赖 JavaScript代码的UI元素,如图片、CSS以及其他DOM节点得以先加载完毕,Web页面加载速度更快,用户也得到更好的体验。

1、  下载requieJS

在用requieJS模块化开发之前,我们需要准备一些东西。那肯定就是下载require.js文件咯,哈哈哈,因为是基于它开发嘛。

2、  创建一个HTML文件

创建一个HTML文件后,导入requireJS肯定是使用<script>标签的,这个毫无疑问。然后在这个标签中有个data-main属性,它的作用呢是作为一个出入口,就是说在加载requireJS后,从data-main这个属性进入。

比如下面这样:

<!DOCTYPE html>
  <head>
    <title>require</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  </head>
  <body>
    <!--这是requireJS,data-main是作为入口模块,在这里就是js/main-->
    <script data-main="js/main" src="js/require.js"></script>
  </body>
</html>

当我通过加载js/require.js后,然后去执行js/main的js文件。main它也是个js文件,我们可以将它的.js后缀省略掉,requireJS会将其加上。

3、  data-main

当程序执行<script data-main='js/main' src='js/require.js'></script>后,通过data-main进入main.js,去执行main.js。那main.js里是些什么东东呢?

请看代码:

/*
  require.config执行baseUrl为'js',
  baseUrl指的模块文件的根目录,可以是绝对路径或相对路径
*/
require.config({
  baseUrl: 'js',
  paths: {
    jquery: 'jquery-1.8.2.min'
  }
});
/*
  这里通过require,来引入monkey.js,
  然后通过后面的匿名函数给他们分配参数,如这里的
  monkey-->mk
*/
require(['monkey'],function(mk) {
  mk.init();  
});

从上面代码中,可以看见main.js中包含require.config和require两个模块。

require.config的作用就是配置requireJS的一些参数,然后公共引用。

例如,上面的baseUrl,它的作用就是,以它作为基础路径,在这个路径之下,查找文件。我是将所有.js文件都放在js文件夹下的。所以,在配置这个属性后,以后的文件都是在js这个路径下查找内容了。

如下:

require(['monkey'], function(monkey){
  monkey.init();
});

它在引用monkey时,就是引用的monkey,而不是js/monkey。

paths的作用呢?就是将一些常用的js文件,换成通用的名字。例如jquery-1.8.2.min.js,我们不可能每次调用它时,都写这一啪啦吧,所以为了方便,就将jquery替代jquery-1.8.2.min.js咯,以后我们就可以直接使用jquery了,快捷方便。

好了,require.config基本混了个脸熟,一句话,它的作用就是配置requireJS嘛。

那require呢?

require的作用就是执行。比如这里我只需要monkey.js去执行,所以我就导入了monkey,然后通过mk参数,获得monkey执行后的返回值。如果有返回值,然后我们就可以对mk做相应的处理了。

咦,那monkey里面是个什么呢?

我们看看:

/*
  define的参数为匿名函数,该匿名函数返回一个对象
*/
define(['jquery'],function($){
  var init = function(){
    console.log($.browser);
  };
  return {
    init: init
  };
});

define!它的作用是,定义一个js模块,供其他模块或者require使用。它引用其他js的模块的方法和require差不多,都是将需要的js文件引入,然后参数一一对应。大家需要要注意的是,define里定义的方法或者变量,其他模块是访问不到的,所以,你如果想其他模块也能访问,就将相应的方法抛出去(return)对象或者函数都可以。在这里,我return的是一个对象,提供init供其他模块调用。

Javascript 相关文章推荐
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
JavaScript Split()方法
Dec 18 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 #Javascript
浏览器兼容的JS写法总结
Apr 27 #Javascript
Vue.js基础知识汇总
Apr 27 #Javascript
JS onkeypress兼容性写法详解
Apr 27 #Javascript
使用vue.js开发时一些注意事项
Apr 27 #Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 #Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 #Javascript
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php&amp;java(三)
2006/10/09 PHP
在IIS上安装PHP4.0正式版
2006/10/09 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python SQLite3简介
2018/02/22 Python
python如何让类支持比较运算
2018/03/20 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python def 定义函数,调用函数方式
2020/06/02 Python
全球性的女装店:storets
2019/06/12 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
年会搞笑主持词
2014/03/27 职场文书
妈妈别哭观后感
2015/06/08 职场文书
企业法律事务工作总结
2015/08/11 职场文书