ionic2vs.ionic1性能、新工具與進(jìn)步

Ionic2vs.Ionic1 性能、新工具與進(jìn)步Ionic項(xiàng)目目前在 Github 上已經(jīng)有超過(guò) 27,000 顆star，成為全球最受歡迎的 50大開(kāi)源項(xiàng)目之一。日前，Ionic發(fā)布，作者經(jīng)過(guò)一段時(shí)間的嘗試，認(rèn)為現(xiàn)在正是幫助你理解Ionic2 和Ionic1 之間差異的最好時(shí)機(jī)。簡(jiǎn)單來(lái)說(shuō)，Ionic2就是完全使用Angular2.x重寫(xiě)了Ionic1。文中從以下幾點(diǎn)介紹了兩者間的差異：性能提升Ionic1基于Angular1.x，而Ionic2則基于Angular2.x。意味著使用Ionic2能享受到Angular2.x帶來(lái)的顯著性能提升。在Angular2.x中，其優(yōu)化了ChangeDetection策略。所有的Ionic2控件都采用的 OnPush 策略，避免了組件樹(shù)不必要的檢測(cè)，提高了性能。如果想詳細(xì)了解 Angular 的ChangeDetection，可以閱讀這篇文章。如果想了解如何提升 Ionic1應(yīng)用的性能，可以閱讀 UltimateAngularJSandIonicperformancecheatsheet.

另外，

Angular2.x

還有著更快的DOM

性能：新的

Web

動(dòng)畫(huà)

API

雖然

Ionic2

和

Ionic1都還是依賴于

CSS

實(shí)現(xiàn)動(dòng)畫(huà)效果，但因?yàn)?/p>

Ionic2

是基于Angular2.x

的，所以開(kāi)發(fā)人員可以使用新的

WebAnimations(W3C)API 。雖然目前還不是所有的瀏覽器都支持，但可以通過(guò) polyfill 來(lái)在不支持的瀏覽器中使用。并且Angular2.x 的動(dòng)畫(huà) API，能很方便的定義復(fù)雜動(dòng)畫(huà)，并通過(guò)回調(diào)方法訪問(wèn)動(dòng)畫(huà)的生命周期：@Component({template:`(@flyInOut.start)='animationStarted($event)'(@flyInOut.done)='animationDone($event)'[@flyInOut]=''in''>{{}}`,animations:[trigger('flyInOut',[state('in',style({opacity:1,transform:'translateX(0)'})),transition('void=>*',[style({opacity:0,transform:'translateX(-100%)'}),animate('0.2sease-in')]),transition('*=>void',[animate('0.2s10ease-out',style({opacity:0,transform:'translateX(100%)'}))])])]})支持原生滾動(dòng) Ionic2 支持，直接監(jiān)聽(tīng) WebView 上的滾動(dòng)事件，不用再模擬那些事件了 （JavaScriptscrolling ）。雖然，由于兼容性的原因，

JavaScriptscrolling

目前仍然還是必須的，但新版本的

Chromium(Android)

和

WKWebView(iOS) 都已支持了原生滾動(dòng)（ nativescrolling ）。原生滾動(dòng)的支持也帶來(lái)了更好的性能和更平滑的滾動(dòng)體驗(yàn)。TypeScriptIonic2支持了TypeScript（JavaScriptES2015的一個(gè)超集），因此在Ionic2中你可以享受到TypeScript和JavaScriptES2015所帶來(lái)的便利。CLIv2IonicCLIv2新增了直接通過(guò)命令來(lái)生成頁(yè)面、組件等等東西。比如，直接通過(guò)命令創(chuàng)建一個(gè)名為 MyPage 的頁(yè)面：$ionicgeneratepageMyPageCreatesrc/pages/my/my.htmlCreatesrc/pages/my/my.tsCreatesrc/pages/my/my.scss這句命令生成了三個(gè)文件， HTML 頁(yè)面、SASS- 組件樣式、TypeScript-

頁(yè)面邏輯。當(dāng)在一個(gè)團(tuán)隊(duì)中工作時(shí)，使用

CLI來(lái)生成模板對(duì)于項(xiàng)目的規(guī)范很有幫助。優(yōu)化打包

Ionic1

的打包依賴于

Gulp

，而

Ionic2

則選擇了

NPMScript

。Ionic提供了他們自己的腳本集合并開(kāi)源了出來(lái)：ionic-app-scriptsionic-app-scripts 是為了讓開(kāi)發(fā)者們不再困擾于打包配置，你的項(xiàng)目與 ionic2 所需唯一的依賴就是@ionic/app-scripts（當(dāng)然你還是可以自定義的去配置屬性）。Ionic2相對(duì)于Ionic1是一個(gè)巨大的進(jìn)步，在性能和開(kāi)發(fā)效率上都提升很大。如果你對(duì)混合開(kāi)發(fā)App感興趣的話，Ionic2