requirejs初步了解

最新推荐文章于 2024-08-21 12:15:00 发布

dianbolan

最新推荐文章于 2024-08-21 12:15:00 发布

阅读量327

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/dianbolan/article/details/53462129

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码:

html:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Requirejs</title>
	
</head>
<body>
	<div id="test" style="width:300px;height:300px;background-color:pink;">
	
	</div>
</body>
</html>
<script data-main="js/main" src="js/require.min.js" ></script>

解释:

当使用了requirejs,那么网页上的脚本文件将由requirejs去动态加载所以只需要引入requirejs即可,并创建一个入口(程序),main.js,并通过data-main告诉requirejs入口在哪里.

main.js

require.config({
	baseUrl: "js/lib",
	paths:{
		"jquery" : "jquery-1.12.0.min",
		"application":"application"
	},
	//deps:["application"],
	urlArgs:"v="+new Date().getTime()
}); 

require(['application'],function(app){
	app.sayHello();
});

解释:require.config定义了加载脚本时的一系列参数,baseUrl指定了所有js文件的根目录,paths指定了要被加载的模块的路径和名称(模块名称:文件名称(路径)),urlArgs指定了加载时,请求的参数(这个感觉主要用来防止缓存的),require函数的第一个参数表示要加载的模块数组(里面的元素为模块的名称,要和config中定义的模块名称相对应),回调函数的参数表示加载的模块的返回值如application模块加载后的返回值将赋值个app,回调函数表示模块加载完要执行的动作.(类似初始化什么的).

application.js

define(['jquery'],function ($){
　　var app = new Object();
	app.sayHello = function(){
		alert('Hello World!');
	}
	$("#test").css("background-color","red");
	return app;
});

解释:define函数定义一个模块,第一个参数表示这个模块依赖的模块的数组(里面的元素名字与config对应),回调函数则为模块的功能部分,这个模块可以返回一个对象(也可不返回- -类似jquery)