教你5分钟学会用requirejs(必看篇)


Posted in Javascript onJuly 25, 2017

requirejs是干啥的啊?

曾经,我们将一些js组件放到不同的文件,然后通过script标签引入,如果几个组件有依赖,那么要小心了,你必须将被依赖的放到前面,否则的话会出现啥啥啥is undefined或者啥啥啥is not a function之类的错误。比如一个jquery的插件显然是依赖jquery核心库的,所以jquery核心库文件必须先引入。项目小组件少依赖简单还好,要是项目大组件多依赖复杂就糟糕了。咋办?用requirejs啊?!

只要按照requirejs规范写,他会从一个根开始检查依赖,根据这些依赖关系自动的帮助我们插入script标签,很棒,对不对?这样依赖我们不就再也不用纠结哪个标签应该放在前,哪个该放在后了吗????

requirejs咋用啊?

请记住使用requirejs的口诀,两函数一配置一属性

data-main属性

requirejs需要一个根来作为搜索依赖的开始,data-main用来指定这个根。

<script src="scripts/require.js" data-main="scripts/app.js"></script>

这里就指定了根是app.js,只有直接或者间接与app.js有依赖关系的模块才会被插入到html中。

require.config() 配置

通过这个函数可以对requirejs进行灵活的配置,其参数为一个配置对象,配置项及含义如下:

baseUrl——用于加载模块的根路径。

paths——用于映射不存在根路径下面的模块路径。

shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义,但是你还是想通过RequireJS来使用它,那么你就需要在配置中把它定义为一个shim。

deps——加载依赖关系数组

require.config({
  //默认情况下从这个文件开始拉去取资源
 baseUrl:'scripts/app',
  //如果你的依赖模块以pb头,会从scripts/pb加载模块。
 paths:{
  pb:'../pb'
 },
 // load backbone as a shim,所谓就是将没有采用requirejs方式定义
 //模块的东西转变为requirejs模块
 shim:{
  'backbone':{
   deps:['underscore'],
   exports:'Backbone'
  }
 }
});

define()函数

该函数用于定义模块。形式如下。

//logger.js
 define(["a"], function(a) {
 'use strict';
 function info() {
  console.log("我是私有函数");
 }
 return {
  name:"一个属性",
  test:function(a){
   console.log(a+"你好!");
   a.f();
   info();
  }
 }
});

define函数就受两个参数。

* 第一个是一个字符串数组,表示你定义的模块依赖的模块,这里依赖模块a;

* 第二个参数是一个函数,参数是注入前面依赖的模块,顺序同第一参数顺序。在函数中可做逻辑处理,通过return一个对象暴露模块的属性和方法,不在return中的可以认为是私有方法和私有属性。

require()函数

该函数用于调用定义好的模块,可以是用define函数定义的,也可以是一个shim。形式如下:

//app.js
require(['logger'], function (logger) {
logger.test("大熊");
console.log(logger.name);
});
//输出结果:
//大熊你好!
//不确定(取决于a模块的f方法)
//我是私有函数
//一个属性

实战练习一下

结构

教你5分钟学会用requirejs(必看篇)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
  <script src="js/require.js" data-main="app.js"></script> 
</body>
</html>

app.js

require.config({
//By default load any module IDs from js/
baseUrl: 'js',
//except, if the module ID starts with "pb"
 paths: {
  pb: '../pb'
},
shim: {
  'world': {
    deps:['animalWorld'],
    // use the global 'Backbone' as the module name.
    exports: 'world'
  }
}
});
require(['cat','dog','world'], function (cat,dog,world) {
world.world();
cat.say();
dog.say(); 
});

animal.js

define([], function() {
 'use strict';
 function _showName(name){
console.log(name);
 }
 return {
say(words){
 console.log(words);
},
showName(name){ //练习私有方法
 _showName(name);
}
 }
});

cat.js

define([
 'pb/animal'
], function(animal) {
 'use strict';
 return {
say(){
 animal.say("喵喵");
 animal.showName("猫");
}
 }
});

dog.js

define([
 'pb/animal'
], function(animal) {
 'use strict';
 return {
say(){
 animal.say("汪汪");
 animal.showName("狗");
}
 }
});

animalWorld.js

window.animal = function() {
 console.log("这里是动物世界!");
}
world.js

define([], function() {
 'use strict';
 return {
world(){
 animal();
}
 }
});

输出结果

输出结果
教你5分钟学会用requirejs(必看篇)

解释一下

需要解释吗?自行体会吧!这里再贴个加载顺序的图,你想想看是不是应该是这样的。

教你5分钟学会用requirejs(必看篇)

这里的标签顺序正好是我想象中的反过来。为什么会这样呢?我猜测是,加载顺序依然时被依赖的要先加载的,我们知道只要指定了script的src属性就会加载对应的js,跟标签顺序无必然关系。这里不知道是不是对的,谁知道请赐教。

小结一下

requirejs的基本用法比较简单,但是功能强大,让我们能够非常轻松的处理各种依赖问题。有人云requirejs是遵循的一个叫AMD的规范,也有遵循CMD规范的seajs模块管理库,还有用于服务端的commonjs模块管理工具,现在es6已经原生支持模块管理了,关于这些内容,大熊不做介绍了,为啥呢?因为大熊也不知道啊。要是你觉得大熊写的东西对你有所帮助,不妨点个关注或者推荐!

以上这篇教你5分钟学会用requirejs(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
Dojo 学习要点
Sep 03 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 #Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 #Javascript
基于JavaScript实现百度搜索框效果
Jun 28 #Javascript
深入理解基于vue-cli的vuex配置
Jul 24 #Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 #Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 #Javascript
关于vue-resource报错450的解决方案
Jul 24 #Javascript
You might like
请php正则走开
2008/03/15 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
JsRender实用入门教程
2014/10/31 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
int在python中的含义以及用法
2019/06/27 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
标准毕业生自荐信范文
2013/11/04 职场文书
中学生校园广播稿
2014/01/16 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python