美文网首页
关于require.js的简单demo

关于require.js的简单demo

作者: 梵仇不是大侠 | 来源:发表于2018-11-01 09:09 被阅读0次

require.js 的中文官网 http://www.requirejs.cn/home.html

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。

requirejs能带来什么好处?

随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。简单粗暴的来说:“模块化管理js,防js阻塞!”(可能是说的不对,大概这意思,原谅菜鸟的不严谨 sorry 不要在意太多细节)

下面展示require.js用法demo  各别api参数不详细 请参考官网。


demo 目录结构:

目录结构
index.htrml文件 (第一步)

 这里首先先引入了require.js 这个你可以去官网下载,加载requirejs脚本的script标签加入了data-main属性,这个属性指定的js将在加载完reuqire.js后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径,是什么意思呢?如上面的data-main="js/main"设定后,我们在使用require(['jquery'])后(不配置jquery的paths),require会自动加载js/jquery.js这个文件,而不是jquery.js,相当于默认配置了,这里我写的是config,js


config.js配置文件(第二步)

config.js 配置文件 是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字,first second third jQuery 这都是名字,名字后面就是文件路径了。这样在require时只需要写["first"]  ['second]   ["third"]  ["jQuery"]  就可以加载该js  (请大家尽量规范命名,这是个好习惯,我是个反面教材);

shim干啥的???

  通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim,shim解释起来也比较难理解,shim直接翻译为"垫",其实也是有这层意思的,目前我主要用在两个地方。 非AMD模块输出,将非标准的AMD模块"垫"成可用的模块,例如:在老版本的jquery中,是没有继承AMD规范的,所以不能直接require["jquery"],这时候就需要shim,比如我要是用underscore类库,但是他并没有实现AMD规范,那我们可以这样配置

这样配置后,我们就可以在其他模块中引用underscore模块:


a.js  b.js c.js 分别是我们的其他demo js

a.js b.js c.js

这三个 js 里面分别写了一些方法,define 从名字就可以看出这个api是用来定义一个模块; require ()加载依赖模块,并执行加载完后的回调函数.

相关文章

网友评论

      本文标题:关于require.js的简单demo

      本文链接:https://www.haomeiwen.com/subject/xpiatqtx.html