liuzq(前端开发工程师)

随着智能手机的普及,目前移动互联网已经飞速发展,几乎每天都会有涉及人们生活的各种Android APP或者 IOS APP上线。作为一名WEB前端开发人员,一切与用户交互相关的技术都应该关注一下。前段时间有幸参与了第一个IOS项目——职场口语APP。现在站在前端开发人员的角度分享下开发心得,文章主要适用于未接触过IOS开发的前端人员,可以让其对IOS开发有个粗浅的了解。

不论是Javascript还是Object-C,作为一门编程语言它们的基本概念和编程思想都是相同的。所以这里的重点不会是数据类型、语法、语句等概念,更不会讲语言的发展史之类,至于这些基础知识需要感兴趣的同学自行学习啦。这里主要会讲如何创建第一个IOS项目、前端开发人员学习IOS开发的优势、前端开发和IOS开发的对比。

一、 创建第一个IOS项目

二、 前端开发人员学习IOS开发的优势

        - 控件的创建

        - 向UIView中添加控件和控件的属性设置

        - 事件处理

三、 前端开发和IOS开发的异同

       1、 数据类型

       2、 变量的声明和赋值

       3、 函数的调用

一、创建第一个IOS项目

在有了Xcode的前提下我们就可以开始了,为了便于下文中与web前端开发的比较,我们先从零开始创建一个IOS应用程序,使得大家对IOS开发有个基本的概念,不要太在意细节,有个印象即可。这个IOS小程序主要实现了通过点击按钮后显示一段文字。

1、 打开Xcode,依次选择 File->New->Project,会看到如下的界面:

2、 可以选择“Single View Application”或者Empty Application。这里我们以Single View Application为例。

3、 输入我们的项目名称:FirstApp,类前缀:YD,运行设备:IPhone

创建完项目就可以编译运行了,只不过运行结果中模拟器是空白的。先来看下我们工程的目录结构:

其中main.m文件就是我们的App入口了,类似于C语言程序里面的main函数,因为Object-C是C语言的扩展,C语言程序可以无需修改就通过Object-C的编译器。可以看到我们的main文件中的UIApplicationMain函数, 其中argc和argv是ISO C标准的main函数的参数,我们关心的是第四个参数,YDAppDelegate是应用程序类的委托类,我们可以在目录结构中找到YDAppDelegate.h和YDAppDelegate.m文件,YDAppDelegate.m文件中有很多方法,我们先不去考虑,首先找到下面这个方法:

这是iOS程序启动时总会调用的方法,也就是说这个方法是我们应用程序的最终入口。

4、 现在看下YDAppDelegate.h文件:

其中导入的UIKit是用户界面( UI )接口、应用程序对象、事件控制、绘图模型、窗口、视图和用于控制触摸屏等的接口。YDViewController是我们创建项目的时候自动生成的,是我们应用程序的视图控制器。我们还通过@property方式声明了YDViewController的实例ydVc。接下来在YDAppDelegate.m中我们刚刚说过的应用启动时调用的函数中添加如下代码:

并在YDViewController.m文件的viewDidLoad方法中添加并修改如下代码:

重新编译运行程序,会看到如下的界面:(点击第一个视图中的按钮,就会显示第二个视图中的文字了。)

5、 到这里我们的第一个App就搞定啦。下面看下我们所添加的代码含义,YDAppDelegate.m中添加的代码:含义就是创建了一个UIWindow对象的实例self.window,并按照屏幕大小初始化视图窗口大小,并设置窗口背景色为purpleColor(紫色)。然后创建YDViewController的实例self.ydVc,并将其显示在屏幕上。

因为我们创建了YDViewController的实例,并显示在屏幕上,这样做的话我们的视图控制器类YDViewController的viewDidLoad方法就被调用了,我们在viewDidLoad方法中通过UILabel类创建了一个label,并显示了”My first App!”,但将其设置为了隐藏,最后通过[self.view addSubview:firstLabel]方法将其插入到当前视图中。还创建了一个UIbutton的实例testBtn并为其添加了点击事件的处理函数。

二、 前端开发人员学习IOS开发的优势

知道了创建的流程和代码的含义,下面从前端开发人员的角度说下我们学习IOS开发的优势吧。个人觉得HTML+CSS的布局方式是所有图形界面中开发中最简单、最直接的方式,并且通过chrome等开发工具可以让人更容易了解文档的结构和组成。在前端开发中页面是使用HTML和CSS进行布局,通过javascript实现交互,这些在前端中使用的技术和编程思想我们可以借鉴到IOS开发中的界面布局、控件的样式设置、控件的事件响应中。下面我们通过例子中的代码进行下对比学习。

- 控件的创建

IOS:

前端开发:

var span = document.createElement(“span”);

IOS中的代码片段是创建了一个Label控件,类似我们的span元素,用来显示文字,CGRectMake(x,y,width,height)的意思就是确定控件在视图中的坐标和宽高,这一点在我们的CSS中是很好实现的就不多说了。

- 向UIview中添加控件和控件的属性设置

IOS:

前端:

span.style.textAlign = “center”;

span.innerHTML = “My first App!”

span.style.display = “none”;

span.style. backgroundColor = “white”;

IOS中的代码片段通过NSTextAlignmentCenter设置了文字居中对齐,对应的还有左对齐(NSTextAlignmentLeft)和右对齐(NSTextAlignmentRight),通过text属性设置了label内容等。这些操作我们前端人员都太熟悉不过了,不是么?接下来testBtn的创建我就不用多说了吧!

- 事件处理

IOS:

前端:

span.addEventListener(“click”, showText,false);

