5

在进行有一定规模的项目时,通常希望实现以下目标: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启动过程中加载模块的方式提取出来,再处理一些特殊情况。

动态加载模块深入分析可以参考这篇文章:
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);
        }
    };
});

二、完整的代码

  • 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);
        }
    };
});

写后感

年初定下的目标是坚持每周写一篇自己在开发过程碰到的问题总结,本以为是个简单的事情,写起来才发现写文章的时间比写代码的花的时间还要长。因为写代码的时候只要功能实现了就行了,但是,写文章的时候就一定要把代码搞清楚才敢写,实际上就是逼着自己要认真研究源代码,虽然压力很大,但收获更大。另一方面,发现找到一个好题目挺难的,只是简单的贴别人的代码没意思,可是自己想出来有价值,有意思的问题挺难的。因此大家要是觉得有啥有意思,有价值前端问题,分享一下吧,给我的年度写作计划帮帮忙

12 条评论
苹果小萝卜 · 2016年02月26日

LZ可以试试angularjs + oclazyload进行js的懒加载

回复

游于藩篱 作者 · 2016年02月26日

研究了一下,看起来不错,谢谢!

回复

Treri · 2016年02月28日

本人这两天正好写了一系列在angular.js中使用异步加载的文章, LZ感兴趣的话, 可以看看

http://isay.me/2016/02/angular-used-project-from-requirejs-to-webpack-1.html

回复

游于藩篱 作者 · 2016年02月28日

看了你的文章写的挺细致,但是有个问题,你的方案里好像没有体现怎样加载第三方模块的问题。这个问题折腾了我很久,逼着我看了很多遍angularjs的源码才搞明白两个injector的问题。但是,我也不确定我理解的是否正确。所以想知道你是否尝试了怎么加载第三方模块的问题。另外,我一直没有用过gulp、webpack这些工具,对于一个中小规模的项目真的很有必要吗?

回复

Treri · 2016年02月28日

第三方模块的延迟加载我研究的不多. 因为第三方模块我用的不多, 而且基本都是全局依赖的那种, 所以我采用的方式是和angualr一起载入的方式.
我做的工作就是将各个子模块的文件按需加载.

另外, 关于gulp webpack这样的工具, 对于打包布署真的很有用处. 因为项目规模也是从小到大慢慢积累的. 目前我开发的项目中, 子页面已经达到100个左右, 每个子页面对应一个controller, 一个css, 一个html, 另外还会有公共的directive, service等等, 所以如果不用按需加载的话, 基本也不会考虑angular的方案.

使用打包工具, 可以把各种文件合并在一起, 同时还可以进行混淆, 压缩. 即是为了节省带宽, 也是为了保护代码嘛.

你的第三方模块的延迟加载我需要好好看一下, 因为原来我没想到第三方模块也可以延迟加载.

回复

zhqi · 2017年03月08日

求助:network里已经看到angular加载进来了,为什么angular还是undefined

   define(["require","angular"],function (require,angular)
        {
            console.log(angular);
        }

回复

lishichao1002 · 2017年03月24日

动态加载模块这个能不能呢提供一下源码啊,可以写个线上栗子什么的,我自己调试总是报错。

回复

0

angular._lazyLoadModule = function(moduleName) {

    if (!loadedModules[moduleName]) { // 避免模块的重复加载
        var lazyModule = angular.module(moduleName);
        /* 应用的injector,和config中的injector不是同一个,是instanceInject,返回的是通过provider.$get创建的实例 */
        /* 递归加载依赖的模块 */
        angular.forEach(lazyModule.requires, function(r) {
            angular._lazyLoadModule(r);
        });
        /* 用provider的injector运行模块的controller,directive等等 */
        angular.forEach(lazyModule._invokeQueue, function(invokeArgs) {
            try {
                var provider = ngApp.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(lazyModule._configBlocks, function(invokeArgs) {
            try {
                ngApp.providers.$injector.invoke.apply(ngApp.providers.$injector, invokeArgs[2]);
            } catch (e) {
                console.error('load module configBlocks failed:' + e.message, invokeArgs);
            }
        });
        /* 用应用的injector运行模块的run */
        angular.forEach(lazyModule._runBlocks, function(fn) {
            injector.invoke(fn);
        });
        loadedModules[moduleName] = true;
    }
};
游于藩篱 作者 · 2017年04月01日
0

ngApp.config(['$injector', '$controllerProvider', function($injector, $controllerProvider) {

    /**
     * config中的injector和应用的injector不是同一个,是providerInjector,获得的是provider,而不是通过provider创建的实例
     * 这个injector通过angular无法获得,所以在执行config的时候把它保存下来
    */
    ngApp.providers = {
        $injector: $injector,
        $controllerProvider: $controllerProvider
    };
}]);
游于藩篱 作者 · 2017年04月01日
0

代码有些长,不能完整的贴上,需要的话留个邮箱发给你

游于藩篱 作者 · 2017年04月01日
lishichao1002 · 2017年03月24日

动态加载模块这个能不能呢提供一下源码啊,可以写个线上栗子什么的,我自己调试总是报错。

(function () {

angular
    .module('ourpalm.app', [
        // 'ourpalm.package', 这里加载的模块都改为异步加载
        // 'ourpalm.bbs', 这里加载的模块都改为异步加载
        // 'ourpalm.quality', 这里加载的模块都改为异步加载
        // 'ourpalm.cms', 这里加载的模块都改为异步加载
        // 'ourpalm.mis', 这里加载的模块都改为异步加载
        // 'ourpalm.gsc',  这里加载的模块都改为异步加载
        'ourpalm.util',
        'ui.router',
        'ngTable',
        'ui.bootstrap'
    ])

    .provider('$moduleLoader', function ($controllerProvider, $compileProvider, $filterProvider, $provide, $injector) {
        var ngProviders = {
            $controllerProvider: $controllerProvider,
            $compileProvider: $compileProvider,
            $filterProvider: $filterProvider,
            $provide: $provide,
            $injector: $injector
        };

        this.registerModule = function (name) {
            var module = angular.module(name);

            if (module.requires) {
                for (var i = 0; i < module.requires.length; i++) {
                    this.registerModule(module.requires[i]);
                }
            }
            angular.forEach(module._invokeQueue, function (args) {
                var provider = ngProviders[args[0]] || $injector.get(args[0]);
                provider[args[1]].apply(provider, args[2]);
            });
            angular.forEach(module._configBlocks, function (args) {
                var provider = ngProviders.$injector.get(args[0]);
                provider[args[1]].apply(provider, args[2]);
            });
            angular.forEach(module._runBlocks, function (args) {
                $injector.invoke(args);
            });
        };

        this.$get = function () {
            return {}
        };
    })

    .config(function ($stateProvider, $urlRouterProvider, $httpProvider, ourpalmTableProvider, $moduleLoaderProvider) {
        $urlRouterProvider.otherwise(function () {
            //使用webpack异步加载另外一个模块
            require.ensure('../ourpalm-bbs/index', function () {
                require('../ourpalm-bbs/index');
                //激活加载的模块
                $moduleLoaderProvider.registerModule('ourpalm.bbs');
            });
        });

    });

})();

回复

载入中...