在進行有一定規模的專案時，通常希望實現以下目標：1、支援複雜的頁面邏輯（根據業務規則動態展現內容，例如：權限，資料狀態等）；2、堅持前後端分離的基本原則（不分離的時候，可以在後端用模版引擎直接生成好頁面）；3、頁面加載時間短（業務邏輯複雜就需要引用第三方的庫，但很可能加載的庫和用戶本次操作沒關係）；4，也要程式碼好維護（加入新的邏輯時，影響的文件盡量少）。
想同時實現這些目標，就必須有一套按需加載的機制，頁面上展現的內容和所有需要依賴的文件，都可以根據業務邏輯需要按需加載。最近都是基於angularjs做開發，所以本文主要圍繞在angularjs提供的各種機制，探索全面實作按需載入的套路。
一、一步一步實現
基本思路：1、先開發一個框架頁面，它可以完成一些基本的業務邏輯，並且支援擴充的機制；2、商業邏輯變得複雜，需要把部分邏輯拆分到子頁面中，子頁面按需加載；3、子頁面中的展現內容也變了複雜，又需要進行拆分，按需加載；4、子頁面的內容複雜到依賴外部模組，需要按需載入angular模組。
1、框架頁
提到前端的按需加載，就會想到AMD（ Asynchronous Module Definition），現在用requirejs的非常多，所以先考慮引入requires。
index.html
<script src="static/js/require.js" defer async data-main="/test/lazyspa/spa-loader.js"></script>
注意：採用手動啟動angular的方式，因此html中沒有ng-app。
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.js
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();
});
});2、隨選載入子頁
2、隨選載入子頁< >
注意必須設定html5Mode，否則url變化以後，routeProvider不截獲。
<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>
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>',
});
}]);
3、隨選載入子頁中的內容
用routeProvider的前提是url要發生變化，但是有的時候只是子頁面中的局部要發生變化。如果這些變化主要是和綁定的資料相關，不影響頁面佈局，或者影響很小，那麼透過ng-if一類的標籤基本上就解決了。但有的時候要根據頁面狀態，完全改變局部的內容，例如：使用者登入前和登入後局部要發生的變化等，這就意味著局部的佈局可能也挺複雜，需要作為獨立的單元來對待。
利用ng-include可以解決頁面局部內容載入的問題。但是，我們可以再考慮更複雜的情況。這個頁面片段對應的程式碼是後端動態產生的，而且不只html還有js，js定義了程式碼片段對應的controller。這種情況下，不僅要考慮動態載入html的問題，還要考慮動態定義controller的問題。 controller是透過angular的controllerProvider的register方法註冊，因此需要取得controllerProvider的實例。
spa.jsapp.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>');
}]);
}]);
4、動態載入模組
採用上面子頁面的片段載入方式存在一個局限，就是各種邏輯（js）要加入到啟動模組中，這樣還是限制子頁面片段的獨立封裝。特別是，如果子頁面片段需要使用第三方模組，而這個模組在啟動模組中沒有事先載入時，就沒有辦法了。所以，必須要能夠實現模組的動態載入。實作模組的動態載入就是把angular啟動過程中載入模組的方式提取出來，再處理一些特殊情況。
但是，實際跑起來發現文章中的程式碼有問題，就是「$injector」到底是什麼？研究了angular的原始碼injector.js才大概搞懂是怎麼回事。
一個應用程式有兩個$injector，providerInjector和instanceInjector。 invokeQueue和用providerInjector，runBlocks用instanceProvider。如果$injector用錯了，就會找到需要的服務。
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);
});
};
定義模組
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);
}
};
});module1. >
<!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>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();'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"]);
});
});'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);
}
};
});
