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>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  • 英文原文:Skills JavaScript Developers Should Learn in 2016译者:...
    IT程序狮阅读 1,853评论 1 17
  • Gitbook Repo 撰写本文的时候笔者阅读了以下文章,不可避免的会借鉴或者引用其中的一些观点与文字,若有冒犯...
    王下邀月熊阅读 1,068评论 1 9
  • 早上6:00起床晨跑5000步。 8:00送女儿到学校。 8:30分到公司、按排大家做了一个卫生大扫除。 13:0...
    陈诚chen阅读 149评论 0 0
  • 说“请保持安静”好于“请不要打扰我”,而“请不要打扰我”又好于“不要吵”,效果却也是微之甚微。当我说我需要安静(说...
    PC静静阅读 180评论 0 0
  • “邓肯退役了。” 某一天快睡觉的时候,老婆在床上随口念了一条微博。 “是么。” 对于这个新闻,其实我并没有什么兴趣...
    安迪FUL阅读 998评论 12 9