搜尋
首頁web前端js教程5分鐘到最小的角度代碼與咕unt聲

5 Minutes to Min-Safe Angular Code with Grunt

網頁性能優化是每個 Web 應用開發者都關注的首要問題。 Grunt 等任務運行器在開發過程中扮演著關鍵角色,它們自動化了代碼拼接和壓縮等任務,這也是本教程的重點。我們將使用一系列 Grunt 插件來確保 AngularJS 應用能夠安全地進行壓縮。在討論 AngularJS 和壓縮之前,我想強調一點,所有技能水平的開發者都能從本教程中受益,但最好具備 Grunt 的基礎知識。在本文中,我們將使用 Grunt 生成新文件夾,因此 Grunt 新手也能很好地了解其工作原理。

關鍵要點

  • 像 Grunt 這樣的任務運行器自動化了代碼拼接和壓縮,優化了開發過程中的頁面速度。 Grunt 插件確保 AngularJS 應用能夠安全地進行壓縮。
  • 默認情況下,AngularJS 應用並非壓縮安全的,必須使用數組語法編寫。當 UglifyJS 運行時,它會重命名參數,但數組中 DI 註解的存在阻止了它們被重命名,確保重命名的參數仍然可以訪問必要的依賴項。
  • Grunt 可用於自動化 AngularJS 應用的註解、拼接和壓縮過程。安裝必要的插件並將 Grunt 配置為讀取“package.json”文件後,任務將被加載和註冊。然後配置插件以定位特定文件。
  • Grunt 通過自動化捕獲和防止錯誤的任務來幫助編寫更安全的 Angular 代碼。它可以在每次保存文件時對代碼運行單元測試,立即向開發者發出錯誤警報。自動化節省了時間,並確保不會忽略重要任務。

Angular 應用壓縮的問題

默認情況下,AngularJS 應用並非壓縮安全的。它們必須使用數組語法編寫。如果您不確定數組語法是什麼,您可能已經編寫過使用它的代碼了。讓我們來看兩個 AngularJS 控制器示例,這兩個控制器正在傳遞 $scope$http 參數。在下面的第一個示例中,模塊的工廠和控制器包裝在以 DI 註解開頭的數組中,如您所見,它不遵循 DRY(不要重複自己)原則。

var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);

在下一個示例中,crud.config 模塊代碼仍然不是壓縮安全的,但代碼比之前的代碼短。它只是命名服務,然後將必要的依賴項作為參數傳遞到函數中,而無需先將它們作為字符串寫出來。只要不進行壓縮,這段代碼就可以正常運行。因此,很容易理解為什麼人們在編寫 AngularJS 代碼時經常選擇這種語法。

var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});

既然您已經了解了這兩段代碼的物理差異,我將快速解釋為什麼這種語法不適合壓縮。

數組表示法的運作方式

如上所述,數組表示法以 DI 註解開頭,這在使代碼壓縮安全方面起著關鍵作用。當 UglifyJS 運行時,它會將我們的參數從 $scope$http 分別重命名為 ab。作為字符串傳遞到數組中的 DI 註解的存在阻止了它們被重命名。因此,這些重命名的參數仍然可以訪問必要的依賴項。如果這些註解不存在,代碼將中斷。如您所見,以這種方式手動編寫代碼非常低效。為了幫助您避免這種情況,我現在將展示如何使用 Grunt 以完全優化的方式對 AngularJS 應用進行註解、拼接和壓縮,並使其準備好用於生產環境。

使用 Grunt

可以在 GitHub 上找到項目的整個存儲庫,包括我們將要定位的文件。對於那些習慣使用 Grunt 的人,可以隨意繼續操作並創建您自己的構建,或將此代碼添加到現有項目中。如果您正在使用空目錄,則必須確保目錄中有一個“package.json”文件。可以通過運行命令 npm init 來創建此文件。一旦您的項目中有了“package.json”文件,就可以通過運行以下命令下載插件:

var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);

這會將 Grunt 安裝到您的項目中,以及我們將使用的三個插件:

  • grunt-contrib-concat
  • grunt-contrib-uglify
  • grunt-ng-annotate

儘管 ng-annotate 可以不用 Grunt 使用,但您很快就會看到 Grunt 使註解、拼接和壓縮代碼的過程多麼無縫。它為壓縮 AngularJS 代碼提供了一個簡單而有效的解決方案。如果您是從頭開始跟踪此項目,則應該在項目根目錄中有一個 Gruntfile.js,它將包含所有 Grunt 代碼。如果您還沒有,請立即創建它。

三步生成壓縮安全的代碼

步驟 1 – 配置 Grunt 以讀取“package.json”文件

要訪問我們之前安裝的插件,您首先需要配置 Gruntfile 的 pkg 屬性以讀取“package.json”文件的內容。 config 對像從 Grunt 包裝函數的頂部開始,在下面的示例中從第 3 行到第 5 行擴展,但很快就會包含大部分代碼。

var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});

步驟 2 – 加載和註冊 Grunt 任務

在配置 Grunt 以讀取我們的“package.json”文件後,需要加載插件,以便 Grunt 可以訪問它們。這是通過將插件的名稱作為字符串傳遞到 grunt.loadNpmTask() 中來完成的。務必確保這些插件是在包裝函數內部config 對象外部加載的。如果沒有滿足這些條件,Grunt 將無法正常工作。接下來我們需要做的是創建一個默認任務,當 Grunt 在沒有特定目標的情況下被調用時將執行此任務。您應該注意添加這些任務的順序,因為它們將根據其配置運行。在這裡,ngAnnotate 配置為首先運行,然後是 concat 和 UglifyJS,我相信這是構建代碼的最佳方式。此外,重要的是要記住,grunt.registerTask() 必須放在加載插件之後。根據我們剛才討論的內容,Gruntfile.js 應該如下所示:

var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);

步驟 3 – 配置插件

ngAnnotate

現在我們的 Gruntfile 已準備就緒,讓我們回到 config 對像中,並指定我們希望 ngAnnotate 插件定位的文件。為此,我們首先必須為 ngAnnotate 創建一個部分並創建一個目標,在本例中稱為 spApp。在此目標中,您將指定要向其添加 DI 註解的文件,以及應將其生成的文件夾。在此示例中,Grunt 將獲取在 public/js 中指定的三個文件,並將它們生成到名為 public/min-safe 的新文件夾中。配置完成後,您可以運行 grunt ngAnnotate 並查看代碼的生成方式。此外,您可以訪問 grunt-ng-annotate 的 GitHub 頁面,並查看它允許您指定的不同選項。

var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});

拼接

現在您已經生成了一個包含新註解的 AngularJS 代碼的文件夾,讓我們繼續通過編譯或將此代碼拼接成一個單一文件。與我們為 ngAnnotate 創建部分的方式相同,我們現在將為 concat 和 UglifyJS 執行相同的操作。與 ngAnnotate 一樣,這兩個任務都接受一個目標,在本例中為 js。可以將許多配置選項傳遞到這些任務中,但我們只是簡單地指定 srcdest 以指向正確文件。正如您可能猜到的那樣,這些插件將獲取傳遞到 src 對象的文件內容,並將它們處理到 dest 後面指定的文件夾中。讓我們嘗試理解這裡發生了什麼。您可以通過在終端中運行 grunt concat 來測試這一點,它應該導致創建 ./public/min/app.js

var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);

壓縮

我們需要做的最後一件事是從代碼中刪除無用的空間,方法是壓縮它。這就是 UglifyJS 插件發揮作用的地方。在使用 UglifyJS 時,我們希望 Grunt 完成壓縮應用程序的最終過程。因此,我們要定位包含所有新拼接代碼的文件,在本例中為 public/min/app.js。要測試這一點,請運行 grunt uglify,並查看您新壓縮的文件。以下是此任務的相關配置:

var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});

在本課程中,我們分別使用了所有這些任務。現在,讓我們使用之前創建的默認任務。它允許 Grunt 按註冊順序一個接一個地運行所有指定的任務。現在,只需在項目中運行 grunt,您的代碼就會被註解、拼接和壓縮。

結論

我希望通過本簡短教程,您能夠很好地理解數組表示法,以及為什麼它對於使 AngularJS 應用壓縮安全至關重要。如果您是 Grunt 新手,我強烈建議您嘗試使用這些插件以及其他插件,因為它們可以節省大量時間。與往常一樣,請隨時在下方發表評論,或者如果有什麼問題,請通過我的個人資料中的地址給我發送電子郵件。

關於使用 Grunt 進行壓縮安全的 Angular 代碼的常見問題解答 (FAQ)

(此處應包含與原文中相同的FAQ部分,但語言更流暢自然)

以上是5分鐘到最小的角度代碼與咕unt聲的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

構建您自己的Ajax Web應用程序構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

10個JQuery Fun and Games插件10個JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味橫生的jQuery遊戲插件,讓您的網站更具吸引力,提升用戶粘性!雖然Flash仍然是開發休閒網頁遊戲的最佳軟件,但jQuery也能創造出令人驚喜的效果,雖然無法與純動作Flash遊戲媲美,但在某些情況下,您也能在瀏覽器中獲得意想不到的樂趣。 jQuery井字棋遊戲 遊戲編程的“Hello world”,現在有了jQuery版本。 源碼 jQuery瘋狂填詞遊戲 這是一個填空遊戲,由於不知道單詞的上下文,可能會產生一些古怪的結果。 源碼 jQuery掃雷遊戲

jQuery視差教程 - 動畫標題背景jQuery視差教程 - 動畫標題背景Mar 08, 2025 am 12:39 AM

本教程演示瞭如何使用jQuery創建迷人的視差背景效果。 我們將構建一個帶有分層圖像的標題橫幅,從而創造出令人驚嘆的視覺深度。 更新的插件可與JQuery 1.6.4及更高版本一起使用。 下載

如何創建和發布自己的JavaScript庫?如何創建和發布自己的JavaScript庫?Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能?如何在瀏覽器中優化JavaScript代碼以進行性能?Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

使用jQuery和Ajax自動刷新DIV內容使用jQuery和Ajax自動刷新DIV內容Mar 08, 2025 am 12:58 AM

本文演示瞭如何使用jQuery和ajax自動每5秒自動刷新DIV的內容。 該示例從RSS提要中獲取並顯示了最新的博客文章以及最後的刷新時間戳。 加載圖像是選擇

Matter.js入門:簡介Matter.js入門:簡介Mar 08, 2025 am 12:53 AM

Matter.js是一個用JavaScript編寫的2D剛體物理引擎。此庫可以幫助您輕鬆地在瀏覽器中模擬2D物理。它提供了許多功能,例如創建剛體並為其分配質量、面積或密度等物理屬性的能力。您還可以模擬不同類型的碰撞和力,例如重力摩擦力。 Matter.js支持所有主流瀏覽器。此外,它也適用於移動設備,因為它可以檢測觸摸並具有響應能力。所有這些功能都使其值得您投入時間學習如何使用該引擎,因為這樣您就可以輕鬆創建基於物理的2D遊戲或模擬。在本教程中,我將介紹此庫的基礎知識,包括其安裝和用法,並提供一

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境