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 ()加载依赖模块,并执行加载完后的回调函数.
网友评论