Angular2、Ionic、TypeScript、es6的关系?

自从接触angular2以来,组长就提到了3个对于我来说是新东西的东西:

  • angular2
  • typescript
  • es6
  • ionic

其实对于这3个东西来说,我根本搞不清楚他们之间的关系,突然之间意识到,自己不能再这样搞不清楚关系的就学下去。这样就像angular1似的,自己还是什么都不会,angular1我会用,但是不会讲,你要问我angular1和ionic的关系,我现在也不能讲清楚,说明白。 那么没关系,从小白做起,不会的就问,据说大神们都是乐于分享的。

接下来就是小白贺贺彻底搞清楚这四者的关系,加油!(づ ̄ 3 ̄)づ

es6

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 --阮一峰

ECMAScript和JavaScript的关系

由于JavaScript的创造者Netscae公司的版权问题吧,ECMAScript不能叫Javascript。总之,ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现(另外的ECMAScript方言还有Jscript和ActionScript)。

angular2

AngularJS是一款优秀的前端JS框架**。 AngularJS2是基于typescript来开发的。

在2014年底,Google宣布Angular 2将会对AngularJS进行完全地重写,他们甚至还创建了一门新的语言,名为“AtScript”,他们本来希望使用这门语言来编写Angular 2应用。

但是,随后Microsoft同意在它们的TypeScript语言(JavaScript的一个严格超集)上添加对装饰符(decorator)的支持,所以,它就成为了开发Angular 2框架本身所使用的语言,并且还是使用AngularJS框架开发应用的推荐语言。

另外,我们还可以使用JavaScript(ECMAScript 5和6均可)和Dart来编写Angular 2应用。

除此之外,Angular团队还集成了Microsoft的另外一个产品到Angular 2框架之中,这就是反应型JavaScript扩展(reactive JavaScript extension)的RxJS库。

Angular 2并不是一个MVC框架,而是基于组件(component)的框架。在Angular 2中,应用是松耦合组件所组成的树。

typescript

TypeScript是ES6的超集。至于需不需要使用,在于你所需要的场景。比如在Angular2中,用TypeScript明显好于ES6。 -- 某网友

TypeScript的开发者c#之父,所以这个TypeScript的很多语言特性是从c#中移过来的。TypeScript大概是ES7的实现,所以从语法角度来讲,是具有很大优势。TypeScript可选择编译成ES5或ES3,ts文件编译成js文件,并且ts文件可直接在浏览器中调试。TypeScript还有一大优势是配合宇宙最强编译器VS,开发效率非常高。唯一的不足只是用TypeScript开发的人太少。

ionic

ionic和angular的关系,相信大家一定和我一样好奇,这二者之间的关系是什么呢?自从工作以来,我就知道我们用的东西是angular和ionic,但是我还是不太清楚这二者之间的关系。那么今天就让我把这二者之间的关系搞清楚,不要让他再迷惑我。

其实二者没有什么关系,angular开发的应用可以使用ionic来定义UI,也可以使用其他的来定义UI。

Ionic 是一个强大的 HTML5 应用程序开发框架。号称Advanced HTML5 Hybrid Mobile App Framework 是AngularJS 移动端解决方案 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互。

该框架基于流行的来自于Google的AngularJS框架实现,Ionic利用AngularJS提供应用结构,而Ionic本身则关注用户界面。这意味着所有的视图、应用路由和控制器都是由AngularJS处理的。Ionic为它自己的组件提供了一组指令,因此开发者能够使用Angular创建自定义HTML元素的能力定义Ionic UI组件。

Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“native与HTML5的结合”。

Ionic宣称他们极度强调性能,并且通过限制DOM交互、完全移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。

Ionic仅支持iOS6及更高版本和Android 4.1及更高版本。推送设备的更新换代。

就好像我们公司的同事们还在绞尽脑汁的思考怎么支持ie6一样,我们不能总是这样,要推新技术,那么老设备的淘汰就不可避免,所以必须强烈推进这一点。

