javascript模块化之require.js实例教程
require.js是一款很流行的模块加载器,它可以模块化js代码,提高开发效率和代码质量;使用它开发能够很好的处理模块之间的依赖性,方便维护;异步加载js文件,避免页面加载时由于要顺序加载包括js文件,出现不响应等不好的用户体验。
require.js入门
1.从官网下载最新版本;
2.将文件引入到页面中,假设项目目录为:
在index.html中引入require.js.参考写法:
<html>
<head>
<title>requirejs test</title>
<meta charset="utf-8">
<script data-main="./js/main" src="./js/require.js"></script>
</head>
<body>
</body>
</html>
data-main属性的作用是指定入口文件,main.js只是一个示例,可以随意指定文件名,此时main.js会首先被加载。
3.main.js如何写?
paths: {
jquery:'./jquery'
}
});
require(['jquery'], function($) {
console.log($);
});
require.config用于配置一些参数,如基础路径baseUrl,路径path,图中所示为配置jquery的文件路径;
require函数接收两个参数,第一个参数为数组,即引入依赖模块,第二个参数为回调函数,在所引入的依赖模块加载完成后执行;
依次加载所需模块管理好依赖性;模块的加载为异步加载,解决了阻塞问题。
注意:require引入模块需满足AMD规范,即模块语法为:
var b = a.saf;
return b;
})
若文件没有依赖于其他模块可直接写为:
var num = 1+5;
return num;
})
requirejs也可以加载一些不符合AMD规范的文件,加载这样的文件时,需做一些配置
在require.config里配置shim项,写好需引入文件的文件名称,导出接口,依赖文件即可。
您可能感兴趣的文章:
javascript模块化之require.js实例教程
浅谈 JavaScript 模块化编程
JavaScript模块化开发的那些事
浅谈模块化的JavaScript
使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript
django中常见的模块有哪些
Node.js 模块系统
前端模块化杂谈
python中import有什么用法
远离JS灾难css灾难之 js私有函数和css选择器作为容器