教你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 相关文章推荐
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
js实现京东轮播图效果
Jun 30 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 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把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP查询分页的实现代码
2017/06/09 PHP
jQuery中detach()方法用法实例
2014/12/25 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
Python实现处理管道的方法
2015/06/04 Python
python采集百度百科的方法
2015/06/05 Python
python web框架学习笔记
2016/05/03 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
python使用mysql的两种使用方式
2018/03/07 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python os用法总结
2018/06/08 Python
django缓存配置的几种方法详解
2018/07/16 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
应聘自荐书
2013/10/08 职场文书
结婚邀请函范文
2014/01/14 职场文书
五一手机促销方案
2014/03/08 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
高中运动会广播稿
2015/08/19 职场文书
开网店计划分析
2019/07/30 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python