首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 26, 2016

在进行有一定规模的项目时，通常希望实现以下目标：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>',
  });
}]);

3、按需加载子页面中的内容
用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>');
  }]);
}]);

4、动态加载模块
采用上面子页面片段的加载方式存在一个局限，就是各种逻辑（js）要加入到启动模块中，这样还是限制子页面片段的独立封装。特别是，如果子页面片段需要使用第三方模块，且这个模块在启动模块中没有事先加载时，就没有办法了。所以，必须要能够实现模块的动态加载。实现模块的动态加载就是把angular启动过程中加载模块的方式提取出来，再处理一些特殊情况。

但是，实际跑起来发现文章中的代码有问题，就是“$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);
    }
  };
});

二、完整的代码
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);
    }
  };
});

以上就是本文的全部内容，希望对大家的学习有所帮助。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jQuery的实现简单的分页控件
Oct 10 Javascript
JavaScript 继承使用分析
May 12 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
vue-router项目实战总结篇
Feb 11 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
详解js类型判断
May 22 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 #Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 #Javascript
自动完成的搜索框javascript实现
Feb 26 #Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 #Javascript
js去字符串前后空格的实现方法
Feb 26 #Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 #Javascript
超实用的JavaScript表单代码段
Feb 26 #Javascript
追加文本(1) 柱状图(1) Pytesseract(1) PIL(1) 文字识别(1) 验证码(1) GCN(1) 裁剪图片(1) SFTP(3) 鲲鹏(1)
You might like
php中的动态调用实例分析
2015/01/07 PHP
可输入的下拉框
2006/06/19 Javascript
htm调用JS代码
2007/03/15 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
vue组件的写法汇总
2018/04/12 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python生成ppt的方法
2018/06/07 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Django实现网页分页功能
2019/10/31 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
TheFork葡萄牙：欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
波兰快递服务：Globkurier.pl
2019/11/08 全球购物
Michael Kors澳大利亚官网：世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
高中学生期末评语
2014/04/25 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
远程培训的心得体会
2014/09/01 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
教师年终个人总结
2015/02/11 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书