第一段代码就是为testBtn添加点击事件处理,其中action参数就是指定了点击事件的处理函数了,forControlEvents参数指定了事件的类型。和我们的DOM事件绑定差不多吧,还没有兼容性!

三、 前端开发和IOS开发的异同

如果看完了前面的部分,就已经可以自己写一些小程序了。下面总结下前端开发和IOS开发的异同之处。

首先IOS开发中使用的是Object-C和Object-C编写的Cocoa框架集,其中Cocoa框架集的重要主要组成部分是Foundation和AppKit。Foundation框架不涉及用户界面,它的作用主要是内存管理、对象的持久保存、对象的分发、数值、字符串、和集合,以及为访问底层系统实体和服务提供工具类,而AppKit包含实现图形、事件驱动的用户界面所需要的全部对象:窗口、对话框、按键、菜单、滚动条、文本输入框等。

除此之外Cocoa框架集还包含Core Animation和Core Image等框架。那么我先粗浅的将[Object-C, Foundation]和javascript作为一类,它们的共同点都是程序的骨架,不涉及图形界面编程,用以实现程序的逻辑和提供工具函数。然后把AppKit、UIkit和[HTML、CSS、DOM]归为一类,它们用于用户界面的布局、样式、事件处理等。首先看下[Object-C, Foundation]和javascript的对比:

1、 数据类型

关于数据类型就不必多说了,语言的基本数据类型都是相似的,但由于js是弱类型语言,习惯了js编程的话,对于数据类型这块还是需要详细看下书的。比如Object-C中的整型int,属于基本数据类型,我们在js中可以轻松的把一个整型放入到数组中,但在Object-C中NSArray只能存储对象,我们就需要使用NSNumber来封装基本数据类型以达到存入NSArray和NSDictionary的目的。除此之外,还有前端人员可能不了解的NSRange(范围)、几何数据类型(CGPoint、CGsize、CGRect)。

2、 变量的声明和赋值

在js中一切变量都可以用var关键字来声明,但在Object-C中就要改变这个习惯了(不得不说改变习惯是很痛苦的)例如我们声明一个字符串变量并赋值:

NSString *hello;

hello = [NSString stringWithFormat:@"Hello”];

声明一个不可变数组:

NSArray *array;

array = [NSArray  arrayWithObject:@”one”,@”two”,nil];

array = @[@”one”,@”two”];

其中第一种创建方式的最后一个数组元素nil是不可以省略的,代表数组的结束。第二种方式是以数组字面量的格式创建的。

我们可以通过[array objectAtIndex:0]或者array[0]来访问数组元素。更要注意在js中我们可能不会在意指定索引处的数组元素是否存在,即使不存在也不会产生错误,也就是返回undefined而已,我们可以通过判断来处理,但在Object-C中如果指定索引超出了数组长度,就会连判断的机会都没有了,数组越界就会直接导致程序崩溃了。

3、 函数的调用

在js中我们可以直接调用函数、调用单例方法、实例方法等。除了直接调用之外就是使用点运算符调用,在IOS开发中称之为发送消息,例如:[self  showText:@”hello”],是向self对象发送showText消息,并传递字符串参数。当然我们也可以像前端开发中一样去调用一个类自己内部定义的方法,其他类的类方法,实例对象的方法等,只不过是调用的方式和传参的方式有所不同。

关于AppKit和[HTML、CSS、DOM]图形界面的对比:

1、 事件绑定和事件处理函数,在前面的例子已经介绍过了,只不过在IOS开发中的事件类型会和前端开发中有些差异。

2、 对于布局之前已稍作了解,在前端开发中我们可以按照一定规则对元素进行嵌套,已达到具有某种意义的层次或者为了实现一些特殊的效果,在IOS中也有视图包含块和子视图的概念,例如:UIView、UIScrollView、UITableView等均可作为包含块,然后通过坐标等进行布局。其中表格布局要复杂些,在IOS开发中,由于手机的内存空间有限,UITbable采用了重用机制,也就是说表格的每个UITableCell子元素都是可复用的,对于大数据量的表格也不得不采用重用机制,不然会耗费大量内存。所以表格布局和操作显然不会像前端中那样简单了。

3、 关于IOS开发中的一些动画,例如我们在前端页面做一个横向的进度条,很简单就是定时变化一个元素的宽度,动画结束的时候给一个callback函数,在IOS中的控件做动画的时候也是类似的思维,例如:

[UIView animateWithDuration:.5 animations:^{

       resultLabel.alpha = 1;

} completion:^(BOOL finished) {

}];

我们在0.5秒内将一个label控件的透明度变化到1,并且该方法也提供了动画完成的回调。在回调函数前面有个符号“^”,这是一个“代码块”的概念,类似于我们前端开发中的闭包,闭包在前端开发中是很强大也很重要的。在IOS开发中,“代码块”是可以增强函数功能的Object-C特性,是C语言中函数的扩展,除了函数中的代码,代码块还包含变量绑定功能。

我们再来对比下调试的方法,对于使用过chrome调试工具的同学这基本不是难事,调试工具基本长得的都一样,需要注意的是当我们使用暴力测试,即在程序中通过console.log的方式调试的时候要记住啦,IOS中是NSLog(@””),这个我每次都会先去打console.log然后再删掉。。。,然后我去写js的时候又会莫名其妙的去打NSLog。。。

最后总结下,之前讲的都是一些对比性的学习方式,但对于想系统学习的同学还只能看资料了,比如继承、复合、类别、协议、Fundation、AppKit、UIKit等,尤其是对协议部分的学习,IOS开发中无处没有协议。这里推荐两本书籍:《Object-C基础教程》、《ios编程》。