探索angularjs+requirejs全面实现按需加载的套路

在进行有一定规模的项目时，通常希望实现以下目标：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、按需加载子页面
angular的routeProvider+ng-view已经提供完整的子页面加载的方法，直接用。
注意必须设置html5Mode，否则url变化以后，routeProvider不截获。

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>',  });}]);