angular 禁止緩衝

標籤：time()   攔截器   控制   modules   wait   ase   actor   調試   一點   

angular 單頁面開發，會存在和管理很多HTML和JS檔案，緩衝有時是個麻煩。

在開發與測試階段，F12調出調試工具，禁止緩衝F5重新整理下就好了。

但是在客戶那裡緩衝就體驗效果不好，甚至認為有問題，聯絡客服，影響工作效率。

主要做幾點就可以了，最主要的一點就是HTML和JS動態載入，點擊菜單時再去載入。

項目中的庫檔案一般不需要管他，一百年不變，解決緩衝的主要是經常變化的部分，

如：修改了頁面配置，前端js邏輯發生變動。。。

最主要的策略是，為項目加版本號碼，不管是HTML還是js、css檔案，更新發布後，

不需要客戶/實施同事 F12清緩衝，只需F5刷一下即可。

1、在首頁面HTML上禁止緩衝

    <meta http-equiv="Expires" content="0">    <meta http-equiv="Pragma" content="no-cache">    <meta http-equiv="Cache-control" content="no-cache">    <meta http-equiv="Cache" content="no-cache">

2、項目主樣式，加版本號碼； <link href="static/iconFont/iconfont.css?v=1" rel="stylesheet"> 

3、require的main檔案管理熱門檔案的版本號碼；

var appVersion = ‘?v=2018.10.1.2‘;require.config({    paths: {        ‘lodash‘: ‘static/lodash.min‘,        ‘jquery‘: ‘static/jquery-1.11.3/jquery.min‘,        ‘jqueryMig‘: ‘static/jquery-migrate-1.4.1.min‘,        ‘autocomplete‘: ‘static/jquery-autocomplete/jquery.autocomplete.min‘,        ‘bootstrap‘: ‘static/bootstrap-3.3.7-dist/js/bootstrap.min‘,        ‘angular‘: ‘node_modules/angular/angular.min‘,        ‘ui-router‘: ‘node_modules/angular-ui-router/release/angular-ui-router.min‘,        ‘select‘: ‘static/bootstrap-select.min‘,        ‘select-zh‘: ‘static/bootstrap-select-zh_CN.min‘,        ‘laydate‘: ‘static/laydate/laydate‘,        ‘layer‘: ‘static/layer/layer‘,        ‘app‘: ‘app.js‘+appVersion,        ‘masterRt‘: ‘01-master/masterRouter.js‘+appVersion,        ‘autoSvc‘: ‘service/autoSvc.js‘+appVersion,        ‘layerSvc‘: ‘service/layerSvc.js‘+appVersion,        ‘datefmt‘: ‘prototype/date.js‘+appVersion,    },    shim: {        ‘bootstrap‘: [‘jquery‘],        ‘jqueryMig‘: [‘jquery‘],        ‘select‘: {deps: [‘bootstrap‘], exports: ‘select‘},        ‘select-zh‘: {deps: [‘select‘], exports: ‘select-zh‘},        ‘ui-router‘: [‘angular‘],        ‘app‘: [‘ui-router‘],        ‘masterRouter‘: [‘app‘],        ‘autocomplete‘: [‘jquery‘,‘jqueryMig‘]    }});

4、動態載入功能頁面HTML時，加版本號碼；即angular攔截器的request時處理；

    app.factory(‘interceptor‘, function ($q, $location) {        return {            request: function (config) {                if (config.url.indexOf(‘/login/‘) === -1 && sessionStorage.session) {                    var session = JSON.parse(sessionStorage.session);                    config.headers[‘id‘] = session.id;                    config.headers[‘token‘] = session.token;                }                // 禁止HTML緩衝                if(config.url.indexOf(‘.html‘) > 0){                    //var nocache = ‘?v=‘ + new Date().getTime();                    var idx = config.url.indexOf(‘?v=‘);                    if(idx === -1)                        config.url += appVersion;                    else{                        config.url = config.url.substr(0, idx) + appVersion;                    }                }                return config || $q.when(config);            },            response: function (response) {                if (response.config.url.indexOf(‘service‘) > -1) {                    //todo 預先處理請求結果                }                return response || $q.when(response);            },            responseError: function (response) {                if (response.status === 401) {// If our response status is unauthorized                    $location.path(‘/main/index‘);// Redirect to the login screen                } else {                    return $q.reject(response);// Reject our response                }            }        };    });

5、動態載入功能頁面的js控制器和依賴js檔案時，加版本號碼；

    // 消極式載入方法    app.loadJs = function (files) {        return {            ctrl: function ($q) {                // 禁止業務模組的js緩衝                //var nocache = ‘?x=‘ + new Date().getTime();                for(var i=0; i<files.length; i++){                    var idx = files[i].indexOf(‘?v=‘);                    if(idx === -1)                        files[i] += appVersion;                    else{                        files[i] = files[i].substr(0, idx) + appVersion;                    }                }                var wait = $q.defer();                require(files, function () {                    wait.resolve();                });                return wait.promise;            }        };    };

6、路由器的每個state定義時，動態載入js處理；

            .state(‘main.login‘, {                url: ‘/login‘,                templateUrl: modulePath + ‘login.html‘,                controller: ‘loginCtrl‘,                resolve: app.loadJs([modulePath + ‘login.js‘])            })

這樣處理完，發布前端項目時，注意修改項目版本號碼，我這裡測試發布在Nginx，轉寄幕後處理的請求。

發布後F5重新整理即可，效果：

 

 

angular 禁止緩衝