RequireJS是一个Javascript的模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更简单自然。RequireJS 遵循的是 AMD(异步模块定义)规范,帮助用户异步按需的加载 JavaScript 代码,并解决 JavaScript 模块间的依赖关系,提升了前端代码的整体质量和性能。
reqirejs 的用处:
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
<script data-main="/javascripts/main" src="/javascripts/libs/require.js"> </script>
/public/javascripts/
▾ libs/
bootstrap.min.js
highcharts.js
jquery.js
jquery.min.js
require.js
▾ tools/
detail.js
get_data.js
main.js
main.js:
requirejs.config({
baseUrl: '../javascripts',
paths: {
"jquery": 'libs/jquery',
"detail": 'tools/detail',
"bootstrap.min": 'libs/bootstrap.min',
"highcharts": 'libs/highcharts'
},
shim: {
'bootstrap.min': {
deps: ['jquery'],
exports: 'bootstrap'
},
'highcharts': {
deps: ['jquery'],
exports: 'highcharts'
}
}
});
require(['detail'], function(detail) {
});
detail.js中定义
define(['jquery', 'highcharts'], function($) {...}
前端只要这样
<script data-main="/javascripts/main" src="/javascripts/libs/require.js">
遇到的问题都在这里解决了
需要注意的一点是,main中模块是异步加载的,如果后面的页面通过<script>加载的脚本对其有依赖,那就陷入了异步的大坑中。。done
这个项目的前端使用了 requireJS : https://github.com/Dongss/dongss