使用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性能：