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 12 Javascript
javascript 定义初始化数组函数
Sep 07 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
JavaScript实现数值自动增加动画
Dec 28 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
小程序实现留言板
Nov 02 Javascript
vuex 中插件的编写案例解析
Jun 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
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
简单了解JavaScript异步
2019/05/23 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python查看微信撤回消息代码
2018/06/07 Python
python实现Windows电脑定时关机
2018/06/20 Python
Python之list对应元素求和的方法
2018/06/28 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
拾金不昧表扬信范文
2014/01/11 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
中学清明节活动总结
2014/07/04 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
孝女彩金观后感
2015/06/10 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
自荐信范文
2019/05/20 职场文书
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python