requireJS基本配置相关

requireJS:

(1)实现js文件的异步加载,避免页面失去响应;

(2)管理模块之间的依赖性,便于代码的编写和维护。

加载:

<script src="js/require.js" ></script>

由于加载的模块较多,可能会造成页面失去响应,故可以将此 script 标签 放到 <body> 的后面

(you could also place the script tag end of the <body> section if you do not want the loading of the require.js script to block rendering)

<script src="js/require.js" defer async="true" ></script>

或者是个该标签加上 async 属性,由于IE只支持 defer,故把该属性也一并加上

(For browsers that support it, you could also add an async attribute to the script tag.)

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

date-main 指定程序的主模块入口,(由于require.js默认文件后缀是js,故main.js可以简写成main)


程序主模块入口文件:main.js

require(['jquery', 'underscore', 'backbone', 'moduleA', 'moduleB', 'moduleC'], function($, _, Backbone, moduleA, moduleB, moduleC) {

//some code do sth

})

第一个参数:数组,程序所依赖的模块

第二个参数:回调函数,当把前面指定的模块都加载完成后,回调函数将被调用,前面所加载的模块讲义

注:此种情况加载成功的前提是,依赖模块与main.js在同一目录下,(涉及require另已配置属性baseUrl)


模块加载自定义:require.confige()

   位置:主模块main.js的顶部

   参数:一个对象{}

对象属性:


/* 逐一指定路径 */

baseUrl: '',//默认值为main.js所在目录

paths:{ //相对baseUrl的路径

    "jquery": "jquery",

    "underscore": "underscore.min",

   "backbone": "backbone.min"

}



/* 改变基目录 baseUrl,模块取相对基目录的路径 */

baseUrl: 'js',//默认值为main.js所在目录

paths:{ 

    //相对baseUrl的路径,路径别名,

//requery()函数的第一个参数中的元素即该属性对象的属性名如:jquery

    "jquery": "libs/jquery",

    "underscore": "libs/underscore.min",

   "backbone": "libs/backbone.min"

}


/* 在另一台主机上 */

paths:{

    "jquery": "https://code.jquery.com/jquery-3.1.1.min.js"

}

此时如果加载多个模块的话,就会发送多次HTTP请求,为了不影响页面的加载速度,可以在模块部署完毕后,借用require.js的优化工具 ———— r.js,将这多个模块合并到一个文件中,以减少HTTP请求数。



shim: { //配置不兼容的模块

    "underscore": {

exports: '_'

    },

    "backbone": {

deps: ['underscore', 'jquery'],

exports: 'Backbone'

    }

}

//exports: 输出变量名,外部模块调用时该模块的名称

//deps: 该模块的依赖模块


requery.js加载的模块必须是 按照AMD规范、用define()函数定义的模块,由于很多库不符合该规范,故requeryJS提供了 shim 配置属性来做到兼容



http://www.ruanyifeng.com/blog/2012/11/require_js.html

http://requirejs.org/docs/api.html

http://www.requirejs.cn/




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值