2016年即將走完篇亭，回顧這一年缠捌，看看自己都收獲了什么，有哪些改變，哪些不足曼月，接下來該怎么走...

經(jīng)過這一年的洗禮谊却，我才真正算個(gè)小前端。

本人非科班出身（動(dòng)漫設(shè)計(jì)專業(yè)）哑芹，本想找個(gè)3D角色設(shè)計(jì)的工作炎辨，但是由于家庭原因沒有學(xué)畫，所以美術(shù)基礎(chǔ)根本比不上美術(shù)生聪姿，所以一點(diǎn)競爭力都沒有碴萧，結(jié)局很明顯。

一天我哥（非親）下班回來找我談了之后末购，叫我不要找這些工作了破喻，說我完全沒有競爭力，永遠(yuǎn)不會(huì)有面試通知盟榴，然后就丟一套前端視頻給我看曹质，叫我去學(xué)，當(dāng)時(shí)什么基礎(chǔ)都沒有曹货，只是逼于即將畢業(yè)與生活的壓力去試試看咆繁。

一個(gè)月之后還真的拿到offer了；然后接下來就是簡單的寫寫頁面顶籽，做做效果這些工作，涉及到的知識(shí)都不夠深入银觅，在這幾個(gè)月的時(shí)間里面礼饱，我去過幾家公司，結(jié)局都不太好究驴。

因?yàn)樵?015年的時(shí)候镊绪，我對互聯(lián)網(wǎng)這個(gè)行業(yè)還是一臉懵逼的狀態(tài)，工作的那幾家公司的經(jīng)營狀況都不好洒忧，所以造成我的知識(shí)體系不夠系統(tǒng)蝴韭，到了現(xiàn)在這家公司之后才慢慢理解這個(gè)世界好大。

一熙侍、邂逅Json

根據(jù)我哥對我的解釋榄鉴，前端就是寫寫一些頁面，做一些動(dòng)效就可以了蛉抓，然后我對前端的認(rèn)識(shí)也就僅僅停留在這個(gè)層面庆尘，加上之前也就是做這些工作，所以我對 json 是什么都不知道巷送，百度之后還是半懵逼.

公司的前端（準(zhǔn)備離開的）簡單培訓(xùn)兩天后就走了驶忌。前期壓力好大，老大又好嚴(yán)笑跛，加上之前睡眠不好付魔，所以每天都好累聊品，好像回家去睡覺（不懂，想逃避）几苍；但膽子小不敢（其實(shí)自己也想學(xué)好翻屈，但不懂怎么去百度），哈哈哈擦剑。

別說 json 簡單妖胀，對于當(dāng)時(shí)我這個(gè)小白來說就是牽一發(fā)而動(dòng)全身，為什么這么說呢惠勒，因?yàn)?json 是跟數(shù)據(jù)掛鉤的赚抡，這樣引發(fā)第一次知識(shí)體系崩塌，所以我學(xué)會(huì)了一些處理數(shù)據(jù)的方法纠屋。

比如：

shift 方法：刪除原數(shù)組第一項(xiàng)涂臣，并返回刪除元素的值；如果數(shù)組為空則返回undefined

var a = [1,2,3,4,5];

var b = a.shift();

返回 ?a：[2,3,4,5] ? ? b：1

push ?方法：將參數(shù)添加到原數(shù)組末尾售担，并返回?cái)?shù)組的長度

var a = [1,2,3,4,5];

var b = a.push(6,7);

返回 ? a：[1,2,3,4,5,6,7] ? ? b：7

concat ?方法：返回一個(gè)新數(shù)組赁遗，是將參數(shù)添加到原數(shù)組中構(gòu)成的

var a = [1,2,3,4,5];

var b = a.concat(6,7);

返回 ? a：[1,2,3,4,5] ? ? ?b：[1,2,3,4,5,6,7]

還有很多，就不一一列舉了

二族铆、JS的另一扇門

當(dāng)時(shí)對JS的理解也僅僅停留它可以寫一些動(dòng)畫效果岩四，做一些簡單的dom操作等，而且平時(shí)用Jquery這個(gè)平民級插件比較多哥攘。

