angularjs+requirejs實現(xiàn)按需加載的全面實踐

TerryCai 發(fā)布于2019-08-19 17:39 / 1566人閱讀

摘要：想同時實現(xiàn)這些目標(biāo)，就必須有一套按需加載的機(jī)制，頁面上展現(xiàn)的內(nèi)容和所有需要依賴的文件，都可以根據(jù)業(yè)務(wù)邏輯需要按需加載。最近都是基于做開發(fā)，所以本文主要圍繞提供的各種機(jī)制，探索全面實現(xiàn)按需加載的套路。注意必須設(shè)置，否則變化以后，不截獲。

在進(jìn)行有一定規(guī)模的項目時，通常希望實現(xiàn)以下目標(biāo)：1、支持復(fù)雜的頁面邏輯（根據(jù)業(yè)務(wù)規(guī)則動態(tài)展現(xiàn)內(nèi)容，例如：權(quán)限，數(shù)據(jù)狀態(tài)等）；2、堅持前后端分離的基本原則（不分離的時候，可以在后端用模版引擎直接生成好頁面）；3、頁面加載時間短（業(yè)務(wù)邏輯復(fù)雜就需要引用第三方的庫，但很可能加載的庫和用戶本次操作沒關(guān)系）；4，還要代碼好維護(hù)（加入新的邏輯時，影響的文件盡量少）。

想同時實現(xiàn)這些目標(biāo)，就必須有一套按需加載的機(jī)制，頁面上展現(xiàn)的內(nèi)容和所有需要依賴的文件，都可以根據(jù)業(yè)務(wù)邏輯需要按需加載。最近都是基于angularjs做開發(fā)，所以本文主要圍繞angularjs提供的各種機(jī)制，探索全面實現(xiàn)按需加載的套路。

一、一步一步實現(xiàn)

基本思路：1、先開發(fā)一個框架頁面，它可以完成一些基本的業(yè)務(wù)邏輯，并且支持?jǐn)U展的機(jī)制；2、業(yè)務(wù)邏輯變復(fù)雜，需要把部分邏輯拆分到子頁面中，子頁面按需加載；3、子頁面中的展現(xiàn)內(nèi)容也變了復(fù)雜，又需要進(jìn)行拆分，按需加載；4、子頁面的內(nèi)容復(fù)雜到依賴外部模塊，需要按需加載angular模塊。

1、框架頁

提到前端的按需加載，就會想到AMD（ Asynchronous Module Definition），現(xiàn)在用requirejs的非常多，所以首先考慮引入requires。

index.html

注意：采用手動啟動angular的方式，因此html中沒有ng-app。

spa-loader.js

