从 iOS 到前端的学习心得 (一)web app 与 native app 的讨论一直持续不断，web app 具有低

前言

web app与native app的讨论一直持续不断，web app具有低成本、高开发效率以及多平台支持等特性，而且无需审核，能随时发布更新，只是受制于设备和网络通信质量，用户浏览体验一直无法超越native app。但随着各种跨平台的框架如React Native、Weex的推出，让前端开发人员拥有了开发原生应用的能力，相比之前web app，性能和用户体验提升了很多。而最近的微信小程序的推出，使用Web app开发进一步壮大。web相关技术正在慢慢侵蚀Native app的领地。
我们对待技术，应该保持开放的心态、保持好奇心，持续学习，拥抱变化。况且前端繁荣的生态圈出产了大量的框架和解决方案，里面有很多值得借鉴的设计思想，供我们参考学习。如下图，截止到2016-10-11，Github上拥有1000星以上的类库，安卓有876个，iOS有619个（未计入的swift类库247个），而前端的类库仅javascript就有2325个，安卓加上iOS的类库，也只是前端的一半。

统计.png

github过滤.png

趁着这次国庆假期，学习了一些前端基础知识。本文主要记录了一些学习的心得，并仿写了一个实例，说明iOS与前端开发的不同之处。
接下来让我们一起开始踏上学习之旅。

前端开发介绍

首先简单介绍下前端开发的基础知识。
前端有三大基础知识，分别是html、css和javascript。
html表示网页的骨架，它由很多层级结构的标签组成。在iOS开发中，相当于刚把各个控件拖入ViewController用storyboard/xib上，布置好各个控件之间的层级关系，尚未设置约束，设置样式。比如，网页上放一个标签，调整好它的位置和它所在的元素层级，至于这个标签的大小和样式，暂不设置。
css表示样式，定义元素的显示方式，它能控制元素的布局和样式。类似iOS的约束加IB属性设置。在这里设置它的大小位置和样式属性，比如字体颜色大小，位置大小等。
javascript表示事件响应，与iOS相似，相当于按钮事件，手势事件。

web app 计算器

我们用html、css和javascript来写一个简单的计算器，实现简单的四则运算，最终效果如下图。

web计算器

在这个实例中，使用了第三方类库jQuery和bootstrap。jQuery是简化html与javascript之间操作的框架，常用它选择html元素。bootstrap前端开发的开源工具包。

界面搭建

首先在html中搭建计算器的界面，设置各个元素的层级关系，设置各个元素的“标识”。计算器的样式和布局，不在这一步设置，放到css中处理。代码如下：

Electronic Calculator

效果图如下：

其中.container 能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。

是一个底层的容器盒子，包裹计算器的各位部分，依次是标题、输出区、按钮。

页面布局和样式设置

页面的布局方式跟iOS不同。在这里我们使用了最基本的布局，只是指定各个元素的大小及间距。其中有几个概念说明一下，Margin属性用于设置两个元素之间的距离，Padding用于设置一个元素的边框与其内容的距离，float定义元素在哪个方向浮动。效果如下：

我们的代码如下，其中阴影效果是通过设置box-shadow属性实现的，box-shadow属性向边框添加一个或多个阴影，该属性是由逗号分隔的阴影列表，inset表示内阴影。
在按钮区，有的按钮跨行，如等于按钮，有的按钮跨列，如0按钮，这些按钮的布局通过设置它的宽高和位置，实现跨行。
button:active设置按钮点击时的效果，相当于iOS中的高亮。

    
        body{
            background-color: #818181;
        }
        #calculator{
            width:300px;
            height: 410px;
            margin-top: 10%;
            margin-right: auto;
            margin-left: auto;
            background-color: #dfd8d0;
            border: 2px solid #908b85;
            border-radius: 20px;
            box-shadow: 7px 10px 34px 1px rgba(0,0,0,0.68), inset -1px -6px 12px 0.1px #89847e;
        }
        #entrybox{
            width:80%;
            height: 65px;
            margin-right: auto;
            margin-left: auto;
            background-color: #c3c2ab;
            border-radius: 6px;
            border: 2px solid #b4b39d;
        }
        .entry{
            margin-right: 10px;
            font-size: 18px;
        }
        #buttons{
            width: 280px;
            height:auto;
            margin-left: 15px;
            margin-top: 15px;
            display: inline-block;
            position: absolute;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
        }
        button{
            width:50px;
            height:40px;
            margin:0 4px 10px 8px;
            border: none;
            border-radius: 8px;
            background-color: #3a3a3a;
            box-shadow: 0 3px 0 0 #222121, inset -1px -3px 10px 1px #515151;
        }
        button:active{
            transform: translate(0,3px);
            box-shadow: none;
        }
        #equal-button{
            height: 90px;
            margin-top: -50px;
            margin-left: 12px;
            position: absolute;
        }
        #zero-button{
            width: 117px;
        }
        .red{
            background-color: #a72d45;
            box-shadow: 0 3px 0 0 #671c2a;
        }

计算器业务逻辑

最后是计算器的实现过程，用javascript写的。业务逻辑不分语言，跟iOS差别不大，贴下代码：

总结

在这实例中，我们只是使用了基本的前端技术，展示前端开发过程。实例地址：github.com/superzcj/Ca…
通过与iOS开发过程对比，发现前端在界面搭建、页面布局上更快速、简单；动画特效丰富简单，几行代码就做出了阴影效果；调试简单，更改即时生效，iOS中，有点规模的项目，编译一次都要半分钟；还有丰富强大的第三方类库，像bootstrap能简单而快速地搭建一个漂亮的页面。
本文主要是站在iOS开发的角度分享了一下学习前端基础的必得，希望让大家能对前端开发有个粗浅的了解。