requireJS的使用

最新推荐文章于 2021-06-02 20:07:11 发布

memedadexixaofeifei

最新推荐文章于 2021-06-02 20:07:11 发布

阅读量270

点赞数

分类专栏： requir.js 文章标签： requireJS

本文链接：https://blog.csdn.net/memedadexixaofeifei/article/details/79613722

版权

requir.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

main.js配置

/*配置说明*/
/*基准路径*/

/*require.config({
	paths:{
		'jquery':'js/jsFile/jquery.min'
	}
});*/
	/*第二种引入方式*/

/*require(['jquery'],function($){  //注意，这里的函数可加可不加对应的名字 
		$('body').css({"backgroundColor":"red"});
		alert("这是第二种引入，但是这种引入不利于版本的维护")
})
*/	

/*另外一种配置的基本路径非常重要*/

require.config({
	baseUrl:'js/',//baseUrl  可用于设置集中放置js文件的默认路径
	paths:{
		'jquery':'jsFile/jquery.min',
		'bootstrap':'noVabJS/bootstrap.min',
		'mine':'jsFile/mine',
		'css':'noVabJS/css.min'   //文件后面不可加.js
	},shim:{//铺垫文件
		'bootstrap':{
			'deps':['jquery','css!../css/bootstrap.min.css']   //deps 设置依赖文件 css!../css/bootstrap.min.css  
		},			
	'mine':{
			//exports 用于引用单个方法
			exports:'success',  
			
			init:function(){   //init:function(){return{要引用的函数}}
			 return{
			 	 success:success,	
			     failed:failed
			 }
			}
			
		}	
	
	}
})

index.html的编写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--第一种和第二种-->
		<!--<script src="js/require.js" data-main='js/main.js'></script>-->
		
		<!--第三种引入-->
	    <script src="js/require.js"></script>
		<script src="js/main.js"></script>
	</head>
	<body>
		<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
		<span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
		<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
		
		<button οnclick="test()">测试require</button>
		<button οnclick="failed()">测试非标准模式</button>  
		<script type="text/javascript">
			/*第一种引入方式*/
		/*		function test(){
					require(['jquery'],function($){
						alert('这是requireJS的第一种引用');
					})
				}*/
				
		/*第三种引用方式*/
		require(['jquery','css','bootstrap','mine'],function($,c,b,m){
			$('body').css({'background':'red'});
			success();//非标准模式
		});
		
		</script>
	</body>
</html>

非标准js文件

mine.js

function success(){
	$("body").css({'background':'gold'});
	alert("success");
}

function failed(){
	$('body').css({'background':'red'});
	alert("失败了");
}