Ionic2優於Ionic1的6個理由

        若是你已經熟悉Anguar1和Ionic1，那麼請不要囂張（陝西話叫zhang，二聲。東北話叫嘚瑟，河南話叫啥？回家問問我媽再告訴你！），聽小明在這裏慢慢跟你說，Angular2是一個全新的框架，它從ReactJS以及其餘web移動框架借鑑了很多經驗和優勢，巨大的改進使得開發體驗和性能已經超越了Angular1，並且Ionic2不管是從UI交互效果和跨平臺的差別性都優於Ionic1，若是你繼續爲維護Ionic1的項目我我沒法阻擋，可是若是你正在再發新的APP跨平臺項目，我建議你考慮一下Ionic2。

        1.組織結構和框架

        在Ionic2中，每一個組件、頁面都只專一於作一件事，它單獨有本身的一個目錄，有本身的類（Class）、模板文件（Template）和本身的樣式文件（在這裏咱們提倡使用scss）。下面咱們看一下在Ionic2中一個小模塊是怎樣的結構：

      
home.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController) {
  
  }
}

home.scss

.home {
    &.xxx{

    }
    
    .xxx{


    }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home">
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>app/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
</ion-content>

        ionic2的架構使得「單一職責原則」獲得了體現，組件、頁面之間相互獨立，有利於內聚和解耦。

2.命令行工具

在開發中，咱們總但願可以有一個規範使得咱們的開發更具備合理性，同時還能提高咱們的開發效率，那麼ionic2的CLI徹底能夠知足你這一點。

ionic generate page MyPage

或者

ionic g page MyPage

       咱們看一下EM6的代碼生成結果：

import {Page, NavController} from 'ionic-angular';
 
@Page({
  templateUrl: 'build/pages/my-page/my-page.html',
})
export class MyPagePage {
  static get parameters() {
    return [[NavController]];
  }
 
  constructor(nav) {
    this.nav = nav;
  }
}

         在Ionic2中咱們經常使用的有component、page、pipe、provider等，CLI會根據需求生成模板代碼，並放置在規範的目錄下。在這裏須要說明一下，ionic2的風格與Angular2格稍有不一樣，可是但願你可以求同存異，由於我以爲angular2也頗有代理，它提倡文件的命名是帶有.後綴的，如組件：xxx.component.ts、管道：xxx.pipe.ts、服務：xxx.service.ts等，詳情能夠查看angular官方文檔。

        3.路由導航

        Ionic2的路由導航不一樣於Ionic1，咱們都知道其實Anngular1自帶理由是比較弱的，在複雜路由跳轉的app中，是很吃力的，咱們通常都是依賴Angular1的插件ui-router，它是基於URL的hash（固然官方也提供配置切換到html5模式），那麼ionic1也是在這個基礎之上進行導航封裝的，好比說頁面導航堆棧。

        ionic1的路由設置：

.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
  .state('intro', {
    url: '/',
    templateUrl: 'templates/intro.html',
    controller: 'IntroCtrl'
  })
  .state('main', {
    url: '/main',
    templateUrl: 'templates/main.html',
    controller: 'MainCtrl'
  });
 
  $urlRouterProvider.otherwise("/");
 
});

        可是若是你使用Ionic2，事情就變得務必簡單，你能夠經過導航的push方法入棧頁面，和pop方法出棧頁面，所以你能夠在Ionic2中你能夠實現複雜導航。

this.nav.push(MyPage);

        4.模板的語法結構

        ionic2的模板語法與Ionic1很是類似，可是看起來又有點古怪，其實Ionic2的模板語法更爲簡潔。咱們來看一下對比。

        ionic1：

<img ng-src="{{photo.image}}" />

        ionic2：

<img [src]="photo.image" />

        咱們看一下 事件調用：

        ionic1：

<button ng-click="doSomething()">

        ionic2：

<button (click)="doSomething()">

        5.它僅僅是javascript而已

        ionic1和angular1都有一些特定的語法，可是追其根本只不過是javascript，也許你對EM6認識不是很深，可是你改變不了它是ECMAscript標準的事實，也就是說做爲一個web前端開發的你，逃不了要學習這項新的語言，若是你感興趣你可能夠試試Typescript，若是你曾經作事後臺開發，我敢確定你會愛上它，那麼你使用ionic2的同時，你是在熟悉將來web的新標準，它會讓你成爲一個更好的web前端開發者。直到如今仍然有很大一部分前端開發人員不知道angular，不知道reactjs，甚至EM6和typescript，因此你應該感覺到一絲優越感。

        可是從使用上，EM6/ TS可以讓你避免不少問題，好比說：

        jsvascript：

this.someData = null;
 
var me = this;
 
doSomething(function(data){
    me.someData = data;
});

        看到了麼？你問了使用this指針，不得不在函數外面做爲變量me的引用，可是你使用了EM6:

this.someData = null;
 
doSomething((data) => {
    this.someData = data;
})

        6.編譯

        ionic從平臺上講是基於cordova的封裝（ 不只僅是它的CLI ），所以ionic工程也是一個標準的cordova工程，也就是說咱們最終給跨平臺提供的是www目錄的資源文件，可是在ionic2中咱們都是在www的同級目錄的app目錄進行編碼，也是由於咱們使用EM6或Typescript寫的代碼瀏覽器並不可以直接執行，若是你本身觀察ionic2的工程目錄，你會發現Gulp.js的腳本多了幾個任務的定義，實際上是幾個ionic的鉤子命令，如ionic serve，ionic build之類的，其目的是在咱們打包，或者瀏覽器模擬時的 命令執行以前，執行一些gulp任務，其中就是對typescript、scss的編譯，是否是感受很方便，並且最終合併編譯到www/build/js目錄下，而且很難反編譯，也就是說你的app若是被人解包，他只能運行，但若是想拿到你的源碼是至關困難的。

        總結

        毫無疑問，我是比較建議你們使用Ionic2的，也許在使用過程當中你會發現諸多問題，可是我以爲最終都能的到解決，還有就是從性能上，仍是會比ionic1提高甚多，可是毫不是有人說的10-100倍，沒那麼誇張，咱們的angular框架或者reactjs其實在移動前端方面正在追求極致，既考慮到的開發的易用性，又考慮運行的流暢性，不少思惟和架構是值得咱們去深究的。