require.js
1、require.js 功能是加载模块,属于AMD规范的实现。之前传统的方式是如下所示
<script>
......
</script>
或者
<script src="....."></script>
当页面最初被加载时,如果script标签放到body之前,当遇到script标签时,会优先加载js,因此导致页面渲染会被暂停,用户体验不好。采用异步加载资源,提高加载速度和代码质量
2、require定义三个变量:define,require,requirejs require===requirejs
define([新定义的模块名],[dependencies],factory) 定义一个模块,如果提供了模块名,则模块名必须是绝对的,不允许相对
模块名是用正斜杠分割的有意义单词的字符串
单词须为驼峰形式,或者".",".."
模块名不允许文件扩展名的形式,如“.js”
模块名可以为 "相对的" 或 "顶级的"。如果首字符为“.”或“..”则为相对的模块名
顶级的模块名从根命名空间的概念模块解析
相对的模块名从 "require" 书写和调用的模块解析
require(模块名) 加载依赖模块,加载完成后执行回调函数,与定义的模块名一致。
模块,不同于传统的脚本文件,它良好地定义了一个作用域来避免全剧名称空间污染。它可以显示地列出其依赖关系,并以函数参数形式将这些依赖进行注入,则无需引用全局变量
3、define('js/a',function(){...})
require(['js/a']); //加载本地js
如果是加载服务器或者CDN上的js,地址会比较长,可以先用require.config配置一下模块加载位置,也就是给模块名起个短点的名字,方便引用
require.config({ paths:{ "jquery":["http://libs.baidu.com/jquery/2.0.3/jquery","js/jquery"] } }) require(['jquery'],function(){ ... })
paths可以配置别名,还可以配多个路径,如果前面的路径没有加载成功,可以选择后面的加载路径
4、require.config配置,为了避免让每个页面都写入配置,可以使用data-main属性
<script data-main="js/main" src="js/require.js"></script>
加载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,相当于默认配置了:
require.config({ baseUrl:'js' })
通过require
加载的模块一般都需要符合AMD规范即使用define
来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim
require.config({ shim: { 'touch': { deps: ['zepto_core'], exports: '$' }, 'swipe': { deps: ['zepto_core'], exports: 'Swipe' }, 'delay': { deps: ['zepto'], } } })