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

requirejs是干啥的啊？

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

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

requirejs咋用啊？

rush:xhtml;"> 请记住使用requirejs的口诀，两函数一配置一属性

data-main属性

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

rush:xhtml;">

app.js

rush: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

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

cat.js

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

dog.js

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

animalWorld.js

rush: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(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。