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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
javascript常用方法总结
May 14 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 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
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python实现从URL地址提取文件名的方法
2015/05/15 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python实现两款计算器功能示例
2017/12/19 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
python获取本机所有IP地址的方法
2018/12/26 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
校园门卫岗位职责
2013/12/09 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
党建工作整改措施
2014/10/28 职场文书
储备店长岗位职责
2015/04/14 职场文书