ionic 2 介紹

時間 2019-11-16

標籤 ionic 介紹简体版

原文原文鏈接

1、兼容性

根據官方說明，支持的平臺和最低版本以下：javascript

Ionic 1

iOS 7+
Android 4.1+

Ionic 2

iOS 8+
Windows 10 Universal App
Android 4.4+ （使用Crosswalk能夠最低支持4.1）

官方說明html

2、性能對比

根據官方文檔，再也不經過使用 JavaScript 的 scrolling，應用在 iOS 和 Android 滑動時幀率能夠達到60FPS，這得益於2.0 final 版實現的 Virtual Scroll。java

經過列表建立10000個items，Ionic 一、Ionic 二、Native 的表現以下：web

Ionic 1

和 Native 相比不是很流暢，區別明顯。typescript

Ionic 2

和 Ionic 1 相比明顯流暢不少，接近原生。編程

3、Ionic 2 相比 Ionic 1 的優勢

一、組織結構清晰

Ionic 1 的文件組織結構：瀏覽器

Ionic 2 的文件組織結構：安全

經過這種默認的文件組織，一切很是整潔、有條理，也更容易構建模塊化的代碼。angular2

二、更強大的 CLI 工具

經過 Ionic 2 CLI 便可自動生成須要的 pages、providers、tabs、pipes 而且會配置好須要的文件和必要的代碼，好比以下命令：app

ionic g page MyPage

便可生成以下組織的文件：

my-page.ts 內生成的代碼以下：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
 
@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
 
  }
}

三、調試更方便

Error Handling：

當開發時遇到編譯錯誤，經過ionic serve命令，詳細的錯誤信息會直接顯示在瀏覽器窗口。

Ionic Serve Lab：

經過ionic serve --lab命令，可預覽應用在不一樣平臺的顯示效果：

四、導航跳轉

Ionic 1 中跳轉是經過 URLS 來進行：

.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("/");
 
});

而後經過 activate 這些 states 來連接到這些 URLS，而 Ionic 2 不一樣於 Ionic 1 的這種 web 式的跳轉，而是經過 pages 的 pushed 和 popped，更 native 一些：

this.nav.push(MyPage);

五、語法更簡潔

Ionic 1:

![]({{photo.image}})

Ionic 2:

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

Ionic 1:

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

Ionic 2:

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

六、語言更簡單安全

Ionic 2 建議使用 TypeScript 進行開發，這樣能夠享受到ES6帶來的簡潔語法和泛型等安全特性，以使構建大型項目更安全、穩定、易於調試。

4、Ionic 2 相比 Ionic 1 的缺點

Ionic 2 相比 Ionic 1，打包後的 app size 會大很多。

5、ES6 新特性

一、Classes

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

二、Modules

//  lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593
 
//  someApp.js
import * as math from "lib/math"
console.log("2PI = " + math.sum(math.pi, math.pi))
 
//  otherApp.js
import { sum, pi } from "lib/math"
console.log("2PI = " + sum(pi, pi))

三、Promises

doSomething().then((response) => {
    console.log(response);
});

四、Block Scoping

for (let i = 0; i < a.length; i++) {
    let x = a[i];
}

五、Fat Arrow Functions

someFunction((response) => {
    console.log(response);
});

這樣就能避免不少this的坑，好比：

var me = this;

someFunction(function(response){
    console.log(me.someVariable);
});

6、TypeScript 特性

TypeScript 是由微軟開發的一種基於 JavaScript 語法的語言，且已經支持了 ES6 、 ES7 語法。你能夠理解它爲 JavaScript 的超集，也能夠理解爲 JavaScript 的加強版。

它主要解決了如下問題：

一、編譯期類型檢查

JavaScript 代碼:

var name;                   //定義變量

function getName(type) {    //定義函數
    return ...
}

class Person {              //ES7 下的類定義
    name = '';
    age = 18;

    getName() {
        ...
    }

    getAge() {

    }
}

TypeScript 代碼：

var name: string; //定義變量

function getName(type: string):string {  //定義函數
    return ...
}

class Person {              //類定義
    private name: string = '';
    private age: number = 18;

    public getName(): string {
        ...
    }

    public getAge(): number {

    }
}