require.config({
    paths: {
        "domReady": "/static/js/domReady",
        "angular": "http://cdn.bootcss.com/angular.js/1.4.8/angular.min",
        "angular-route": "http://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已經(jīng)提供完整的子頁面加載的方法，直接用。
注意必須設(shè)置html5Mode，否則url變化以后，routeProvider不截獲。

index.html


    page1
    page2
    main

spa.js

app.config(["$locationProvider", "$routeProvider", function($locationProvider, $routeProvider) {
    /* 必須設(shè)置生效，否則下面的設(shè)置不生效 */
    $locationProvider.html5Mode(true);
    /* 根據(jù)url的變化加載內(nèi)容 */
    $routeProvider.when("/test/lazyspa/page1", {
        template: "page1",
    }).when("/test/lazyspa/page2", {
        template: "page2",
    }).otherwise({
        template: "main",
    });
}]);

3、按需加載子頁面中的內(nèi)容

用routeProvider的前提是url要發(fā)生變化，但是有的時候只是子頁面中的局部要發(fā)生變化。如果這些變化主要是和綁定的數(shù)據(jù)相關(guān)，不影響頁面布局，或者影響很小，那么通過ng-if一類的標(biāo)簽基本就解決了。但是有的時候要根據(jù)頁面狀態(tài)，完全改變局部的內(nèi)容，例如：用戶登錄前和登錄后局部要發(fā)生的變化等，這就意味著局部的布局可能也挺復(fù)雜，需要作為獨立的單元來對待。

利用ng-include可以解決頁面局部內(nèi)容加載的問題。但是，我們可以再考慮更復(fù)雜一些的情況。這個頁面片段對應(yīng)的代碼是后端動態(tài)生成的，而且不僅僅有html還有js，js中定義了代碼片段對應(yīng)的controller。這種情況下，不僅僅要考慮動態(tài)加載html的問題，還要考慮動態(tài)定義controller的問題。controller是通過angular的controllerProvider的register方法注冊，因此需要獲得controllerProvider的實例。

spa.js

app.config(["$locationProvider", "$routeProvider", "$controllerProvider", function($locationProvider, $routeProvider, $controllerProvider) {
    app.providers = {
        $controllerProvider: $controllerProvider //注意這里?。?！
    };
    /* 必須設(shè)置生效，否則下面的設(shè)置不生效 */
    $locationProvider.html5Mode(true);
    /* 根據(jù)url的變化加載內(nèi)容 */
    $routeProvider.when("/test/lazyspa/page1", {
        /*!!!頁面中引入動態(tài)內(nèi)容!!!*/
        template: "page1
",
        controller: "ctrlPage1"
    }).when("/test/lazyspa/page2", {
        template: "page2",
    }).otherwise({
        template: "main",
    });
    app.controller("ctrlPage1", ["$scope", "$templateCache", function($scope, $templateCache) {
        /* 用這種方式，ng-include配合，根據(jù)業(yè)務(wù)邏輯動態(tài)獲取頁面內(nèi)容 */
        /* !!!動態(tài)的定義controller!!! */
        app.providers.$controllerProvider.register("ctrlPage1Dyna", ["$scope", function($scope) {
            $scope.openAlert = function() {
                alert("page1 alert");
            };
        }]);
        /* !!!動態(tài)定義頁面的內(nèi)容!!! */
        $templateCache.put("page1.html", "");
    }]);
}]);

4、動態(tài)加載模塊

采用上面子頁面片段的加載方式存在一個局限，就是各種邏輯（js）要加入到啟動模塊中，這樣還是限制子頁面片段的獨立封裝。特別是，如果子頁面片段需要使用第三方模塊，且這個模塊在啟動模塊中沒有事先加載時，就沒有辦法了。所以，必須要能夠?qū)崿F(xiàn)模塊的動態(tài)加載。實現(xiàn)模塊的動態(tài)加載就是把angular啟動過程中加載模塊的方式提取出來，再處理一些特殊情況。

動態(tài)加載模塊深入分析可以參考這篇文章：
http://www.tuicool.com/articles/jmuymiE

但是，實際跑起來發(fā)現(xiàn)文章中的代碼有問題，就是“$injector”到底是什么？研究了angular的源代碼injector.js才大概搞明白是怎么回事。

一個應(yīng)用有兩個$injector，providerInjector和instanceInjector。invokeQueue和用providerInjector，runBlocks用instanceProvider。如果$injector用錯了，就會找到需要的服務(wù)。

routeProvider中動態(tài)加載模塊文件。

template: "page2
",
resolve: {
    load: ["$q", function($q) {
        var defer = $q.defer();
        /* 動態(tài)加載angular模塊 */
        require(["/test/lazyspa/module1.js"], function(loader) {
            loader.onload && loader.onload(function() {
                defer.resolve();
            });
        });
        return defer.promise;
    }]
}

動態(tài)加載angular模塊

angular._lazyLoadModule = function(moduleName) {
    var m = angular.module(moduleName);
    console.log("register module:" + moduleName);
    /* 應(yīng)用的injector，和config中的injector不是同一個，是instanceInject，返回的是通過provider.$get創(chuàng)建的實例 */
    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);
        }
    });
    /* 用應(yīng)用的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("http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css");
    /* !!! 動態(tài)定義requirejs !!!*/
    require.config({
        paths: {
            "ui-bootstrap-tpls": "http://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 = "";
            dlg += "I"m a modal!";
            dlg += "";
            dlg += "content";
            dlg += "";
            dlg += "";
            dlg += "";
            dlg += "";
            $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"
                });
            };
        }]);
        /* !!!動態(tài)加載模塊!!! */
        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

spa-loader.js

