require.js初识

1111

a).首先在页面引入require.js，新建一个main.js的配置文件在里面写入要引入的文件路径如下，通过 require.config({内部和对象相似})

第一种：

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

require.config({
	paths:{
		'jquery':'jsFile/jquery-1.9.1.min'
	}
});

在页面引入require.js和main.js文件 data-main=''为专门引入自己的配置文件

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

引入成功后即可在页面调用自己想要使用的js文件,通过require([引入文件的数组],function(引入文件对应的名字){}) 注意：必须为数组，并且使用时名字为一一对应关系。

<button ondblclick="test()">测试require</button>
		
		<script type="text/javascript">
				function test(){
					require(['jquery'],function($){
						alert('这是requireJS的第一种引用');
					})
				}
		</script>

这种引入缺点是页面在加载时不能自己触发引入想要的文件，起初只有require.js和main.js,需要通过函数去触发。

b).引入和配置都一样，只是在页面使用时有点区别，在页面加载时就会引入自己想要的js文件。只是引用是在配置页

第二种：

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

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

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

缺点：这种方法引用在配置main.js中不利于版本的维护,不建议用

c).引入不通过data-main入口引入，而是单个引入，并且main.js中的路径配置必须为和引用页面同级的文件夹开始填写路径，也是页面加载是就引用模板

第三种：

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

require.config({
	paths:{
		'jquery':'js/jsFile/jquery.min'
	}
});

页面引用

<!--第三种引入-->
	    <script src="js/require.js"></script>
	    <script src="js/main.js"></script>

/*第三种引用方式*/
		require(['jquery'],function($,c,b,m){
			$('body').css({'background':'red'});
			alert("第三种引用不使用入口data-main,而是单个引入")
		});

推荐使用

2222

require.js的重要引用

2.1） baseUrl:设置基础的默认路径

require.config({
	baseUrl:'js/',//baseUrl  可用于设置集中放置js文件的默认路径
	paths:{
		'jquery':'jsFile/jquery.min',
		'css':'noVabJS/css.min'   //文件后面不可加.js
	}
         }	
	  }
})

2.2）shim处理多个模块的依赖关系

require.config({
	baseUrl:'js/',//baseUrl  可用于设置集中放置js文件的默认路径
	paths:{
		'jquery':'jsFile/jquery.min',
		'bootstrap':'noVabJS/bootstrap.min',
		'css':'noVabJS/css.min'   //文件后面不可加.js
	},shim:{//铺垫文件
		'bootstrap':{
			'deps':['jquery']   //deps 设置依赖文件 
		},
			}
			
		}	
	}
})

deps:设置依赖文件格式 deps:[]

2.3）处理引入的css文件用在 deps中格式 'deps':['jquery','css!../css/bootstrap.min.css']

deps 设置依赖文件 css!../css/bootstrap.min.css

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

require.config({
	baseUrl:'js/',//baseUrl  可用于设置集中放置js文件的默认路径
	paths:{
		'jquery':'jsFile/jquery.min',
		'bootstrap':'noVabJS/bootstrap.min',
		'css':'noVabJS/css.min'   //文件后面不可加.js
	},shim:{//铺垫文件
		'bootstrap':{
			'deps':['jquery','css!../css/bootstrap.min.css']   //deps 设置依赖文件 css!../css/bootstrap.min.css  
		},
		}	
	}
})

其中css.min.js为css引入的必要条件

<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>

require(['jquery','css','bootstrap'],function($,c,b){
			$('body').css({'background':'red'});
			alert("第三种引用不使用入口data-main,而是单个引入")
		});

2.4）对于非标准模块的处理

mine.js为自定义js内容为：

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

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

此时main.js中的设置为

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

mine.js的路径配置一样

exports:用于引用单个函数对象

init:function(){return(要引用的函数对象)}

格式：

init:function(){   
		 return{
			 success:success,	
			 failed:failed
			 }
			}

页面引用为：

<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 onclick="test()">测试require</button>
		<button onclick="failed()">测试非标准模式</button>  
		<script type="text/javascript">	
		/*第三种引用方式*/
		require(['jquery','css','bootstrap','mine'],function($,c,b，m){
			$('body').css({'background':'red'});
			success();//非标准模式
		});
		
		</script>

猜你喜欢