前言
web app與native app的討論一直持續(xù)不斷扩灯，web app具有低成本晕换、高開發(fā)效率以及多平臺支持等特性学少，而且無需審核乡翅，能隨時發(fā)布更新鳞疲，只是受制于設備和網(wǎng)絡通信質(zhì)量，用戶瀏覽體驗一直無法超越native app蠕蚜。但隨著各種跨平臺的框架如React Native尚洽、Weex的推出，讓前端開發(fā)人員擁有了開發(fā)原生應用的能力靶累，相比之前web app腺毫，性能和用戶體驗提升了很多。而最近的微信小程序的推出挣柬，使用Web app開發(fā)進一步壯大潮酒。web相關(guān)技術(shù)正在慢慢侵蝕Native app的領地。
我們對待技術(shù)邪蛔，應該保持開放的心態(tài)急黎、保持好奇心，持續(xù)學習，擁抱變化勃教。況且前端繁榮的生態(tài)圈出產(chǎn)了大量的框架和解決方案淤击，里面有很多值得借鑒的設計思想，供我們參考學習故源。如下圖遭贸，截止到2016-10-11，Github上擁有1000星以上的類庫心软，安卓有876個，iOS有619個（未計入的swift類庫247個）著蛙，而前端的類庫僅javascript就有2325個删铃，安卓加上iOS的類庫，也只是前端的一半踏堡。
趁著這次國慶假期猎唁，學習了一些前端基礎知識。本文主要記錄了一些學習的心得顷蟆，并仿寫了一個實例诫隅，說明iOS與前端開發(fā)的不同之處。
接下來讓我們一起開始踏上學習之旅帐偎。
前端開發(fā)介紹
首先簡單介紹下前端開發(fā)的基礎知識逐纬。
前端有三大基礎知識，分別是html削樊、css和javascript豁生。
html表示網(wǎng)頁的骨架，它由很多層級結(jié)構(gòu)的標簽組成漫贞。在iOS開發(fā)中甸箱，相當于剛把各個控件拖入ViewController用storyboard/xib上，布置好各個控件之間的層級關(guān)系迅脐，尚未設置約束芍殖，設置樣式。比如谴蔑，網(wǎng)頁上放一個標簽豌骏，調(diào)整好它的位置和它所在的元素層級，至于這個標簽的大小和樣式树碱，暫不設置肯适。
css表示樣式，定義元素的顯示方式成榜，它能控制元素的布局和樣式框舔。類似iOS的約束加IB屬性設置。在這里設置它的大小位置和樣式屬性，比如字體顏色大小刘绣，位置大小等樱溉。
javascript表示事件響應，與iOS相似纬凤，相當于按鈕事件福贞，手勢事件。
web app 計算器
我們用html停士、css和javascript來寫一個簡單的計算器挖帘，實現(xiàn)簡單的四則運算，最終效果如下圖恋技。
在這個實例中拇舀，使用了第三方類庫jQuery和bootstrap。jQuery是簡化html與javascript之間操作的框架蜻底，常用它選擇html元素骄崩。bootstrap前端開發(fā)的開源工具包。
界面搭建
首先在html中搭建計算器的界面薄辅，設置各個元素的層級關(guān)系要拂，設置各個元素的“標識”。計算器的樣式和布局站楚，不在這一步設置脱惰，放到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 能在頁面中創(chuàng)建一個居中的區(qū)域窿春，然后我們能夠把其他位置的內(nèi)容放到里面枪芒。
<div class="calculator">是一個底層的容器盒子，包裹計算器的各位部分谁尸，依次是標題舅踪、輸出區(qū)、按鈕良蛮。
頁面布局和樣式設置
頁面的布局方式跟iOS不同抽碌。在這里我們使用了最基本的布局，只是指定各個元素的大小及間距决瞳。其中有幾個概念說明一下货徙，Margin屬性用于設置兩個元素之間的距離，Padding用于設置一個元素的邊框與其內(nèi)容的距離皮胡，float定義元素在哪個方向浮動痴颊。效果如下：
我們的代碼如下，其中陰影效果是通過設置box-shadow屬性實現(xiàn)的屡贺，box-shadow屬性向邊框添加一個或多個陰影蠢棱，該屬性是由逗號分隔的陰影列表锌杀，inset表示內(nèi)陰影。
在按鈕區(qū)泻仙，有的按鈕跨行糕再，如等于按鈕，有的按鈕跨列玉转，如0按鈕突想，這些按鈕的布局通過設置它的寬高和位置，實現(xiàn)跨行究抓。
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>
計算器業(yè)務邏輯
最后是計算器的實現(xiàn)過程刺下，用javascript寫的垒探。業(yè)務邏輯不分語言，跟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>
總結(jié)
在這實例中，我們只是使用了基本的前端技術(shù)蛤克，展示前端開發(fā)過程捺癞。實例地址：https://github.com/superzcj/Calculator
通過與iOS開發(fā)過程對比，發(fā)現(xiàn)前端在界面搭建构挤、頁面布局上更快速髓介、簡單；動畫特效豐富簡單筋现，幾行代碼就做出了陰影效果唐础；調(diào)試簡單，更改即時生效矾飞，iOS中一膨，有點規(guī)模的項目，編譯一次都要半分鐘洒沦；還有豐富強大的第三方類庫豹绪，像bootstrap能簡單而快速地搭建一個漂亮的頁面。
本文主要是站在iOS開發(fā)的角度分享了一下學習前端基礎的必得申眼，希望讓大家能對前端開發(fā)有個粗淺的了解瞒津。
