require.js的基本用法

最新推荐文章于 2024-08-04 03:29:52 发布

西风XF

最新推荐文章于 2024-08-04 03:29:52 发布

阅读量446

点赞数

分类专栏： js 文章标签： js require.js 模块化

本文链接：https://blog.csdn.net/qq_36242361/article/details/74182298

版权

js 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

推荐阮一峰老师写的require.js的用法：http://www.ruanyifeng.com/blog/2012/11/require_js.html

我学习require.js是借鉴的阮一峰老师的JavaScript模块化编程（三）：require.js的用法；这篇文章也是根据阮一峰老师的教程写出的demo。

require.js的使用可以避免alert()造成的js阻塞，可以优化js的加载。

1、避免alert()造成的js阻塞：

<!--index.html    原始写法必须alert事件执行完以后才能加载body部分的内容-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			alert(1)
		</script>
	</head>
	<body>
		<h1>body</h1>
	</body>
</html>

<!--用require加载js,避免alert事件阻塞页面加载问题-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/require.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			require.config({
				paths:{
					"al":"js/al"
				}
			})
			require(['al'],function(al){
				alert('require');
			});
		</script>
	</head>
	<body>
		<span class="oSpan">body</span>
	</body>
</html>

2、优化js加载：

<!--避免下面这种加载js的情况-->
<script src="a.js" type="text/javascript" charset="utf-8"></script>
<script src="b.js" type="text/javascript" charset="utf-8"></script>
<script src="c.js" type="text/javascript" charset="utf-8"></script>
<script src="d.js" type="text/javascript" charset="utf-8"></script>
<script src="e.js" type="text/javascript" charset="utf-8"></script>

改成这种写法

require(['a','b','c','d','e'],function(a,b,c,d,e){
	//some code here
});

--------------------------------------------------------------分割线-----------------------------------------------------------------------------

写一下require.js简单的使用：

加载require.js文件造成网页失去响应的两个解决方法：
1、把js文件放在网页底部加载；
2、<script src="js/require.js" defer async="true" type="text/javascript" charset="utf-8" ></script>
注：async="true" 为异步加载，IE不支持async，只支持defer

<!--index.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--data-main   指定网页的主模块，入口js文件-->
		<script data-main="js/main" src="js/require.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>body</h1>
	</body>
</html>

//add.js
//define定义模块
define(function(){
    function add(x,y){
      return x+y;
    }

    return {
    	add:add
    }
})

//sum.js
define(function(){
	function sum(x,y){
		return x*y;
	};
	return {
		sum:sum
	}
})

//red.js
define(function(){
	function red(x,y){
		return x-y;
	};
	return {
		red:red
	}
})

//main.js
//require.config()方法，我们可以对模块的加载行为进行自定义。
//require.config()就写在主模块（main.js）的头部。参数就是一个对象
require.config({
	//require 第一个参数为数组，载入每一个依赖的js文件，第二个参数为callback回调函数
	//paths为指定js路径，且.js可省去。(定义各个模块的加载路径)
	paths:{
		"add":"add",
		"sum":"sum",
		"red":"red"
	}
})

require(['add','sum','red'],function(add,sum,red){
	alert(add.add(1,2));//3
	alert(sum.sum(1,2));//2
	alert(red.red(2,1));//1
});

更多内容，请参考阮一峰老师写的require.js的用法： http://www.ruanyifeng.com/blog/2012/11/require_js.html