index.html
<body class="requireBODY" id="body"><div id="vuebox">{{ a }}<script src="require.js" data-main='main.js'></script>
//引入requirejs，配置data-mian属性，作为程序主入口
main.js
require.config({
paths: {
"jquery": "../../content/jquery-2.1.1.min",
//"moudleA": "a",//（1-1）
"moudleB": "b",
"moudleC":"c",
"vue":"vue.min"
},
shim: {
'jquery.window': ['jquery'],//加载非AMD规范的模块定义依赖模块,jquery全屏幕滚动插件
'vue':{'exports':'vue'},
//'a':{deps:[], exports:'fna'},//exports定义导出全局函数(1-2)
}
});
//加载非AMD规范的模块
//config(1-1) paths: {"moudleA": "a"}
require(['moudleA'],function(Amodule){
//Amodule()//Amodule undefined is not a function 该模块未遵循AMD规范，所以并没有回传参数模块；
fna()//但是a.js脚本已经引入，脚本内的 fna 函数已经引入全局，所以可以直接调用 fna 函数
})
//config(1-2) shim{'a':{deps:[], exports:'fna'}}//exports定义导出全局函数
require(["a"],function(Amodule){
Amodule()//shim中定义的模块,将全局变量回传到回调函数中;实际这个变量引入后就在全局,与上种方法的区别是该方法导入模块的全局变量值 fna 作为参数传入了该回调函数
})
require(['moudleB'],function(Bmodule){
Bmodule.moudleBfn()
alert(Bmodule.moudleBmath)
Bmodule.moudleBrequireC()
})
require(['jquery','jquery.window'],function(){
$(document).ready(function(){
var $windows = $('.window');
$windows.windows({
snapping: true,
snapSpeed: 500,
snapInterval: 1100,
onScroll: function(s){},
onSnapComplete: function($el){},
onWindowEnter: function($el){}
});
});
})
require(['vue'],function(Vue){
var vue = new Vue({
'el':'#vuebox',
data:{
a:'aaaaaaaa'
}
})
})
a.js
function fna(){
alert('moduleA')
}
b.js(两种定义模块方法)
b-1：
define(["require","exports","module",'jquery','moudleC'],function(e,t,m,moduleJQ,moduleC){
var b1 = function (){
alert($('body').attr('class'))
}
var b2 = 1000;
var requireC = e('moudleC').c//=moduleC.c ：导入c模块，引用c模块的方法
t.moudleBfn = b1;//定义导出模块，也可以直接return
t.moudleBmath = b2;
t.moudleBrequireC = requireC;
// return {
// "moudleBfn":b1,
// "moudleBmath":b2,
// "moudleBrequireC":requireC
// };
})
b-2
define(function(require,exports,module){
//这种方式并不像seajs一样按需加载，实际上也是前置加载
var $ = require('jquery')
var b1 = function (){ alert($('body').attr('class')) }
var b2 = 1000; //return;
//在引用c模块前断点发现c模块还是引入了，因为RequireJS 内部通过 Function.prototype.toString() ，然后使用正则匹配所有的require 方法，将其转化为 define(['./mod1',./mod2']function(mod1,mod2);
//这也就是为什么这种方式定义模块参数名只能是require，从而使用打包工具压缩代码时出现问题。
var requireC = require('moudleC').c //导入c模块，引用c模块的方法
exports.moudleBfn = b1;//定义导出模块，也可以直接return
exports.moudleBmath = b2;
exports.moudleBrequireC = requireC;
})
c.js
define(function(){
return {
c:function(){
return alert('moduleC')
}
};
})