require.js的最基础调用学习

最新推荐文章于 2021-06-08 11:06:05 发布

小布丁！

最新推荐文章于 2021-06-08 11:06:05 发布

阅读量317

点赞数

分类专栏：后端程序媛的前端菜鸟学习笔记文章标签： AMD规范 require.js

本文链接：https://blog.csdn.net/xiaobudingya/article/details/103087311

版权

这篇笔记详细介绍了require.js的基础使用，包括目录结构、基本调用方式、自定义js模块、定义依赖关系以及非AMD规范的js调用。通过实例展示了如何配置依赖路径、使用shim定义依赖，以及解决直接在HTML中调用可能导致的依赖加载问题。

摘要由CSDN通过智能技术生成

这个笔记是跟着B站视频学习记录的，可以学习到require.js基础的使用方法。

一、目录结构

resource放的基本使用资源
app放自己写的模块js
lib放的基本引用js

二，基本调用方式

引入require.js，我这里是网络地址（test1.html）

<script data-main="../resource/main" src="https://cdn.bootcss.com/require.js/2.3.6/require.js"></script>

按钮触发（test1.html）

<button onclick="test1()">测试red</button>

在hmtl中直接进行方法调用（test1.html）

<script>
	function test1(){
   
		require(['js/lib/jquery-1.11.3.min'],function($){
   
			$('body').css('background-color','red');
		})
	}
</script>

也可以在main.js中配置路径(如果配置了路径require的依赖只需要写为jquery)

require.config({
   
	paths:{
   
		'jquery':'js/lib/jquery-1.11.3.min',
		}
});

效果及js加载情况
没点击按钮前，加载了main和require。点击按钮后加载了jquery并页面背景变红

（一）调用自己定义的js

在app下自己定义Util.js

/*自己定义一个模块*/
define(['jquery'],function($){
   //加依赖
	return {
   
		changed:function(){
   
			$('body').css('background-color','green');
		},
		show:function(){
   
			alert("define1_show");
		},
		message:function(){
   
			alert("defin1_message");
		}
	}
});

main.js路径配置

require.config({
   
	/*建议配置方式，这儿直指app，因为这儿的改变性较大，其他依赖js改动少*/
	baseUrl: '../resource/app',
	paths: {
   
		'jquery': '../js/lib/jquery-1.11.3.min',
		'util':'util',
	},
});

html页面调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--避免同步加载改成这样-->
		<script src="https://cdn.bootcss.com/require.js/2.3.6/require.js"></script>
		<script src="../resource/main.js"></script>
		<title>测试2</title