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'],
            }
        }
})

 

posted @ 2017-10-19 15:50  巅峰之旅  阅读(112)  评论(0编辑  收藏  举报