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 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
jQuery filter函数使用方法
May 19 Javascript
jquery获取节点名称
Apr 26 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 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
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
ThinkPHP控制器详解
2015/07/27 PHP
PHP7常量数组用法分析
2016/09/26 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python生成验证码图片代码分享
2016/01/28 Python
python根据url地址下载小文件的实例
2018/12/18 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
智能钱包:Ekster
2019/11/21 全球购物
保险专业自荐信范文
2014/02/20 职场文书
天地会口号
2014/06/17 职场文书
2015年党小组工作总结
2015/05/26 职场文书
礼貌问候语大全
2015/11/10 职场文书
python状态机transitions库详解
2021/06/02 Python
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