总结一下: ES6是Javascript语言的标准,typescript是ES6的超集,Angular2是基于typescript来开发的JS框架。Ionic是一个强大的UI开发框架。

错误更正

由于之前错误的把decorator解释为注解,那么下面就Angular2 中的Annotation和Decorator之间做一个简单的对比性学习。

Annotation

@Component({
  selector: 'tabs'
})
@View({
  template: `
    <ul>
      <li>Tab 1</li>
      <li>Tab 2</li>
    </ul>
  `
})
export class Tabs {
}

我们有一个空的Tabs类,这个类有两个Annotation,@Component@View,如果我们删除了所有的Annotation,剩下的只是一个没有任何特殊意义的空类?如此看来,@Component@View为这个空的类添加一些元数据,以给它一个特定的含义。这就是Annotation,他们是以一个声明的方式将元数据添加到代码中。

@Component这个Annotation告诉Angular,这个类是一个组件,这个@View,给出这个组件关于视图相关信息,在这里,他是一个HTML模板。

Decorator

Decorator是由Yehuda Katz提出的 ECMAScript 7中建议的标准,让你可以在设计时对类和类的属性进行注解和修改,这听起来很像annotation做的事。好吧,让我们来看看什么是decorator?

// A simple decorator
@annotation
class MyClass { }

等等。这看起来酷似一个AtScript Annotation! 对。但事实并非如此。从消费者的角度来看,一个Decorator确实看起来像我们所知道的“AtScript Annotation”。但有一个显著差异。你需要负责装饰你的代码。上面的代码,相应的@annotationDecorator实现看起来应该是这样的:

function annotation(target) {
 // Add a property on target
 target.annotated = true;
}

decorator只是一个函数,让你访问一个需要被装饰的目标。明白了吧?而不是由transpiler来决定你的注释应该怎么转换,我们是负责定义具体的decorator.

当前,我们也可以实现一个decorator同AtScript Annotations(也就是现在typescript)一样为我们的代码添加元数据(我一直提到“AtScript Annotation”,因为他们所做的事情,确实是一个AtScript具体的事情),或者换句话说,<u>通过decorator我们可以创建Annotations.</u>

这里有更加详细的解释:参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

仿百度排列图片预览插件-Simple Lightbox

很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到...

2162
来自专栏腾讯社交用户体验设计

设计师的春天:中文WebFont解决方案Font-Spider(字蛛) - 腾讯ISUX

2753
来自专栏拂晓风起

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

5955
来自专栏互联网数据官iCDO

利用“Google Tag Manager V2”实现滚动追踪

吕东昊,iCDO翻译志愿者 谷歌标签管家第二版本中的滚动追踪功能可谓是另一个搜集访客行为信息的利器,什么是滚动追踪?如何设置并实现追踪?本文将为你一一解答。 ...

3627
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(三)

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

2976
来自专栏申龙斌的程序人生

零基础学编程015:画些有趣的图案

从《零基础学编程014:小海龟做画》中我们学会了基本的做图命令,只需要用上循环语句,就可以画出比较复杂的图案来,比如: from turtle import *...

3609
来自专栏程序员的知识天地

一个Mac系统,能让程序员编程效率提升30%

Mac 系统一向以提供高效的工作环境著称,iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。

2362
来自专栏web前端教室

【聊】我个人眼里的ReactJs生态系统

大家好,今天是周末,写篇短一些的文章,简单的聊一聊Reactjs的生态结构。 所谓某个前端框架的生态结构,其实意思就是说,某个前端框架有许多事情自己做不了,需...

2149
来自专栏java一日一条

为什么JavaScript开发如此疯狂

Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础...

882
来自专栏无原型不设计

简单易用的交互设计工具:摩客串串Chinco

今天给大家介绍一款简单实用的原型交互演示设计工具—摩客串串Chinco。 ? 为什么要介绍这款产品呢? Chinco是继国产原型设计软件Mockplus之...

3077

扫码关注云+社区

领取腾讯云代金券