angularjs+requirejs实现按需加载的全面实践
在进行有必定规模的项目时，一般但愿实现如下目标：一、支持复杂的页面逻辑（根据业务规则动态展示内容，例如：权限，数据状态等）；二、坚持先后端分离的基本原则（不分离的时候，能够在后端用模版引擎直接生成好页面）；三、页面加载时间短（业务逻辑复杂就须要引用第三方的库，但极可能加载的库和用户本次操做不要紧）；4，还要代码好维护（加入新的逻辑时，影响的文件尽可能少）。css
想同时实现这些目标，就必须有一套按需加载的机制，页面上展示的内容和全部须要依赖的文件，均可以根据业务逻辑须要按需加载。最近都是基于angularjs作开发，因此本文主要围绕angularjs提供的各类机制，探索全面实现按需加载的套路。html
1、一步一步实现
基本思路：一、先开发一个框架页面，它能够完成一些基本的业务逻辑，而且支持扩展的机制；二、业务逻辑变复杂，须要把部分逻辑拆分到子页面中，子页面按需加载；三、子页面中的展示内容也变了复杂，又须要进行拆分，按需加载；四、子页面的内容复杂到依赖外部模块，须要按需加载angular模块。前端
一、框架页
提到前端的按需加载，就会想到AMD（ Asynchronous Module Definition），如今用requirejs的很是多，因此首先考虑引入requires。html5
index.htmlangularjs
<script src="static/js/require.js" defer async data-main="/test/lazyspa/spa-loader.js"></script>
注意：采用手动启动angular的方式，所以html中没有ng-app。bootstrap
spa-loader.js后端
require.config({
paths: {
"domReady": '/static/js/domReady',
"angular": "//cdn.bootcss.com/angular.js/1.4.8/angular.min",
"angular-route": "//cdn.bootcss.com/angular.js/1.4.8/angular-route.min",
},
shim: {
"angular": {
exports: "angular"
},
"angular-route": {
deps: ["angular"]
},
},
deps: ['/test/lazyspa/spa.js'],
urlArgs: "bust=" + (new Date()).getTime()
});
spa.jspromise
define(["require", "angular", "angular-route"], function(require, angular) {
var app = angular.module('app', ['ngRoute']);
require(['domReady!'], function(document) {
angular.bootstrap(document, ["app"]); /*手工启动angular*/
window.loading.finish();
});
});
二、按需加载子页面
angular的routeProvider+ng-view已经提供完整的子页面加载的方法，直接用。
注意必须设置html5Mode，不然url变化之后，routeProvider不截获。app
index.html框架
<div>
<a href="/test/lazyspa/page1">page1</a>
<a href="/test/lazyspa/page2">page2</a>
<a href="/test/lazyspa/">main</a>
</div>
<div ng-view></div>
spa.js
app.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
/* 必须设置生效，不然下面的设置不生效 */
$locationProvider.html5Mode(true);
/* 根据url的变化加载内容 */
$routeProvider.when('/test/lazyspa/page1', {
template: '<div>page1</div>',
}).when('/test/lazyspa/page2', {
template: '<div>page2</div>',
}).otherwise({
template: '<div>main</div>',
});
}]);
三、按需加载子页面中的内容
用routeProvider的前提是url要发生变化，可是有的时候只是子页面中的局部要发生变化。若是这些变化主要是和绑定的数据相关，不影响页面布局，或者影响很小，那么经过ng-if一类的标签基本就解决了。可是有的时候要根据页面状态，彻底改变局部的内容，例如：用户登陆前和登陆后局部要发生的变化等，这就意味着局部的布局可能也挺复杂，须要做为独立的单元来对待。
利用ng-include能够解决页面局部内容加载的问题。可是，咱们能够再考虑更复杂一些的状况。这个页面片断对应的代码是后端动态生成的，并且不只仅有html还有js，js中定义了代码片断对应的controller。这种状况下，不只仅要考虑动态加载html的问题，还要考虑动态定义controller的问题。controller是经过angular的controllerProvider的register方法注册，所以须要得到controllerProvider的实例。
spa.js
app.config(['$locationProvider', '$routeProvider', '$controllerProvider', function($locationProvider, $routeProvider, $controllerProvider) {
app.providers = {
$controllerProvider: $controllerProvider //注意这里！！！
};
/* 必须设置生效，不然下面的设置不生效 */
$locationProvider.html5Mode(true);
/* 根据url的变化加载内容 */
$routeProvider.when('/test/lazyspa/page1', {
/*!!!页面中引入动态内容!!!*/
template: '<div>page1</div><div ng-include="\'page1.html\'"></div>',
controller: 'ctrlPage1'
}).when('/test/lazyspa/page2', {
template: '<div>page2</div>',
}).otherwise({
template: '<div>main</div>',
});
app.controller('ctrlPage1', ['$scope', '$templateCache', function($scope, $templateCache) {
/* 用这种方式，ng-include配合，根据业务逻辑动态获取页面内容 */
/* !!!动态的定义controller!!! */
app.providers.$controllerProvider.register('ctrlPage1Dyna', ['$scope', function($scope) {
$scope.openAlert = function() {
alert('page1 alert');
};
}]);
/* !!!动态定义页面的内容!!! */
$templateCache.put('page1.html', '<div ng-controller="ctrlPage1Dyna"><button ng-click="openAlert()">alert</button></div>');
}]);
}]);
四、动态加载模块
采用上面子页面片断的加载方式存在一个局限，就是各类逻辑（js）要加入到启动模块中，这样仍是限制子页面片断的独立封装。特别是，若是子页面片断须要使用第三方模块，且这个模块在启动模块中没有事先加载时，就没有办法了。因此，必需要可以实现模块的动态加载。实现模块的动态加载就是把angular启动过程当中加载模块的方式提取出来，再处理一些特殊状况。
动态加载模块深刻分析能够参考这篇文章：
http://www.tuicool.com/articles/jmuymiE
可是，实际跑起来发现文章中的代码有问题，就是“$injector”究竟是什么？研究了angular的源代码injector.js才大概搞明白是怎么回事。
一个应用有两个$injector，providerInjector和instanceInjector。invokeQueue和用providerInjector，runBlocks用instanceProvider。若是$injector用错了，就会找到须要的服务。
routeProvider中动态加载模块文件。
template: '<div ng-controller="ctrlModule1"><div>page2</div><div><button ng-click="openDialog()">open dialog</button></div></div>',
resolve: {
load: ['$q', function($q) {
var defer = $q.defer();
/* 动态加载angular模块 */
require(['/test/lazyspa/module1.js'], function(loader) {
loader.onload && loader.onload(function() {
defer.resolve();
});
});
return defer.promise;
}]
}
动态加载angular模块
angular._lazyLoadModule = function(moduleName) {
var m = angular.module(moduleName);
console.log('register module:' + moduleName);
/* 应用的injector，和config中的injector不是同一个，是instanceInject，返回的是经过provider.$get建立的实例 */
var $injector = angular.element(document).injector();
/* 递归加载依赖的模块 */
angular.forEach(m.requires, function(r) {
angular._lazyLoadModule(r);
});
/* 用provider的injector运行模块的controller，directive等等 */
angular.forEach(m._invokeQueue, function(invokeArgs) {
try {
var provider = providers.$injector.get(invokeArgs[0]);
provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
} catch (e) {
console.error('load module invokeQueue failed:' + e.message, invokeArgs);
}
});
/* 用provider的injector运行模块的config */
angular.forEach(m._configBlocks, function(invokeArgs) {
try {
providers.$injector.invoke.apply(providers.$injector, invokeArgs[2]);
} catch (e) {
console.error('load module configBlocks failed:' + e.message, invokeArgs);
}
});
/* 用应用的injector运行模块的run */
angular.forEach(m._runBlocks, function(fn) {
$injector.invoke(fn);
});
};
定义模块
module1.js
define(["angular"], function(angular) {
var onloads = [];
var loadCss = function(url) {
var link, head;
link = document.createElement('link');
link.href = url;
link.rel = 'stylesheet';
head = document.querySelector('head');
head.appendChild(link);
};
loadCss('//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* !!! 动态定义requirejs !!!*/
require.config({
paths: {
'ui-bootstrap-tpls': '//cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min'
},
shim: {
"ui-bootstrap-tpls": {
deps: ['angular']
}
}
});
/*!!! 模块中须要引用第三方的库，加载模块依赖的模块 !!!*/
require(['ui-bootstrap-tpls'], function() {
var m1 = angular.module('module1', ['ui.bootstrap']);
m1.config(['$controllerProvider', function($controllerProvider) {
console.log('module1 - config begin');
}]);
m1.controller('ctrlModule1', ['$scope', '$uibModal', function($scope, $uibModal) {
console.log('module1 - ctrl begin');
/*!!! 打开angular ui的对话框 !!!*/
var dlg = '<div class="modal-header">';
dlg += '<h3 class="modal-title">I\'m a modal!</h3>';
dlg += '</div>';
dlg += '<div class="modal-body">content</div>';
dlg += '<div class="modal-footer">';
dlg += '<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>';
dlg += '<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>';
dlg += '</div>';
$scope.openDialog = function() {
$uibModal.open({
template: dlg,
controller: ['$scope', '$uibModalInstance', function($scope, $mi) {
$scope.cancel = function() {
$mi.dismiss();
};
$scope.ok = function() {
$mi.close();
};
}],
backdrop: 'static'
});
};
}]);
/* !!!动态加载模块!!! */
angular._lazyLoadModule('module1');
console.log('module1 loaded');
angular.forEach(onloads, function(onload) {
angular.isFunction(onload) && onload();
});
});
return {
onload: function(callback) {
onloads.push(callback);
}
};
});
2、完整的代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,user-scalable=no,initial-scale=1.0" name="viewport">
<base href='/'>
<title>SPA</title>
</head>
<body>
<div ng-controller='ctrlMain'>
<div>
<a href="/test/lazyspa/page1">page1</a>
<a href="/test/lazyspa/page2">page2</a>
<a href="/test/lazyspa/">main</a>
</div>
<div ng-view></div>
</div>
<div class="loading"><div class='loading-indicator'><i></i></div></div>
<script src="static/js/require.js" defer async data-main="/test/lazyspa/spa-loader.js?_=3"></script>
</body>
</html>
spa-loader.js
window.loading = {
finish: function() {
/* 保留个方法作一些加载完成后的处理，我实际的项目中会在这里结束加载动画 */
},
load: function() {
require.config({
paths: {
"domReady": '/static/js/domReady',
"angular": "//cdn.bootcss.com/angular.js/1.4.8/angular.min",
"angular-route": "//cdn.bootcss.com/angular.js/1.4.8/angular-route.min",
},
shim: {
"angular": {
exports: "angular"
},
"angular-route": {
deps: ["angular"]
},
},
deps: ['/test/lazyspa/spa.js'],
urlArgs: "bust=" + (new Date()).getTime()
});
}
};
window.loading.load();
spa.js
'use strict';
define(["require", "angular", "angular-route"], function(require, angular) {
var app = angular.module('app', ['ngRoute']);
/* 延迟加载模块 */
angular._lazyLoadModule = function(moduleName) {
var m = angular.module(moduleName);
console.log('register module:' + moduleName);
/* 应用的injector，和config中的injector不是同一个，是instanceInject，返回的是经过provider.$get建立的实例 */
var $injector = angular.element(document).injector();
/* 递归加载依赖的模块 */
angular.forEach(m.requires, function(r) {
angular._lazyLoadModule(r);
});
/* 用provider的injector运行模块的controller，directive等等 */
angular.forEach(m._invokeQueue, function(invokeArgs) {
try {
var provider = providers.$injector.get(invokeArgs[0]);
provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
} catch (e) {
console.error('load module invokeQueue failed:' + e.message, invokeArgs);
}
});
/* 用provider的injector运行模块的config */
angular.forEach(m._configBlocks, function(invokeArgs) {
try {
providers.$injector.invoke.apply(providers.$injector, invokeArgs[2]);
} catch (e) {
console.error('load module configBlocks failed:' + e.message, invokeArgs);
}
});
/* 用应用的injector运行模块的run */
angular.forEach(m._runBlocks, function(fn) {
$injector.invoke(fn);
});
};
app.config(['$injector', '$locationProvider', '$routeProvider', '$controllerProvider', function($injector, $locationProvider, $routeProvider, $controllerProvider) {
/*＊
＊ config中的injector和应用的injector不是同一个，是providerInjector，得到的是provider，而不是经过provider建立的实例
＊ 这个injector经过angular没法得到，因此在执行config的时候把它保存下来
*/
app.providers = {
$injector: $injector,
$controllerProvider: $controllerProvider
};
/* 必须设置生效，不然下面的设置不生效 */
$locationProvider.html5Mode(true);
/* 根据url的变化加载内容 */
$routeProvider.when('/test/lazyspa/page1', {
template: '<div>page1</div><div ng-include="\'page1.html\'"></div>',
controller: 'ctrlPage1'
}).when('/test/lazyspa/page2', {
template: '<div ng-controller="ctrlModule1"><div>page2</div><div><button ng-click="openDialog()">open dialog</button></div></div>',
resolve: {
load: ['$q', function($q) {
var defer = $q.defer();
/* 动态加载angular模块 */
require(['/test/lazyspa/module1.js'], function(loader) {
loader.onload && loader.onload(function() {
defer.resolve();
});
});
return defer.promise;
}]
}
}).otherwise({
template: '<div>main</div>',
});
}]);
app.controller('ctrlMain', ['$scope', '$location', function($scope, $location) {
console.log('main controller');
/* 根据业务逻辑自动到缺省的视图 */
$location.url('/test/lazyspa/page1');
}]);
app.controller('ctrlPage1', ['$scope', '$templateCache', function($scope, $templateCache) {
/* 用这种方式，ng-include配合，根据业务逻辑动态获取页面内容 */
/* 动态的定义controller */
app.providers.$controllerProvider.register('ctrlPage1Dyna', ['$scope', function($scope) {
$scope.openAlert = function() {
alert('page1 alert');
};
}]);
/* 动态定义页面内容 */
$templateCache.put('page1.html', '<div ng-controller="ctrlPage1Dyna"><button ng-click="openAlert()">alert</button></div>');
}]);
require(['domReady!'], function(document) {
angular.bootstrap(document, ["app"]);
});
});
module1.js
'use strict';
define(["angular"], function(angular) {
var onloads = [];
var loadCss = function(url) {
var link, head;
link = document.createElement('link');
link.href = url;
link.rel = 'stylesheet';
head = document.querySelector('head');
head.appendChild(link);
};
loadCss('//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css');
require.config({
paths: {
'ui-bootstrap-tpls': '//cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min'
},
shim: {
"ui-bootstrap-tpls": {
deps: ['angular']
}
}
});
require(['ui-bootstrap-tpls'], function() {
var m1 = angular.module('module1', ['ui.bootstrap']);
m1.config(['$controllerProvider', function($controllerProvider) {
console.log('module1 - config begin');
}]);
m1.controller('ctrlModule1', ['$scope', '$uibModal', function($scope, $uibModal) {
console.log('module1 - ctrl begin');
var dlg = '<div class="modal-header">';
dlg += '<h3 class="modal-title">I\'m a modal!</h3>';
dlg += '</div>';
dlg += '<div class="modal-body">content</div>';
dlg += '<div class="modal-footer">';
dlg += '<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>';
dlg += '<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>';
dlg += '</div>';
$scope.openDialog = function() {
$uibModal.open({
template: dlg,
controller: ['$scope', '$uibModalInstance', function($scope, $mi) {
$scope.cancel = function() {
$mi.dismiss();
};
$scope.ok = function() {
$mi.close();
};
}],
backdrop: 'static'
});
};
}]);
angular._lazyLoadModule('module1');
console.log('module1 loaded');
angular.forEach(onloads, function(onload) {
angular.isFunction(onload) && onload();
});
});
return {
onload: function(callback) {
onloads.push(callback);
}
};
});
写后感
年初定下的目标是坚持每周写一篇本身在开发过程碰到的问题总结，本觉得是个简单的事情，写起来才发现写文章的时间比写代码的花的时间还要长。由于写代码的时候只要功能实现了就好了，可是，写文章的时候就必定要把代码搞清楚才敢写，实际上就是逼着本身要认真研究源代码，虽然压力很大，但收获更大。另外一方面，发现找到一个好题目挺难的，只是简单的贴别人的代码没意思，但是本身想出来有价值，有意思的问题挺难的。所以你们要是以为有啥有意思，有价值前端问题，分享一下吧，给个人年度写做计划帮帮忙
相关文章
- 1. antd实现按需加载
- 2. vue按需加载实现
- 3. vue实现按需加载（懒加载）
- 4. webpack按需加载之react实践
- 5. Webpack的Code Splitting实现按需加载
- 6. 实现antd的按需加载
- 7. 按需加载代码的实现
- 8. 实现element-ui的按需引入，按需打包加载
- 9. vue+webpack实现按需加载
- 10. react-router4 实现按需加载
- 更多相关文章...
- • Thymeleaf项目实践 - Thymeleaf 教程
- • 现实生活中的 XML - XML 教程
- • ☆基于Java Instrument的Agent实现
- • TiDB 在摩拜单车在线数据业务的应用和实践
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章