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其实在移动前端方面正在追求极致，既考虑到的开发的易用性，又考虑运行的流畅性，不少思惟和架构是值得咱们去深究的。