使用Angular2理由

時間 2019-11-08

標籤使用 angular2 angular 理由欄目 AngularJS 简体版

原文原文鏈接

1. 組件化

組件化編程是web 發展的一個趨勢，Angular2提供高效簡單的組件開發方式，使程序開發更加關注業務邏輯的實現，而不用關心如何加載組件和模塊，如何引用及依賴注入的實現等。javascript

以下代碼所示，Angular2提供註解來開發組件，使組件開發變得簡單方便，不須要對現行代碼進行重大重構或者改寫，就可使用新的功能。Angular2關注與組件的開發，經過組件間的組合來實現業務邏輯，代碼關注點更加集中，從而使得組件編程變得異常簡單。html

import {Component} from '@angular/core';java

import {bootstrap} from '@angular/platform-browser-dynamic';angularjs

@Component({web

selector: 'my-app',ajax

template: `<h1>My First Angular 2 App</h1>`算法

})chrome

export class AppComponent {編程

--business logic herejson

}

bootstrap(AppComponent);

2. 純粹的JS

經過上面的示例，能夠發現 Angular2使用純粹的javascript代碼編寫，調用的方式採用原生的window api，沒有其餘額外的代碼特性。使用原生的javascript代碼便可編寫，減小了Angular1裏面$scope，$timeout等非原生API，這使得開發，測試等環節都變得簡單，下降了學習成本。由於採用的都是原生API的方式，Angular2 不只可以本身寫代碼片斷，並且能夠方便的引用他人所寫的代碼。

3. 類型編程

Angular2不必定要使用TypeScript來編寫，然而爲何咱們要使用一種瀏覽器沒法識別的語言，而後編譯成另一種語言去使用呢？答案就是：類型檢查，文檔化，便於共享。

舉個簡單的例子，這個例子十分簡單，簡單的計算兩個數字的和，並將結構返回。看上去木有什麼問題，可是咱們傳遞的參數有可能來自於某個對象或者json數據，當咱們將非數字傳遞進去的時候，獲得的結果卻不盡人意。

function plus(a, b) {

return a + b;

}

let a = plus(2+3); // a = 5

let b = plus(‘2’+’3’); // a = ‘23’

當咱們使用TypeScript進行編寫這段代碼的時候，傳入非數字類型的參數時在解析的過程當中就會提示類型錯誤。

function plus(a:number, b:number):number {

return a + b;

}

let a = plus('2'+'3'); // error

4. 性能提高

在Angular1中，絕大多數場景下性能都不是問題，不過由於其代碼中存在的一個用來實現髒檢查的三重循環而飽受抨擊。因而，在Angular 2中，經過從新設計和引入新技術，從原理上對速度進行了提高，據官方說是把「變動檢測」的效率提高了500%，在「變動檢測」算法上作了兩項主要的改進：

(1). 在設計上，將之前的「多輪檢查、直到穩定」策略直接轉變爲「一輪檢查、直接穩定」策略。

(2). 在實現上，把「變動檢測」算法移入了由WebWorker建立的輔助線程中執行，從JavaScript主線程隔離開來，執行完「變動檢測」，再通知主線程。

舉一個對比的例子，數據量是30*500：

ng1核心代碼

<head>

<title>Angular1 Example</title>

angular

.module('app', [])

.controller('appCtrl', function($scope, $interval) {

var gridWidth = 30;

var gridHeight = 500;

var interval = 50;

var changePerInterval = 10000;

var names = ['Joe', 'Michael', 'David', 'Jones', 'Phil', 'Johnson', 'Janes', 'Anna', 'Hugo', 'Lina', 'Scotte', 'Nam', 'Tran',

'Bill', 'Mark', 'Rihanna', 'Justin', 'Bieber', 'James', 'Cameron', 'Peter', 'Anderson', 'Ronaldo', 'Scholes', 'Giggs',

'Lee', 'Cedric', 'Young', 'Zim', 'Hue', 'Zac', 'Jonas', 'Miley', 'Thomas', 'September', 'Green', 'Red', 'Rose', 'Pink'];

$scope.grid = createGrid();

beginDataChanges();

function createGrid() {

var grid = [];

for (var row = 0; row < gridHeight; row++) {

grid[row] = [];

for (var column = 0; column < gridWidth; column++) {

grid[row].push(getRandomName());

}

return grid;

}

function getRandomNumber(maxBound) {

return Math.floor(Math.random() * maxBound);

}

function getRandomName() {

var i = getRandomNumber(names.length);

return names[i];

}

function beginDataChanges() {

$interval(function() {

$scope.grid = createGrid();

}, interval);

}

});

</script>

</head>

<table>

</td>

</tr>

</table>

</body>

</html>

ng2 核心代碼

export class AppCmp {

private grid: any;

private gridWidth = 30;

private gridHeight = 500;

private interval = 50;

private changePerInterval = 10000;

private names = ['Joe', 'Michael', 'David', 'Jones', 'Phil', 'Johnson', 'Janes', 'Anna', 'Hugo', 'Lina', 'Scotte', 'Nam', 'Tran',

'Bill', 'Mark', 'Rihanna', 'Justin', 'Bieber', 'James', 'Cameron', 'Peter', 'Anderson', 'Ronaldo', 'Scholes', 'Giggs',

'Lee', 'Cedric', 'Young', 'Zim', 'Hue', 'Zac', 'Jonas', 'Miley', 'Thomas', 'September', 'Green', 'Red', 'Rose', 'Pink'];

constructor() {

this.grid = this.initializeGrid();

this.beginDataChanges();

}

initializeGrid() {

var grid = [];

for (var row = 0; row < this.gridHeight; row++) {

grid[row] = [];

for (var column = 0; column < this.gridWidth; column++) {

grid[row].push(this.getRandomName());

}

return grid;

}

getRandomNumber(maxBound) {

return Math.floor(Math.random() * maxBound);

}

getRandomName() {

var i = this.getRandomNumber(this.names.length);

return this.names[i];

}

beginDataChanges() {

setInterval(() => {

this.grid = this.initializeGrid();

}, this.interval);

}

在chrome查看性能分別是：ng1的平均時長是360ms左右，ng2的平均時長是260ms左右，性能提高100ms，雖然木有達到500%，可是提高仍是有較大的優化。

ng1性能：

ng2性能：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。