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

requirejs是干啥的啊?

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

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

requirejs咋用啊?

函数一配置一属性

data-main属性

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

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

require.config() 配置

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

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

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

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

deps——加载依赖关系数组

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

define()函数

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

函数"); } return { name:"一个属性",test:function(a){ console.log(a+"你好!"); a.f(); info(); } } });

define函数就受两个参数。

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

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

require()函数

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

输出结果: //大熊你好! //不确定(取决于a模块的f方法) //我是私有函数 //一个属性

实战练习一下

结构

index.html

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> Document