有一次老大叫我做個(gè)購物車的功能剖煌，說了一些功能之后我都不知道從何下手，還有g(shù)et逝淹、post也不明白耕姊，百度一大堆都不是我想要的東西。

實(shí)在沒辦法了就問老大栅葡，本以為會(huì)被訓(xùn)一頓茉兰，但是老大沒有這么做，而是放下他手上的工作欣簇，坐下來慢慢教我一些基礎(chǔ)知識(shí)规脸，比如js文件里面的方法是怎么執(zhí)行的、get醉蚁、post燃辖、全局定義與局部定義的區(qū)別等。

經(jīng)過老大的虛心教導(dǎo)网棍，我對js的理解又提高一個(gè)層面黔龟。實(shí)踐幾次之后，這些知識(shí)基本熟悉，工作上基本就沒什么問題了氏身，接下來就是代碼優(yōu)化巍棱。

最重要是教會(huì)了我怎么百度，怎么抓關(guān)鍵字去搜索蛋欣，這為我往后的學(xué)習(xí)提供了很大的幫助航徙。（謝謝TT哥）

雖然懂得這些知識(shí)已經(jīng)足夠應(yīng)付工作上問題，但js比我們想象中強(qiáng)大的多陷虎。比如 Angular.js ,在這里我們要感謝那些開發(fā)這么優(yōu)秀的前端框架的人到踏。

Angularjs

ng的mvc模式是一種軟件設(shè)計(jì)模式，用于開發(fā)Web應(yīng)用程序尚猿，基本內(nèi)容可以簡單分為以下三個(gè)部分：

模型/Model - 一個(gè)負(fù)責(zé)維護(hù)數(shù)據(jù)模式的最低水平窝稿。

模型是負(fù)責(zé)管理應(yīng)用程序的數(shù)據(jù)。它響應(yīng)來自視圖的請求凿掂，同時(shí)也響應(yīng)指令從控制器進(jìn)行自我更新伴榔。

視圖/View - 負(fù)責(zé)顯示所有或數(shù)據(jù)到用戶的部分。

在一個(gè)特定的格式的演示數(shù)據(jù)庄萎，由控制器決定觸發(fā)顯示數(shù)據(jù)踪少。它們是基于腳本的模板系統(tǒng)，如JSP糠涛，ASP援奢，PHP，非常容易使用AJAX技術(shù)的集成忍捡。

控制器/Controller - 軟件代碼控制Model和View之間的相互作用萝究。

控制器負(fù)責(zé)響應(yīng)于用戶輸入并執(zhí)行交互數(shù)據(jù)模型對象★惫蓿控制器接收到輸入，它驗(yàn)證輸入绕娘，然后執(zhí)行修改數(shù)據(jù)模型的狀態(tài)的業(yè)務(wù)操作脓规。

使用angularjs這個(gè)框架帶給我比較大的體驗(yàn)就屬它本身的表單認(rèn)證了，比起使用jq寫表單認(rèn)證险领，ng要方便很多侨舆，以下是我收集表單的各種認(rèn)證方式：

1、必填項(xiàng)驗(yàn)證

某個(gè)表單輸入是否已填寫绢陌，只要在輸入字段元素上添加HTML5標(biāo)記required即可

<input type="text" required />

2. 最大挨下、最小長度

驗(yàn)證表單輸入的文本長度是否大于某個(gè)最小值，在輸入字段上使用指令ng-minleng= "{number}"

<input type="text" ng-minlength="5" />

驗(yàn)證表單輸入的文本長度是否小于或等于某個(gè)最大值脐湾，在輸入字段上使用指令ng-maxlength="{number}"：

<input type="text" ng-maxlength="20" />

3臭笆、模式匹配

使用ng-pattern="/PATTERN/"來確保輸入能夠匹配指定的正則表達(dá)式

<input type="text" ng-pattern="/[a-zA-Z]/" ?/>

4、電子郵件

驗(yàn)證輸入內(nèi)容是否是電子郵件，只要像下面這樣將input的類型設(shè)置為email即可

<input type="email" name="email" ng-model="user.email" ?/>

5愁铺、數(shù)字

驗(yàn)證輸入內(nèi)容是否是數(shù)字鹰霍，將input的類型設(shè)置為number

