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 当前日期转化为中文的实现代码
May 13 Javascript
jQuery DOM操作实例
Mar 05 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
js实现微信聊天效果
Aug 09 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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
终于听上了直流胆调频
2021/03/02 无线电
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
基于python实现学生信息管理系统
2019/11/22 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
文员自我评价怎么写
2013/09/19 职场文书
捐款倡议书范文
2014/02/02 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
党风廉正建设责任书
2015/01/29 职场文书
大学运动会通讯稿
2015/07/18 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL