requireJS基础使用

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')
　　　　}
　　};
})

posted on 2017-06-19 14:08 前端小透明阅读(284) 评论(0) 收藏举报