<input type="number" name="age" ng-model="user.age" ?/>

6、URL

驗(yàn)證輸入內(nèi)容是否是URL茵乱，將input的類型設(shè)置為 url

<input type="url" name="homepage" ng-model="user.facebook_url" ?/>

不得不說茂洒，ng的開發(fā)團(tuán)隊(duì)實(shí)在是太優(yōu)秀了，想的相當(dāng)周到瓶竭。在css中分別定義.ng-pristine督勺、.ng-valid、.ng-invalid斤贰、.ng-dirty這四個(gè)類智哀，這些認(rèn)證會(huì)根據(jù)相應(yīng)的狀態(tài)自動(dòng)加上相應(yīng)的類，配合相關(guān)的樣式會(huì)做出很不錯(cuò)的體驗(yàn)腋舌。

ng最重要思想還是MVC盏触、路由、雙向數(shù)據(jù)綁定块饺、依賴注入赞辩、指令系統(tǒng)等，其中提供的服務(wù)與過濾器也相當(dāng)方便授艰，ng還有很多強(qiáng)大的方面有待我去挖掘辨嗽，我會(huì)繼續(xù)努力的。

ionic?

談到angularjs淮腾，就不得不說 ionic + angularjs 開發(fā)的app了糟需。

來公司沒多久之后老大就開會(huì)說，我們接下來要使用ionic+angularjs構(gòu)建非原生APP谷朝，網(wǎng)上有教程洲押，叫我們過年前先開發(fā)個(gè)雛形（因?yàn)槔洗笥惺拢崆罢埣伲┰不耍^完年后再慢慢疊加杈帐。

我當(dāng)時(shí)是第一次聽說前端可以開發(fā)APP，當(dāng)時(shí)有興奮又擔(dān)心专钉；興奮是因?yàn)橛挚梢詫W(xué)到新的東西挑童，擔(dān)心是怕做不好，加上老大也是第一次接觸跃须，哈哈哈站叼，不過老大是萬年老司機(jī)，知識(shí)層面比我高很多菇民，接受新知識(shí)肯定比我們快很多尽楔，所以我的擔(dān)心是老大預(yù)料之中的事情投储。

ionic 是基于angularjs的混合應(yīng)用開發(fā)框架，其中一些css組件與Boostrap的類似翔试，加上ionic獨(dú)特的注入轻要，開發(fā)起來相當(dāng)方便。

當(dāng)時(shí)開發(fā)APP1.0的時(shí)候可以說是困難重重垦缅，比如最簡單的冲泥，在APP的首頁做個(gè)banner幻燈片（輪播圖）。

一開始是用寫死的數(shù)據(jù)壁涎，所以輪播圖顯示一點(diǎn)問題都沒有凡恍，但是一用后臺(tái)請求回來的數(shù)據(jù)就杯具了，完全沒有顯示怔球，只有一些標(biāo)簽嚼酝。

在這里認(rèn)真一想就通了，邏輯是沒錯(cuò)的竟坛，因?yàn)檫@些標(biāo)簽加載完成的時(shí)候闽巩，后臺(tái)請求的數(shù)據(jù)還沒拿到，所以在頁面沒有顯示輪播圖的圖片担汤。

找了好久涎跨，最后是在國外的ionic論壇里找到答案的，他們說只要在回調(diào)哪里加上下面這句話就好了

$ionicSlideBoxDelegate.$getByHandle('slideHandle').update(); ?//重繪幻燈片

我照做了崭歧，但是還是沒有效果隅很，這就尷尬了，最后還是看官網(wǎng)的API才知道答案的率碾，加上上面這句話還不完整叔营，還要在輪播圖標(biāo)簽加上識(shí)別' 把柄' '如下

<ion-slide-box? delegate-handle="slideHandle"></ion-slide-box>

這里的 delegate-handle="slideHandle" 中的? slideHandle? 要與? $getByHandle('slideHandle') 中的slideHandle相一致；

確保重繪的幻燈片是自己想要的那個(gè)

