Ionic2优于Ionic1的6个理由
经历了一个从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其实在移动前端方面正在追求极致,既
考虑到的开发的易用性,又考虑运行的流畅性,很多思维和架构是值得我们去深究的。
Ionic2优于Ionic1的6个理由的更多相关文章
- ionic2简单分析
Angular2是一个全新的框架,它从ReactJS以及其他web移动框架借鉴了不少经验和优点,巨大的改进使得开 发体验和性能已经超越了Angular1,而且Ionic2无论是从UI交互效果和跨平台的 ...
- Node.js的线程和进程
http://www.admin10000.com/document/4196.html 前言 很多Node.js初学者都会有这样的疑惑,Node.js到底是单线程的还是多线程的?通过本章的学习,能够 ...
- [转] Node.js的线程和进程
[From] http://www.admin10000.com/document/4196.html 前言 很多Node.js初学者都会有这样的疑惑,Node.js到底是单线程的还是多线程的?通过本 ...
- Ionic1与Ionic2
1.Ionic2新特性 ①组织结构与框架: 在Ionic2中,每个组件.页面都只专注于做一件事,它单独有自己的一个目录,有自己的类(Class).模板文件(Template)和自己的样式文件(在这里我 ...
- C++ std::vector emplace_back 优于 push_back 的理由
#include <iostream> #include <vector> #include <chrono> #include <windows.h> ...
- ionic2+angular2中踩的那些坑
好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路. 之前写过一篇使用VS2015开发ionic1的文章,但自己还没摸清门道,本来也是感兴趣就学习了 ...
- 选择Nodejs的N个理由
选择Nodejs的N个理由 作者 马德奎 发布于 2014年9月25日 Caleb Madrigal是 来自美国密尔沃基市的一名软件顾问.四年前,他在听说“将JavaScript用作服务器端语言”这样 ...
- ABAP OO的八大理由
原贴地址:http://scnblogs.techweb.com.cn/abaplv/archives/127.html 几年前SAP BASIS 4.6为ABAP扩展了OO功能,这是很多传统的ABA ...
- ionic2+angular2
ionic2+angular2中踩的那些坑 好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路. 之前写过一篇使用VS2015开发ionic1的文章 ...
随机推荐
- Codeforces Round #480 (Div. 2) B. Marlin
题目地址:http://codeforces.com/contest/980/problem/B 官方题解: 题意: 有一个城市有4行n列,n是奇数,有一个村庄在(1,1),村民在(4,n)钓鱼:还有 ...
- buuctf 随便注 writeup
1.0 打开页面 显然这个题的考点是注入,那我们来测一下 2.0 sql注入测试 1 2 输入 1' 后发现没有回显,改为 1' --+ 后,有回显,应该在这存在注入点 试一下 1' and 1=1 ...
- Go第三方日志库logrus
日志是程序中必不可少的一个环节,由于Go语言内置的日志库功能比较简洁,我们在实际开发中通常会选择使用第三方的日志库来进行开发.本文介绍了logrus这个日志库的基本使用. logrus介绍 Logru ...
- InnoDB在MySQL默认隔离级别下解决幻读
1.结论 在RR的隔离级别下,Innodb使用MVVC和next-key locks解决幻读,MVVC解决的是普通读(快照读)的幻读,next-key locks解决的是当前读情况下的幻读. 2.幻读 ...
- Java中ElasticSearch的删除示例
public class DeleteElasticAPI { private static RestClient restClient; static { restClient=RestClient ...
- LVM扩容根分区
LVM的工作方式 LVM管理工具集 [root@wendang ~]# lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sda ...
- UGUI_创建旋转物体,使用Slider控制小球旋转速度
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Player : ...
- html5表单与Jquery Ajax配合使用
html5的表单控件提供了很多格式检测功能,可以省去很多烦人的javascript验证代码,例如pattern属性和require属性,但触发的条件是表单提交,如果想通过ajax提交表单,就出现了不能 ...
- 【学习笔记】第二章 python安全编程基础---正则表达式
一.python正则表达式 定义:正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式相匹配: 1.1RE模块:是python语言拥有全部的正则表达式功能的一个正则模块: 常见 ...
- 《即时消息技术剖析与实战》学习笔记7——IM系统的消息未读
一.什么是消息未读 消息未读包括会话未读和总未读.前者指的是当前用户和某一聊天方的未读消息数,后者指的是当前用户的所有未读消息数,也就是所有会话未读的和.比如用户A收到用户B的2条消息,还收到用户C的 ...