RequireJS实例

天马3798

于 2016-12-07 11:23:24 发布

阅读量3.4k

点赞数

分类专栏： jQuery使用&插件文章标签： RequireJS 异步加载JS

本文链接：https://blog.csdn.net/u011127019/article/details/53503275

版权

jQuery使用&插件专栏收录该内容

48 篇文章 2 订阅

订阅专栏

一、使用data-main加载主文件

目录结构

引用代码：

<script src="../scripts/require.js" data-main="../myjs/app.js"></script>

app.js代码：

console.info('app.js开始执行');
console.info(require);

执行结果：

二、使用初始化配置和指定id加载js实例

<script src='../scripts/require.js'></script>
<script>
//初始化配置
require.config({
	baseUrl:'../myjs',
	paths:{
		jquery:'../scripts/jquery'
	}
});
//动态异步加载js
require(['jquery'],function($){
	$(function(){
		$(document.body).css({
			background:'#efefef'
		});
	});
});
</script>

加载顺序如下：

三、使用RequireJS构建模块实例

创建模块color.js定义颜色

//定义全局颜色
define('color', function() {
    return {
    	color:'red',
    	bgColor:'#efefef'
    };
});

创建style.js定义设置样式

//使用RequireJS定义模块,指定依赖
define('style',['color','jquery'],function(color,$){
    return {
    	init:function(){
    		$(document.body).css({
    			color:color.color,
    			background:color.bgColor
    		});
    	}
    };
});

创建require3.html 显示Demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src='../scripts/require.js'></script>
	<script >
	//全局配置
	require.config({
		baseUrl:'../myjs',
		paths:{
			jquery:'../scripts/jquery' //注意沒有文件后綴
		}
	});
	//加载style.js 配置页面样式
	require(['style'],function(style){
		//调用初始化
		style.init();
	});
	</script>
</head>
<body>
	<h1>App首页</h1>
</body>
</html>