教你5分钟学会用requirejs(必看篇)
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方法）
//我是私有函数
//一个属性
实战练习一下
结构
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();
}
}
});
输出结果
输出结果
解释一下
需要解释吗？自行体会吧！这里再贴个加载顺序的图，你想想看是不是应该是这样的。
这里的标签顺序正好是我想象中的反过来。为什么会这样呢？我猜测是，加载顺序依然时被依赖的要先加载的，我们知道只要指定了script的src属性就会加载对应的js，跟标签顺序无必然关系。这里不知道是不是对的，谁知道请赐教。
小结一下
requirejs的基本用法比较简单，但是功能强大，让我们能够非常轻松的处理各种依赖问题。有人云requirejs是遵循的一个叫AMD的规范，也有遵循CMD规范的seajs模块管理库，还有用于服务端的commonjs模块管理工具，现在es6已经原生支持模块管理了，关于这些内容，大熊不做介绍了，为啥呢？因为大熊也不知道啊。要是你觉得大熊写的东西对你有所帮助，不妨点个关注或者推荐！
以上这篇教你5分钟学会用requirejs(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
RequireJS使用注意细节
RequireJS介绍 RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端
-
RequireJs的使用详解
一.为什么使用RequireJS? <script src="a.js"></script> <script src="b.js"></script> <script src="c.js"></script> 上述多个js文件加载的时候,浏览器会停止网页渲染(JS阻塞浏览器渲染),加载文件越多,网页失去响应的时间就会越长:另外各文件的依赖关系很难管理. RequireJs的作
-
关于RequireJS的简单介绍即使用方法
RequireJS介绍 RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用.使用RequireJS加载模块化脚本将提高代码的加载速度和质量. 兼容性 浏览器(browser) 是否兼容 IE 6+ 兼容 ✔ Firefox 2+ 兼容 ✔ Safari 3.2+ 兼容 ✔ Chrome 3+ 兼容 ✔ Opera 10+ 兼容 ✔ 优点 实现js文件的异步加载,避免网页失去响应 管理模块之间的依赖性,便于代码的编写和维护 快速上手 step 1 引入require
-
一篇文章掌握RequireJS常用知识
本文采取循序渐进的方式,从理论到实践,从RequireJS官方API文档中,总结出在使用RequireJS过程中最常用的一些用法,并对文档中不够清晰具体的内容,加以例证和分析,分享给大家供大家参考,具体内容如下 1. 模块化 相信每个前端开发人员在刚开始接触js编程时,都写过类似下面这样风格的代码: <script type="text/javascript"> var a = 1; var b = 2; var c = a * a + b * b; if(c> 1)
-
教你5分钟学会用requirejs(必看篇)
requirejs是干啥的啊? 曾经,我们将一些js组件放到不同的文件,然后通过script标签引入,如果几个组件有依赖,那么要小心了,你必须将被依赖的放到前面,否则的话会出现啥啥啥is undefined或者啥啥啥is not a function之类的错误.比如一个jquery的插件显然是依赖jquery核心库的,所以jquery核心库文件必须先引入.项目小组件少依赖简单还好,要是项目大组件多依赖复杂就糟糕了.咋办?用requirejs啊
-
新手如何快速入门Python(菜鸟必看篇)
学习任何一门语言都是从入门(1年左右),通过不间断练习达到熟练水准(3到5年),少数人最终能精通语言,成为执牛耳者,他们是金字塔的最顶层.虽然万事开头难,但好的开始是成功的一半,今天这篇文章就来谈谈如何开始入门Python.只要方向对了,就不怕路远. 设定目标 当你决定入门 Python 时,需要一个清晰且短期内可实现的目标,比如通过学习找一份初级程序员工作,目标明确后,你需要了解企业对初级程序员有哪些技能要求,下面是我从拉勾网找的一个初级 Python 工程师的任职要求: 1.熟悉 Pytho
-
PowerShell管道入门必看篇(管道例子大全)
PowerShell的一个重中之重的功能就是管道(pipeline),本文从浅入深,一步一步详解管道的使用方法和例子,来看看有没有你所不知道的吧,如果全知道,恭喜你已经很厉害啦--适用于所有PowerShell应用小白与技术老鸟.另外欢迎各位技术大牛来补充讨论学习~ 1. 管道(pipeline)是什么 在Shell中一个重要的基本概念就是管道(pipeline),即在一组命令中,输出的命令结果成为下一个命令的输入参数.管道的概念与真实生活中的生产线比较相似:在不同的生产环节进行连续的再加工,如
-
IO多路复用之select全面总结(必看篇)
1.基本概念 IO多路复用是指内核一旦发现进程指定的一个或者多个IO条件准备读取,它就通知该进程.IO多路复用适用如下场合: (1)当客户处理多个描述字时(一般是交互式输入和网络套接口),必须使用I/O复用. (2)当一个客户同时处理多个套接口时,而这种情况是可能的,但很少出现. (3)如果一个TCP服务器既要处理监听套接口,又要处理已连接套接口,一般也要用到I/O复用. (4)如果一个服务器即要处理TCP,又要处理UDP,一般要使用I/O复用. (5)如果一个服务器要处理多个服务或多个协议,一
-
微信JS SDK接入的几点注意事项(必看篇)
微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口权限. 2.引入JS文件:在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js, 备注:支持使用 AMD/CMD 标准
-
一个牛人给Java初学者的建议(必看篇)
给初学者之一:浅谈Java及应用学java 从不知java为何物到现在一个小小的j2ee项目经理虽说不上此道高手,大概也算有点斤两了吧每次上网,泡bbs逛论坛,没少去java相关的版 面总体感觉初学者多,高手少,精通的更少由于我国高等教育制度教材陈旧,加上java自身发展不过十年左右的时间还有一个很重要的原因就是java这门语 言更适合商业应用所以高校里大部分博士老师们对此语言的了解甚至不比本科生多在这种环境下,很多人对java感到茫然,不知所措,不懂java能做什么即 便知道了java很有用,
-
老生常谈Session和Cookie之间区别与联系(必看篇)
一. 概念理解 你可能有留意到当你浏览网页时,会有一些推送消息,大多数是你最近留意过的同类东西,比如你想买桌子,上淘宝搜了一下,结果连着几天会有各种各样的桌子的链接.这是因为 你浏览某个网页的时候,WEB 服务器会先送一些资料放在你的计算机上,类似于你打的文字,选的一些东西什么的,Cookie 会帮你都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有没有它上次留下的 Cookie 资料,有的话,就会依据 Cookie里的内容来判断使用者,送出特定的网页内容给你. Cookie 的使用
-
js断点调试心得分享(必看篇)
1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下,OK!恭喜你的处女断点打上了,哈哈~~ 2.断点怎么打才合适? 打断点操作很简单,核心的
-
基于Oracle闪回详解(必看篇)
Oracle 9i 开始支持闪回,Oracle10g开始全面支持闪回功能,Oracle11g有所完善,为大家快速的恢复数据,查询历史数据提供了很大的便捷方法. 本文主要对Oracle常用闪回使用做些详细介绍,其中对于不常用的事务和版本闪回,这里就不做介绍 一.Oracle闪回概述 闪回级别 闪回场景 闪回技术 对象依赖 影响数据 数据库 表截断.逻辑错误.其他多表意外事件 闪回DATABASE 闪回日志.undo 是 DROP 删除表 闪回DROP 回收站(recyclebin) 是 表 更新.
-
关于正则表达式基本语法的应用详解(必看篇)
1.正则表达式基本语法 两个特殊的符号'^'和'$'.他们的作用是分别指出一个字符串的开始和结束.例子如下: "^The":表示所有以"The"开始的字符串("There","The cat"等): "of despair$":表示所以以"of despair"结尾的字符串: "^abc$":表示开始和结尾都是"abc"的字符串--呵呵,只有&qu