require的用法js,require.js,教你5分钟学会用requirejs(必看篇)

require的用法js,require.js,教你5分钟学会用requirejs(必看篇)

下面小编教你5分钟学会使用requirejs(必看)。我觉得边肖挺好的。我现在就分享给你,给你一个参考。来和边肖一起看看吧。

requirejs是干啥的啊?

曾经,我们把一些js组件放在不同的文件里,然后通过脚本标签引入。如果几个组件有依赖关系,那么就要小心了。必须把依赖的放在前面,否则会出现什么未定义,什么不是函数之类的错误。比如一个jquery的插件,很明显依赖于jquery核心库,所以必须先引入jquery核心库文件。小型项目组件较少依赖简单性是好的,但如果大型项目组件更多依赖复杂性就不好了。我该怎么办?使用requirejs!

只要是按照requirejs规范写的,他就会从一个根开始检查依赖关系,根据这些依赖关系自动帮我们插入脚本标签。很棒,对吧?所以我们不用担心哪个标签先来哪个标签后来?

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的函数依赖项,也没有初始化函数。假设下划线不是由RequireJS定义的,但是您仍然希望通过RequireJS使用它,那么您需要在配置中将它定义为一个shim。

deps——加载依赖关系数组

require.config({

//默认情况下,从该文件中提取资源。

baseUrl:'脚本/应用程序',

//如果你的依赖模块以pb开头,那么这个模块将从scripts/pb加载。

路径:{

pb:'./pb '

},

//将backbone作为shim加载,这意味着它不会被requirejs定义。

//模块的东西转换成requirejs模块

垫片:{

主干':{

deps:['下划线'],

出口:“主干”

}

}

});

Define()函数

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

//logger.js

定义(['a'],函数(a) {

使用严格的';

函数信息(){

Console.log('我是私有函数');

}

返回{

名称:“一个属性”,

测试:功能(a){

Console.log(一声“你好!”);

a . f();

info();

}

}

});

define函数有两个参数。

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

*第二个参数是一个函数,该参数按照与第一个参数相同的顺序注入到前面的依赖模块中。逻辑处理可以在函数中完成。通过返回对象,模块的属性和方法被公开。那些不求回报的,可以看作是私有方法,私有属性。

require()函数

该函数用于调用已定义的模块,该模块可以由define函数或shim定义。其形式如下:

//app.js

require(['logger'],function (logger) {

Logger.test('大熊');

console . log(logger . name);

});

//输出结果:

//你好,小熊!

//不确定(取决于模块A的F方法)

//我是一个私有函数

//一个属性

实战练习一下

结构

index.html

!文档类型html

html lang='en '

meta charset='UTF-8 '

meta name=' viewport ' content=' width=device-width,initial-scale=1.0 '

meta http-equiv=' X-UA-Compatible ' content=' ie=edge '

标题文档/标题

/头

身体

脚本src=' js/require . js ' data-main=' app . js '/脚本

/body

/html

app.js

require.config({

//默认情况下,从js/加载任何模块id

baseUrl: 'js ',

//除非模块ID以“pb”开头

路径:{

pb:'./pb '

},

垫片:{

世界':{

deps:['animalWorld'],

//使用全局“主干”作为模块名称。

出口:“世界”

}

}

});

require(['猫','狗','世界'],function(猫,狗,世界){

world . world();

cat . say();

dog . say();

});

动物. js

定义([],函数(){

使用严格的';

function _showName(name){

console.log(名称);

}

返回{

说(话){

console.log(单词);

},

ShowName(name){ //练习私有方法

_showName(名称);

}

}

});

cat.js

定义([

“铅/动物”

],功能(动物){

使用严格的';

返回{

say(){

animal . say(‘喵喵’);

animal . showname(' cat ');

}

}

});

dog.js

定义([

“铅/动物”

],功能(动物){

使用严格的';

返回{

say(){

Animal.say('汪汪');

animal . showname(' dog ');

}

}

});

动物世界. js

window.animal=function() {

Console.log('这是动物世界!');

}

world.js

定义([],函数(){

使用严格的';

返回{

世界(){

动物();

}

}

});

输出结果

输出结果

解释

你需要解释吗?自己体会吧!在这里贴一个加载顺序的图,好好想想。

这里的标签顺序和我想象的正好相反。为什么会这样?我的猜测是,如果加载顺序仍然是依赖的,就需要先加载。我们知道,只要指定了脚本的src属性,就会加载相应的js,与标签顺序无关。我不知道是不是在这里。谁知道呢?请开导我。

小结一下

requirejs的基本用法比较简单,但是功能强大,让我们可以轻松应对各种依赖问题。cloud requirejs中有人遵循一个叫AMD的规范,也有遵循CMD规范的seajs模块管理库,还有commonjs的服务器模块管理工具。现在es6已经原生支持模块管理,大熊就不介绍这些内容了。为什么?因为大熊也不知道。如果你觉得大熊写的东西对你有帮助,不妨关注或者推荐一下!

上面这篇教你5分钟学会使用requirejs的文章,就是边肖分享的全部内容。希望能给你一个参考,多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: