require.js入门

女爷i 2023-07-20 05:35 4阅读 0赞

官方网站：[https://requirejs.org][https_requirejs.org]  
加载机制：使用head.appendChild()将每一个依赖加载为一个script标签

html页面中引入require.js，使用data-main指定入口加载js

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Document</title>
    	<script type="text/javascript" src="require.js" data-main="hbk"></script>
    </head>
    <body>
    	
    </body>
    </html>

除了使用data-main，也可以自定义baseUrl

requirejs.config({
    	baseUrl:'/js'
    });

hbk.js

requirejs.config({
    	paths : {
    		jquery : 'jquery.min'// 这里设置jquery.min.js的别名，注意后面不需要加.js
    	}
    });
    
    requirejs(['jquery'],function($){
    	$('body').css('background-color','red');
    })

运行我们的html，发现body的背景色已经变成红色。  
模块的定义使用define  
新建mymodule.js

define(['jquery'],function($){
    	// 必须使用return暴露方法给外面
    	return {
    		whoami : function(){
    			$('body').append('<h1>huangbaokang</h1>');
    		}
    	}
    });

并且在入口文件hbk.js中使用我们的模块

requirejs.config({
    	paths : {
    		jquery : 'jquery.min'// 这里设置jquery.min.js的别名，注意后面不需要加.js
    	}
    });
    
    requirejs(['jquery','mymodule'],function($,hbk){
    	//$('body').css('background-color','red');
    	//调用mymodule.js中暴露的方法
    	hbk.whoami();
    })

运行结果：  
![在这里插入图片描述][20200331143033617.png]

## 进阶篇 ##

定义简单对象  
user.js

define({
    	username : 'huangbaokang',
    	age : 30
    });

test.html引用require.js和hbk.js

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Document</title>
    	<script type="text/javascript" src="require.js" ></script>
    	<script type="text/javascript" src="hbk.js"></script>
    </head>
    <body>
    	<h1>hello huangbaokang</h1>
    	<button id="mybtn">获取用户对象并打印</button>
    </body>
    </html>

在hbk.js中监听按钮的点击事件

requirejs.config({
    	baseUrl : './lib',
    	paths : {
    		jquery : 'jquery.min'// 这里设置jquery.min.js的别名，注意后面不需要加.js
    	}
    });
    
    requirejs(['jquery','../api'],function($,api){
    	$("#mybtn").click(function(){
    		api.getUser().then(function(user){
    			console.log(user);
    		});
    	});
    })

加载了api模块，调用api的getUser()方法  
api模块的定义如下

define(['jquery'],function($){
    	return {
    		getUser:function(){
    			var def = $.Deferred();
    			require(['../user'],function(user){
    				def.resolve(user);
    			});
    			return def;
    		}
    	}
    });

getUser方法利用了jquery的Deferred，使实现then语法的调用。  
访问页面，控制台输出了简单对象。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]

配置不支持AMD的库和插件  
如加载不支持AMD的库，Modernizr.js  
加载不支持AMD的框架，bootstrap

shim:{
    	'modernizr':{
    		deps:['jquery'],
    		exports:'Modernizr',
    		init:function($){
    			return $;
    		}
    	}
    }

如

shim:{
    	'modernizr':{
    		exports:'Modernizr'
    	},
    	'bootstrap':['jquery']
    }

其中’bootstrap’:\[‘jquery’\]写法是一种简写，表示依赖jquery

map的配置

map:{
    	'app/api':{
    		'jquery':'./lib/jquery'
    	},
    	'app/api2':{
    		'jquery':'./lib/jquery2'
    	
    }

示例：

requirejs.config({
    	paths:{
    		'jquery':'jquery.min'
    	},
    	map:{
    		'api':{
    			'jquery':'jquery.min'
    		},
    		'api2':{
    			'jquery':'jquery2'
    		}
    	}
    });
    
    requirejs(['api'],function(api){
    	// 当使用api2的时候加载的是jquery2.js
    })

waitSeconds配置  
下载js等待的时间，默认7秒。  
如果设置为0，则禁用等待超时。

urlArgs配置  
下载文件时，在url后面增加额外的query参数  
urlArgs:"\_="+(new Date()).getTime()

示例

requirejs.config({
    	paths:{
    		'jquery':'jquery.min'
    	},
    	map:{
    		'api':{
    			'jquery':'jquery.min'
    		},
    		'api2':{
    			'jquery':'jquery2'
    		}
    	},
    	urlArgs:"_="+(new Date()).getTime()
    });
    
    requirejs(['api2'],function(api){
    	
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 1]

## 跨域问题 ##

test.html

在hbk.js中引入jquery,利用jquery的getJSON方法获取本地的一个data.json文件。这种方法存在跨域问题  
hbk.js

requirejs.config({
    	paths:{
    		'jquery':'jquery.min'
    	}
    });
    
    requirejs(['api'],function(api){
    	// 请求本地的一个json文件,这种方法存在跨域问题
    	$.getJSON('data.json',function(res){
    		console.log(res);
    	});
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 2]  
使用jsonp的方式  
data.js

callData({
    	username:'huangbaokang',
    	age:30
    })

在页面上引人该js，同时在页面上定义callData函数  
test.html

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Document</title>
    	<script type="text/javascript">
    		function callData(data){
    			console.log(data);
    		}
    	</script>
    	<script type="text/javascript" src="data.js"></script>
    	
    </head>
    <body>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 3]

jquery请求jsonp的格式

$.ajax({
    	url:'',
    	dataType:'jsonp',
    	jsonpCallback:'onloaded',
    	success:function(data){
    		console.log(data);
    	}
    })

上面的success函数是jquery封装的，其实在外层全局定义函数也会执行。

function onloaded(user){
    	console.log(user);
    }

requirejs实现jsonp,通过script标签来加载模块

require(['http://www.baidu.com/user'],function(user){
    
    })

请求拿到define定义的模块

define({
    	username:'huangbaokang',
    	age:30
    })

[https_requirejs.org]: https://requirejs.org
[20200331143033617.png]: /images/20230528/d52d1564bf8f4222b758a63815efcd09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]: /images/20230528/ababc62297514d079fbc454cb466318f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 1]: /images/20230528/853fdd3d89a2479abdf04bb18391a6c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 2]: /images/20230528/c2b9d0ca16ae493ebc68550667c44f22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 3]: /images/20230528/454edbc4297f45a7820e37aa41987399.png