window.loading = {
    finish: function() {
        /* 保留個方法做一些加載完成后的處理，我實際的項目中會在這里結(jié)束加載動畫 */
    },
    load: function() {
        require.config({
            paths: {
                "domReady": "/static/js/domReady",
                "angular": "http://cdn.bootcss.com/angular.js/1.4.8/angular.min",
                "angular-route": "http://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);
        /* 應(yīng)用的injector，和config中的injector不是同一個，是instanceInject，返回的是通過provider.$get創(chuàng)建的實例 */
        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);
            }
        });
        /* 用應(yīng)用的injector運行模塊的run */
        angular.forEach(m._runBlocks, function(fn) {
            $injector.invoke(fn);
        });
    };
    app.config(["$injector", "$locationProvider", "$routeProvider", "$controllerProvider", function($injector, $locationProvider, $routeProvider, $controllerProvider) {
        /*＊
         ＊ config中的injector和應(yīng)用的injector不是同一個，是providerInjector，獲得的是provider，而不是通過provider創(chuàng)建的實例
         ＊ 這個injector通過angular無法獲得，所以在執(zhí)行config的時候把它保存下來
        */
        app.providers = {
            $injector: $injector,
            $controllerProvider: $controllerProvider
        };
        /* 必須設(shè)置生效，否則下面的設(shè)置不生效 */
        $locationProvider.html5Mode(true);
        /* 根據(jù)url的變化加載內(nèi)容 */
        $routeProvider.when("/test/lazyspa/page1", {
            template: "page1
",
            controller: "ctrlPage1"
        }).when("/test/lazyspa/page2", {
            template: "page2
",
            resolve: {
                load: ["$q", function($q) {
                    var defer = $q.defer();
                    /* 動態(tài)加載angular模塊 */
                    require(["/test/lazyspa/module1.js"], function(loader) {
                        loader.onload && loader.onload(function() {
                            defer.resolve();
                        });
                    });
                    return defer.promise;
                }]
            }
        }).otherwise({
            template: "main",
        });
    }]);
    app.controller("ctrlMain", ["$scope", "$location", function($scope, $location) {
        console.log("main controller");
        /* 根據(jù)業(yè)務(wù)邏輯自動到缺省的視圖 */
        $location.url("/test/lazyspa/page1");
    }]);
    app.controller("ctrlPage1", ["$scope", "$templateCache", function($scope, $templateCache) {
        /* 用這種方式，ng-include配合，根據(jù)業(yè)務(wù)邏輯動態(tài)獲取頁面內(nèi)容 */
        /* 動態(tài)的定義controller */
        app.providers.$controllerProvider.register("ctrlPage1Dyna", ["$scope", function($scope) {
            $scope.openAlert = function() {
                alert("page1 alert");
            };
        }]);
        /* 動態(tài)定義頁面內(nèi)容 */
        $templateCache.put("page1.html", "");
    }]);
    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("http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css");
    require.config({
        paths: {
            "ui-bootstrap-tpls": "http://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 = "";
            dlg += "I"m a modal!";
            dlg += "";
            dlg += "content";
            dlg += "";
            dlg += "";
            dlg += "";
            dlg += "";
            $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);
        }
    };
});

寫后感

年初定下的目標(biāo)是堅持每周寫一篇自己在開發(fā)過程碰到的問題總結(jié)，本以為是個簡單的事情，寫起來才發(fā)現(xiàn)寫文章的時間比寫代碼的花的時間還要長。因為寫代碼的時候只要功能實現(xiàn)了就行了，但是，寫文章的時候就一定要把代碼搞清楚才敢寫，實際上就是逼著自己要認(rèn)真研究源代碼，雖然壓力很大，但收獲更大。另一方面，發(fā)現(xiàn)找到一個好題目挺難的，只是簡單的貼別人的代碼沒意思，可是自己想出來有價值，有意思的問題挺難的。因此大家要是覺得有啥有意思，有價值前端問題，分享一下吧，給我的年度寫作計劃幫幫忙

GPU云服務(wù)器云服務(wù)器 angularjs加載數(shù)據(jù) 按需加載按需加載javascript webpack按需加載

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/78737.html

發(fā)表評論

登陸后可評論

0條評論

TerryCai

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow_hub

閱讀 777·2023-04-25 15:49
主機(jī)的網(wǎng)絡(luò)號是什么-電腦主機(jī)號是什么？

閱讀 3206·2021-09-22 15:13
DogYun狗云：韓國獨立服務(wù)器300元/月;e5-2630L*2/16g內(nèi)存/480G SSD+1

閱讀 1370·2021-09-07 10:13
《第五屆中國CSSConf開發(fā)者大會》參會總結(jié)

閱讀 3536·2019-08-29 18:34
塊級格式化上下文(BFC)

閱讀 2619·2019-08-29 15:22
XML 實體擴(kuò)展攻擊

閱讀 568·2019-08-27 10:52
vue開發(fā) 請求本地JSON數(shù)據(jù)

閱讀 753·2019-08-26 18:27
h5 video radio 檢測

閱讀 3105·2019-08-26 13:44

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

angularjs+requirejs實現(xiàn)按需加載的全面實踐

相關(guān)文章

**avalon 單頁面程序（種子工程）之一用requirejs引入avalon**

angularjs學(xué)習(xí)筆記——使用requirejs動態(tài)注入控制器

avalon 單頁面程序（種子工程）之二按需加載和路由系統(tǒng)

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

Regularjs是什么

發(fā)表評論

0條評論

TerryCai

男|高級講師

TA的文章

tensorflow_hub

主機(jī)的網(wǎng)絡(luò)號是什么-電腦主機(jī)號是什么？

DogYun狗云：韓國獨立服務(wù)器300元/月;e5-2630L*2/16g內(nèi)存/480G SSD+1

《第五屆中國CSSConf開發(fā)者大會》參會總結(jié)

塊級格式化上下文(BFC)

XML 實體擴(kuò)展攻擊

vue開發(fā) 請求本地JSON數(shù)據(jù)

h5 video radio 檢測

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

angularjs+requirejs實現(xiàn)按需加載的全面實踐

I"m a modal!

I"m a modal!

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！