搜尋
首頁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的起源:探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後:什麼語言能力JavaScript?幕後:什麼語言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來:趨勢和預測Python和JavaScript的未來:趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能