還有就上拉加載/下拉刷新所宰，這個(gè)也折騰了我好久绒尊，因?yàn)楫?dāng)時(shí)我不知道所謂的 下拉刷新? 就是重新獲取一次數(shù)據(jù)就好了（一臉懵逼，這么簡單仔粥？）垒酬，上拉加載? 就是上拉翻頁，百度一下什么都有了件炉，只是我一開始不知道是這個(gè)原理（...，乖我是小白咯）矮湘；

其實(shí)還有很多斟冕，只要是第一次接觸不是太了解，只要肯下功夫去學(xué)缅阳，慢慢就清晰了磕蛇，我會(huì)繼續(xù)加油的景描。

三、看似弱小而強(qiáng)大的力量 —— CSS

要我說秀撇，把一個(gè)完整的頁面比喻成做一道美食的話超棺，html應(yīng)該是還沒有加工的食物，js就好比配料呵燕，我們就屬于廚司了棠绘，這樣一道美食端到晚餐的桌面上會(huì)不會(huì)覺得少了了點(diǎn)什么東西？

想象一下這樣的場景再扭，你與你的女神在很優(yōu)雅的餐廳吃飯氧苍，服務(wù)員把這個(gè)名廚炒的菜端到你們的桌子上，這么撲鼻而來的香味刺激著你的嗅覺神經(jīng)泛范，這時(shí)不叫一支82年的拉菲让虐，對得起這樣的情調(diào)嗎，我相信你們不會(huì)錯(cuò)過的罢荡。

而css就像這支82年的拉菲赡突，高貴而優(yōu)雅，看似弱小卻起到四兩撥千金的作用区赵。

我看似是對著css掌握的很好了惭缰，覺得我會(huì)寫一大堆動(dòng)畫效果了，什么布局都可以完美處理惧笛。人就是這樣从媚，自大總會(huì)被事實(shí)打臉啪啪。

就拿一個(gè)<img />標(biāo)簽來說患整，直接放在一個(gè)div里面拜效，你會(huì)發(fā)現(xiàn)這div中會(huì)比這圖片大5像素作用，不管你設(shè)置padding：0各谚、還是設(shè)置margin：0紧憾；這些都沒有效果，因?yàn)閏ss中默認(rèn)img的display屬性是inline昌渤；你仔細(xì)觀看就會(huì)發(fā)現(xiàn)圖片的底部高了一點(diǎn)赴穗，一般情況下是沒有太大的影響的，假如真的影響到了就要解決掉膀息。

要解決這個(gè)問題般眉，你可以設(shè)置成下面這樣 ?

img {display:block;} ?

或者img{float:left;}

這個(gè)你可能會(huì)在css的一些基礎(chǔ)設(shè)置里面就已經(jīng)寫好了，但是偶爾一些是沒有寫到的潜支，除了這個(gè)方法甸赃，你還可以為這個(gè)img標(biāo)簽添加浮動(dòng)樣式，也可以起到相同的效果冗酿，這些是再常見不過的問題了埠对。

還有一個(gè)讓我耳目一新的樣式络断，我覺得很神奇，就是在（pc端/移動(dòng)端）屏幕定位居中顯示的彈窗项玛。我們一般是用? margin-left? 或者 margin-right? 取負(fù)值來左右平衡貌笨，這樣是沒什么問題的，也是解決上下左右顯示的一種方法襟沮，一些老司機(jī)可能就沒有這樣的新鮮感了锥惋。

另一種辦法就是下面這種了

div{width:250px;height:150px;position:absolute;top:0;bottom:0;left:0;right:0;margin: auto;}

不管你的寬高是多少，都可以相對這個(gè)元素的父級上下左右居中顯示臣嚣；雖然對其中原理的解釋還不夠清晰净刮，但這個(gè)樣式可以應(yīng)用到很多方面，這就要看實(shí)際的應(yīng)用了硅则。

這個(gè)世界很大淹父，比你我優(yōu)秀的大有人在，要追逐這些大神的腳步怎虫，我們要馬不停蹄的努力暑认，這條路沒有捷徑，加油大审。

以上就是這一年內(nèi)在工作上比較突出的收獲了蘸际，這其中還有很多需要深入的知識(shí)，接下來我會(huì)更加努力的徒扶。

感謝在這一年中一直陪伴著我的各位粮彤，謝謝。

No matter how hard it is, just keep going because you only fail when you give up.