前言
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中处理。代码如下：
<body>
<div class="container">
<div id="calculator">
<div id="title" class="text-center">
<h5><b>Electronic Calculator</b></h5>
</div>
<!--entry box-->
<div id="entrybox" class="text-right">
<div class="entry">
<p id="answer">0</p>
</div>
<div class="entry">
<p id="history">0</p>
</div>
</div>
<!--buttons-->
<div id="buttons">
<button class="red" value="ac">AC</button>
<button class="red" value="ce">CE</button>
<button value="/">÷</button>
<button value="*">*</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="-">-</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="+">+</button>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button class="invisible">N</button>
<button id="zero-button" value="0">0</button>
<button value=".">.</button>
<button id="equal-button" value="=">=</button>
</div>
</div>
</div>
</body>
效果图如下：
其中.container 能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。
<div class="calculator">是一个底层的容器盒子，包裹计算器的各位部分，依次是标题、输出区、按钮。
页面布局和样式设置
页面的布局方式跟iOS不同。在这里我们使用了最基本的布局，只是指定各个元素的大小及间距。其中有几个概念说明一下，Margin属性用于设置两个元素之间的距离，Padding用于设置一个元素的边框与其内容的距离，float定义元素在哪个方向浮动。效果如下：
我们的代码如下，其中阴影效果是通过设置box-shadow属性实现的，box-shadow属性向边框添加一个或多个阴影，该属性是由逗号分隔的阴影列表，inset表示内阴影。
在按钮区，有的按钮跨行，如等于按钮，有的按钮跨列，如0按钮，这些按钮的布局通过设置它的宽高和位置，实现跨行。
button:active设置按钮点击时的效果，相当于iOS中的高亮。
<style type="text/css">
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;
}
</style>
计算器业务逻辑
最后是计算器的实现过程，用javascript写的。业务逻辑不分语言，跟iOS差别不大，贴下代码：
<script type="text/javascript">
// final draft
$(document).ready(function() {
var entry = '';
var ans = '';
var current = '';
var log = '';
var decimal = true;
var reset = '';
// round function if answer includes a decimal
function round(val) {
val = val.toString().split('');
if (val.indexOf('.') !== -1) {
var valTest = val.slice(val.indexOf('.') + 1, val.length);
val = val.slice(0, val.indexOf('.') + 1);
var i = 0;
while (valTest[i] < 1) {
i++
}
valTest = valTest.join('').slice(0, i + 2);
if (valTest[valTest.length-1] === '0') {
valTest = valTest.slice(0, -1);
}
return val.join('') + valTest;
} else {
return val.join('');
}
}
$('button').click(function() {
entry = $(this).attr("value");
console.log('entry: ' + entry);
//reset for log after answer to equation.
if (reset) {
if (entry === '/' || entry === '*' || entry === '-' || entry === '+') {
log = ans;
} else {
ans = '';
}
}
reset = false;
// All clear or Clear Entry
if (entry === 'ac' || entry === 'ce' && current === 'noChange') {
ans = '';
current = '';
entry = '';
log = '';
$('#history').html('0');
$('#answer').html('0');
decimal = true;
} else if (entry === 'ce') {
$('#history').html(log.slice(0, -current.length));
log = log.slice(0, -current.length);
ans = ans.slice(0, -current.length);
current = ans;
if (log.length === 0 || log === ' ') {
$('#history').html('0');
}
$('#answer').html('0');
entry = '';
decimal = true;
}
// prevents more than one deciminal in a number
if (entry === '.' || entry === '0.') {
if (!decimal) {
entry = '';
}
}
// prevents improper use of first digit
if (ans.length === 0 && isNaN(entry) && entry !== '.' || ans.length === 0 && entry === '0') {
entry = '';
ans = '';
}
// prevents extra operators
if (current !== 'noChange') {
if (current === '' && isNaN(entry) && entry !== '.' || isNaN(current) && isNaN(entry) && entry !== '.') {
entry = '';
}
}
// digit combining
while (Number(entry) || entry === '0' || current === '.') {
if (isNaN(current) && entry === '0' && current !== '.') {
entry = '';
} else if (isNaN(current) && Number(entry) && current !== '.') {
current = '';
}
if (entry === '.') {
decimal = false;
}
if (current === '0.' && isNaN(entry)) {
entry = '';
} else {
if (current[current.length - 1] === '.') {
current = current.concat(entry);
} else {
current += entry;
}
ans += entry;
$('#answer').html(current);
log += entry;
$('#history').html(log);
entry = '';
}
}
// Operation list
if (entry === '.') {
if (current === '' || isNaN(current[current.length - 1])) {
current = '0.';
ans += entry;
$('#answer').html('0.');
log += current;
$('#history').html(log);
} else {
current = current.concat('.');
ans = ans.concat('.');
log = ans;
$('#history').html(ans);
$('#answer').html(current);
}
entry = '';
decimal = false;
} else if (entry === '/') {
current = '/';
ans = round(eval(ans)) + current;
log += current;
$('#history').html(log);
$('#answer').html('/');
entry = '';
decimal = true;
} else if (entry === '*') {
current = '*';
ans = round(eval(ans)) + current;
log += 'x';
$('#history').html(log);
$('#answer').html('x');
entry = '';
decimal = true;
} else if (entry === '-') {
current = '-';
ans = round(eval(ans)) + current;
log += current;
$('#history').html(log);
$('#answer').html('-');
entry = '';
decimal = true;
} else if (entry === '+') {
current = '+';
ans = round(eval(ans)) + current;
log += current;
$('#history').html(log);
$('#answer').html('+');
entry = '';
decimal = true;
} else if (entry === '=') {
if (current[current.length - 1] === '.') {
entry = '';
} else {
current = eval(ans).toString();
$('#answer').html(round(eval(ans)));
ans = round(eval(ans));
log += entry + ans;
$('#history').html(log);
log = ans;
entry = '';
reset = true;
decimal = true;
}
current = 'noChange';
}
entry = '';
if (reset) {
log = '';
}
// max digits on screen
if ($('#entry').children().text().length > 8 || $('#history').text().length > 22) {
$('#answer').html('0');
$('#history').html('Digit Limit Met');
current = '';
ans = '';
log = '';
decimal = true;
}
console.log('decimal: ' + decimal);
console.log('current: ' + current);
console.log('answer: ' + ans);
console.log($('#history').text().length);
});
}); // end doc ready function
</script>
总结
在这实例中，我们只是使用了基本的前端技术，展示前端开发过程。实例地址：https://github.com/superzcj/Calculator
通过与iOS开发过程对比，发现前端在界面搭建、页面布局上更快速、简单；动画特效丰富简单，几行代码就做出了阴影效果；调试简单，更改即时生效，iOS中，有点规模的项目，编译一次都要半分钟；还有丰富强大的第三方类库，像bootstrap能简单而快速地搭建一个漂亮的页面。
本文主要是站在iOS开发的角度分享了一下学习前端基础的必得，希望让大家能对前端开发有个粗浅的了解。
网友评论