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语言本身谈项目实战
Dec 27 Javascript
通过修改referer下载文件的方法
May 11 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
关于react中组件通信的几种方式详解
Dec 10 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
javascript单张多张图无缝滚动实例代码
May 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
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP异常处理Exception类
2015/12/11 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
js 页面输出值
2008/11/30 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python 2.7.14安装图文教程
2018/04/08 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python搜索包的路径的实现方法
2019/07/19 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
护理不良事件检讨书
2014/02/06 职场文书
企业授权委托书范本
2014/09/22 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
见习报告的格式
2014/10/31 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
Python if else条件语句形式详解
2022/03/24 Python