requireJs学习笔记

加载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) {})

推荐阅读更多精彩内容

  • requirejs 解决两个问题: 1.实现js文件的异步加载,避免网页失去响应; 2.管理模块之间的依赖性,便于...
    Leisure_blogs阅读 52评论 0 1
  • 为什么要使用模块化? 最主要的目的: 解决命名冲突 依赖管理 其他价值: 提高代码可读性 代码解耦,提高复用性 C...
    yang走向前端阅读 357评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 67,320评论 12 114
  • 概念 优势 防止js加载阻塞页面渲染 使用程序调用方式加载js API define 定义模块 require 加...
    ysy32020阅读 22评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 122,534评论 15 534