requireJs学习笔记

2023年12月31日 101次阅读 来源: 进击的小铁

加载JavaScript文件

index.html

<script data-main="scripts/main.js" src="scripts/require.js"></script>

RJ（require.js）是一个以相对于baseUrl的地址来加载所有的代码。
RJ使用<script>上的自定义属性data-main来启动脚本加载过程，例如上述的scripts下main.js文件会作为主模块第一个被RJ加载。

配置

main.js

require.config({
    // baseUrl为所有模块查找的根路径。当加载纯.js文件（‘/开头、.js结尾、含有协议’）时不会使用baseUrl。
    // baseUrl不设置时默认为main.js所在路径
    // baseUrl设置时，相对于RJ所在的HTML页面的路径
    baseUrl: 'js/lib',
    // 用于映射那些不直接放置在baseUrl下的模块名
    // 起始位置是相对于baseUrl的，除非以‘/’开头或含有URL协议（如：http）
    paths: {
        app: '../app'
    }
})
// 各模块是异步加载的
require(['module1','module2','module3'], function(m1,m2,m3) {
    // 这个函数在所有依赖模块被加载完成后才调用执行
})

当然，data-main不是必要的。

<script src="scripts/require.js"></script>
<script>
    require.config({
        baseUrl: 'js/lib',
        paths: {
            app: '../app'
        }
    })
    require(['module1','module2','module3'], function(m1,m2,m3) {})
</script>

或者

<sctipt>
    var require = {
        deps: ['module1','module2','module3'],
        callback: function(m1,m2,m3) {}
    }
</script>
<script src="scripts/require.js"></script>

这时候baseurl为引用RJ的HTML页面所在的路径。

shim：为那些没有使用define()来声明依赖关系、设置模块的“浏览器全局变量注入”型脚本做依赖和导出配置。

requirejs.config({
    shim: {
        'backbone': {
            deps: ['underscore','jquery'],
            //Once loaded, use the global 'Backbone' as the module value.
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            // this 被赋值为global对象
            // 依赖模块可以通过参数传进去
            // 返回值作为global.Foo的值
            init: function(bar) {
                return this.Foo.noConflict()
            }
        }
    }
})

存在而不导出任何模块变量的模块们，shim配置可简单的设为依赖数组。

requirejs.config({
    shim: {
        'jquery.colorize': ['jquery'],
        'jquery.scroll': ['jquery'],
        'backbone.layoutmanager': ['backbone']
    }
})

定义模块

简单的值对

define({
    color: 'black',
    sieze: 'unsize'
})

函数是定义

// 自定义模块名会使模块不具备移植性
// 依赖模块可在前面加“./”来引入统一路径下模块
define('myDefineModule', ['module1'], function(m1) {
    // 返回值也可以是个函数
    return {
        color: 'black',
        size: 'unsize'
    }
})

模块的引用

require(['module1','module2','module3'], function(m1,m2,m3) {})
    原文作者：进击的小铁
    原文地址: https://www.jianshu.com/p/220e33f17e2e
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