我在我的应用中使用 requireJs 。我面对一个场景，我想清除它。 我正在根据位置网址或路由加载特定模板（视图）及其相关的js文件。请参阅以下代码示例。
index.html当我更改为 xyz 视图时，将加载 xyz.js 文件。我的问题是，当我更改为 abc 视图时，如果是，则会加载 xyz.js ，然后是否会从缓存加载？
我在newtwork选项卡中看到它再次加载相同的文件，即 xyz.js ，而不是来自缓存，与已经包含在 ng-inlcude <的一个模板中的html模板相同/ strong>它不会从缓存中加载。
任何帮助将不胜感激。感谢。
我的申请流程如下：
<script type="text/javascript" src="libs/requirejs/require.js" data-main="config.js"></script>
有
Config.js在requirejs.config({
"paths":{
"angular": "libs/angular/angular.min",
"angular-route":"libs/angular-route/angular-route",
"angular-sanitize":"libs/angular-sanitize/angular-sanitize",
"jquery-ui":"libs/jquery-ui/jquery-ui.min",
"ngAnimate":"libs/angular-animate/angular-animate.min",
"angularSrapCore":"libs/angular-strap/dist/angular-strap.min",
"angularStrap":"libs/angular-strap/dist/angular-strap.tpl.min"
},
"shim": {
"angular": {
"exports": "angular"
},
"drutasApp": {
deps: ["angular", "angular-route","angular-sanitize","jquery-ui","ngAnimate"]
},
"angular-route": {
deps: ["angular"]
}
}
});
require(['angular','app'
], function (angular) {
angular.element(document).ready(function () {console.log("app bootstraped");
angular.bootstrap(document, ['app']);
});
});
我手动引导应用。
app.js config.js与define(['scripts/routes.js','scripts/services/dependencyResolverFor.js'], function(config, dependencyResolverFor)
{
var app = angular.module('app', ['ngRoute','ngAnimate','ngSanitize']);
app.config(
[
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
function($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide)
{
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
$locationProvider.html5Mode(false);
if(config.routes !== undefined)
{
angular.forEach(config.routes, function(route, path)
{
$routeProvider.when(path, {
templateUrl:route.templateUrl,
resolve:dependencyResolverFor(route.dependencies)
});
});
}
if(config.defaultRoutePaths !== undefined)
{
$routeProvider.otherwise({redirectTo:config.defaultRoutePaths});
}
}
]);
return app;
});
`routes.js` is as following...
define([], function()
{
return {
defaultRoutePath: '/',
routes: {
'/': {
templateUrl: 'views/home.html',
dependencies: [
'scripts/controllers/home'
]
},
'/abc-view': {
templateUrl: 'views/abc.html',
dependencies: [
'scripts/controllers/abc',
'scripts/controllers/xyz'
]
},
'/xyz-view': {
templateUrl: 'views/xyz.html',
dependencies: [
'scripts/controllers/xyz'
]
}
}
};
});
位于同一目录中，代码正在跟随...
define([], function()
{
return function(dependencies)
{
var definition =
{
resolver: ['$q','$rootScope', function($q, $rootScope)
{
var deferred = $q.defer();
require(dependencies, function()
{
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}]
}
return definition;
}
});
dependencyResolver.js
{{1}}
答案 0 :(得分：-1)
我的问题是，当我更改为 abc 视图时， xyz.js 会被加载
不，requireJS将判断要获取的脚本标记的最终URL。如果之前已加载，则requireJS不会做任何事情。
如果是，那么它是否会从缓存中加载？
不太可能使用缓存，但requireJS只是检测是否先加载了相同URL的同一文件。如果之前加载，requireJS将只执行你的js而不加载任何东西。
我在newtwork选项卡中看到它再次加载相同的文件，即xyz.js，而不是缓存与已包含在一个模板中的html模板相同，其中ng-inlcude不从缓存加载。
在查看代码时，requireJS必须用于获取依赖项。除非requirejs.undef()在某个地方被调用，否则这种行为不会发生。或者这是requireJS的旧版本，其中模块URL没有跟踪，无论条件如何，都需要加载<script>。
注意我不确定requireJS的2.1.x之前版本的行为。