requirejs学习,demo下载学习

阮一峰:require.js的用法

学习过程中的demo下载

关于requirejs有利于js的模块化,自动生成js路径,并且能够解决js的执行的先后,其使用的方法为如下

下载使用

1.首先先下载一个require.js


data-main,require.js使用它来启动脚本加载过程 注意这段代码的执行顺序是先执行require.js,在执行a.js,在执行main.js;

require.config

//main.js
require.config({
paths:{jquery:'jquery-1.7.2'}
})
require(['jquery'],function($){
//do something
})

这里main.js中配置了jquery,前面的是后面路径的require([],function(){})的缩写

例如
require.config({
shim:{
'jquery.fontsize':['jquery']
},
paths:{
jquery:'jquery-1.7.2',
'jquery.fontsize':'fontsize'
}
})
require(['jquery','jquery.fontsize'],function($){
$('#bbb').fontsize();
})
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});

理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。那么,require.js是否能够加载非规范的模块呢? 回答是可以的。 这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。 举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。

shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});

require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。

baseUrl
  require.config({
paths: {
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone": "lib/backbone.min"
}
});
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});

说明:没有baseUrl,这里的地址都是相对于data-main的路径的,

原文地址:https://www.cnblogs.com/heyinwangchuan/p/6284217.html