走近Google的Angular 2 JavaScript框架 : 让你可以选择自己喜欢的语言开发web应用。


两年前,Google就表示要重写AngularJS,那是AngularJS已经是非常流行的JavaScript框架了,现在新的版本Angular 2终于有了一版马上要完成的测试版了。

Angular 2从专业的角度,既整合了前一版本的优点也面向未来的应用标准,现在让我们看看该框架的一些亮点吧。


更加面向web组件化,更容易使用

在AngularJS里,几乎所有的页面展示都是使用页面标签完成的,这些标签从简单的ngIF可以用来简单的进行
控制页面的显示或隐藏到复杂的例如ngBind负责的数据绑定,同时你也需要生成你自己的标签来对元素进行自定义实现,或是定制页面的展示模板。

在Angular 2则用组件来替换了标签,这更符合未来的web组件化开发规范,其中包括Shadow,DOM和HTML import等,同时组件模式也已经被很多优秀的JavaScript库所采用。

当你比较AngularJS的标签模式和Angular 2的组件模式,它们在表面上非常类似,但是本质是非常不同的:


下面是AngularJS 的代码片段:

angular.module('App', [])
 .directive('example', function() {
   return {
     template: '<p>Some DOM content</p>'
   };
 });

 下面是Angular 2的代码片段:

 var AppComponent = ng
 .Component({
   selector: 'my-app',
   template: '<p>Some DOM content</p>'
 })
 .Class({
   constructor: function () { }
 });


作为面向web组件的开发标准,目前仍有一些问题,浏览器厂家需要为这个标准的实施做更多的工作,但是作为一个客户端应用的框架,web组件模式相比之下是比较优秀的,是好的选择。

借用接口化的组件模式允许程序的业务处理与展现被模块化,更便于测试和复用,而且使用Angular 2的开发者可以让他们开发的组件与其他的第三方web组件兼容,例如Polyer和X-tag所以Angular2为开发人员提供了很好的代码重用的好处。

Angular 2使一个高性能的框架,它提供了让你的web组件与你的应用实现很好整合的能力,框架的提供者会管理框架的标准与兼容问题。



事件驱动的编程风格


Angular 2使用了基于数据流的事件驱动模式,来替换你在mv*框架里见到的面向对象的模式,事实上,数据流是你在Angular 2里见到的最具亮点的特性。

它开始于框架如何获取数据: 被动方式与主动方式,主动方式是一个异步处理的过程,只有第一步完成,才会进入下一步,相反的主动方式是一个推荐的处理方式,因为它允许对数据流进行订阅。
在讲到数据流的时候Rob Wormald提供了一个同时使用AngularJS和Angular 2处理用户检索任务的小例子,表现出Angular 2可以在用户输入的时候可以更好的实时显示出目标数据,同时也减少了对web 请求的次数。

下面是简化的搜索例子的代码比对:

AngularJS 代码:

// change event to be fired
// whenever the search box value changes
// creating timeouts to debounce the request
onSearchChanged() {
 var searchText = this.searchText;
 if(typeof this.searchTimeout !== 'number') {
   clearTimeout(this.searchTimeout);
   this.searchTimeout = null;
 }
 this.searchTimeout = setTimeout(() => {
   this.doSearch(searchText);
   this.searchTimeout = null;
 }, 200)
}

doSearch(searchText) {
 this.currentRequest = fetch('/someendpoint?search=${searchText}')
     .then(res => res.json())
     .then(results => this.searchResults = results)
}

Angular 2代码:

this.searchResults = Observable.from((<EventEmitter>this.searchText.valueChanges).toRx())
   .debounceTime(200)
   .switchMap((val:string) => myService.load(val))
   .merge(this.clear.toRx().mapTo([]));

正如你看到的,一个简单的回应动作(debounceTime)被提供给了 Angular 2来实现对用户的相应,而AngularJS则是取数据给this.searchResults.

为了实现主动模式和回应处理,Angular 2借助了RxJS的下一代版本,这意味Angular 2用户可以从访问这一回应工具(reactive tooling)的过程中获益。

编译性框架,让你可以自由的选择用何种语言开发

 Angular 2可以把其他语言编译成JavaScript因此你可以选择你喜欢的语言来进行前台页面脚本开发,在最新的Angular 文档中,你也许会注意到,有个下拉框,让你可以选择:JavaScript, TypeScript, or Dart.
而Angluar 2 也是用TypeScript编写的。

呼应式编程(Reactive programming)正在兴起 在web应用开发中,基于web组件的开发模式会得到更多的认可,虽然目前浏览器厂家还没有推出成熟的方案来支持这样的开发模式。 




上海数狐信息技术有限公司
您身边的学习服务专家