Ionic2优于Ionic1的6个理由

Posted 2020-08-07

经历了一个从0到有的app的开发，我已经很熟悉Ionic1了，在此期间我曾发现过Ionic1的一些bug，和一些不合理的地方（根基版本 不同，后续我会陆续发表这些文章），我甚至在此期间对Ionic1进行代码改造和Hack，或者对其组件进行增强和封装，在onic2刚刚发布的时候，我 就已经迫不及待的欣赏它的新特性，但是我为此不得不再学习另外一个框架。

如果你已经熟悉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其实在移动前端方面正在追求极致，既 考虑到的开发的易用性，又考虑运行的流畅性，很多思维和架构是值得我们去深究的。