requie.js好处以及用法(四），基于css和html模块化

本文链接：https://blog.youkuaiyun.com/function_key/article/details/79914258

本文介绍了一个基于RequireJS的配置文件示例，展示了如何通过RequireJS进行模块化开发及资源加载，包括JavaScript库、CSS样式和HTML模板的加载方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看配置文件：

require.config({　　　　
	urlArgs: "v=" + new Date().getTime(),
	baseUrl: "./js",
	paths: {　　　　　　
		jquery: ["//cdn.bootcss.com/jquery/1.11.1/jquery", "lib/jquery-1.11.1"], //数组，如果前面没有的话就加载后面的。
		jia: "common/jia",
		bean: 'common/bean',
		jian: 'common/jian',
		styleCss: '../style/app', //样式文件.css
		footerCss:'../style/footer',
		cssModule: 'lib/css', //引入模块css.js路径，从此可以按需加载css文件,
		cssModule2: 'lib/css/css',
		textModule:'lib/text',//这个js文件可以是html文件当做模块来引用，道理和css一样
		footer:'common/footer',
		footerTpl:'../templ/footer.html'
	},
	shim: {
		jian: {
			deps: ['cssModule!styleCss','cssModule2!../style/header.css']
			//这种依赖方式也可以写在define(['cssModule!styleCss'])中，类似模块依赖道理和text.js一样。详见common/footer.js
			//***cssModule2先在map属性星号下找，如果星号没有就从paths中找，如果paths中也没有，那么就从baseUrl路径下寻找cssModule.js文件
		},
		jia: {
			deps: ['cssModule!../style/button.css'] //css文件也可以不用path配置，这么引入。
			//deps:['./lib/css.min!../style/button.css'] 这么引入也可以，因为./lib/css.min.js 也可以实现css文件引入
		}
	},
	map: { //必须使用绝对路径才可以
		'*': {
			'zepto': 'https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js',
			//只要在某个文件中出现了require(['zepto']),就会加载zepto 指代的文件，暂时还未找到它和paths属性的区别，只是先于paths加载。
			cssModule2: "http://127.0.0.1:8020/require/test/js/lib/css_bak.js" //必须要用绝对路径
		}
	}
});

require(['jquery'], function(_$) {
	console.log("_$", _$); //局部jQuery
	console.log("$", $) //全局的jQuery
});

common/footer.js

//
//define(['textModule!../../templ/footer.html'], function(tpml) {
//
//	console.log(tpml)
//});
//上面的写法也正确。
define(['textModule!footerTpl','cssModule!footerCss'], function(tpml) {
	console.log("tpml:",tpml)
	return {
		footer: tpml
	}
});

对应的调用页面：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
	</head>

	<body>
		<div class="box">
			<header>我是头部</header>
			<button>点击加载样式</button>
		</div>
		<script type="text/javascript" src="js/lib/require.js"></script>
		<script src="main.js"></script>
		<script>
			require(['jquery'],function($){
				$("button").click(function(){
					require(['./js/src/jian.js','./js/src/footer.js']);
				})
			});
		</script>
	</body>

</html>

配置文件中map属性的用法：

	map: { //必须使用绝对路径才可以
		'*': {
			'zepto': 'https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js',
			//只要在某个文件中出现了require(['zepto']),就会加载zepto 指代的文件，暂时还未找到它和paths属性的区别，只是先于paths加载。
			cssModule2: "http://127.0.0.1:8020/require/test/js/lib/css_bak.js" //必须要用绝对路径
		},
		'src/api':{
			jquery:"lib/jquery1"//模块src/api中依赖jquery会加载不同的文件
		},
		"src/api2":{
			jquery:'lib/jquery2'
		}
	}

api.js

define(['jquery'],function($){
	return {
		api:'api1'
	}
})

api2.js

define(['jquery'],function(){
	
})