2016年即将走完，回顾这一年，看看自己都收获了什么，有哪些改变，哪些不足，接下来该怎么走...

经过这一年的洗礼，我才真正算个小前端。

本人非科班出身（动漫设计专业），本想找个3D角色设计的工作，但是由于家庭原因没有学画，所以美术基础根本比不上美术生，所以一点竞争力都没有，结局很明显。

一天我哥（非亲）下班回来找我谈了之后，叫我不要找这些工作了，说我完全没有竞争力，永远不会有面试通知，然后就丢一套前端视频给我看，叫我去学，当时什么基础都没有，只是逼于即将毕业与生活的压力去试试看。

一个月之后还真的拿到offer了；然后接下来就是简单的写写页面，做做效果这些工作，涉及到的知识都不够深入，在这几个月的时间里面，我去过几家公司，结局都不太好。

因为在2015年的时候，我对互联网这个行业还是一脸懵逼的状态，工作的那几家公司的经营状况都不好，所以造成我的知识体系不够系统，到了现在这家公司之后才慢慢理解这个世界好大。

一、邂逅Json

根据我哥对我的解释，前端就是写写一些页面，做一些动效就可以了，然后我对前端的认识也就仅仅停留在这个层面，加上之前也就是做这些工作，所以我对 json 是什么都不知道，百度之后还是半懵逼.

公司的前端（准备离开的）简单培训两天后就走了。前期压力好大，老大又好严，加上之前睡眠不好，所以每天都好累，好像回家去睡觉（不懂，想逃避）；但胆子小不敢（其实自己也想学好，但不懂怎么去百度），哈哈哈。

别说 json 简单，对于当时我这个小白来说就是牵一发而动全身，为什么这么说呢，因为 json 是跟数据挂钩的，这样引发第一次知识体系崩塌，所以我学会了一些处理数据的方法。

比如：

shift 方法：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined

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

var b = a.shift();

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

push  方法：将参数添加到原数组末尾，并返回数组的长度

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

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

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

concat  方法：返回一个新数组，是将参数添加到原数组中构成的

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的另一扇门

当时对JS的理解也仅仅停留它可以写一些动画效果，做一些简单的dom操作等，而且平时用Jquery这个平民级插件比较多。

有一次老大叫我做个购物车的功能，说了一些功能之后我都不知道从何下手，还有get、post也不明白，百度一大堆都不是我想要的东西。

实在没办法了就问老大，本以为会被训一顿，但是老大没有这么做，而是放下他手上的工作，坐下来慢慢教我一些基础知识，比如js文件里面的方法是怎么执行的、get、post、全局定义与局部定义的区别等。

经过老大的虚心教导，我对js的理解又提高一个层面。实践几次之后，这些知识基本熟悉，工作上基本就没什么问题了，接下来就是代码优化。

最重要是教会了我怎么百度，怎么抓关键字去搜索，这为我往后的学习提供了很大的帮助。（谢谢TT哥）

虽然懂得这些知识已经足够应付工作上问题，但js比我们想象中强大的多。比如 Angular.js ,在这里我们要感谢那些开发这么优秀的前端框架的人。

Angularjs

ng的mvc模式是一种软件设计模式，用于开发Web应用程序，基本内容可以简单分为以下三个部分：

模型/Model - 一个负责维护数据模式的最低水平。

模型是负责管理应用程序的数据。它响应来自视图的请求，同时也响应指令从控制器进行自我更新。

视图/View - 负责显示所有或数据到用户的部分。

在一个特定的格式的演示数据，由控制器决定触发显示数据。它们是基于脚本的模板系统，如JSP，ASP，PHP，非常容易使用AJAX技术的集成。

控制器/Controller - 软件代码控制Model和View之间的相互作用。

控制器负责响应于用户输入并执行交互数据模型对象。控制器接收到输入，它验证输入，然后执行修改数据模型的状态的业务操作。

使用angularjs这个框架带给我比较大的体验就属它本身的表单认证了，比起使用jq写表单认证，ng要方便很多，以下是我收集表单的各种认证方式：

1、必填项验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可

<input type="text" required />

2. 最大、最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"

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

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：

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

3、模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式

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

4、电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可

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

5、数字

验证输入内容是否是数字，将input的类型设置为number

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

6、URL

验证输入内容是否是URL，将input的类型设置为 url

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

不得不说，ng的开发团队实在是太优秀了，想的相当周到。在css中分别定义.ng-pristine、.ng-valid、.ng-invalid、.ng-dirty这四个类，这些认证会根据相应的状态自动加上相应的类，配合相关的样式会做出很不错的体验。

ng最重要思想还是MVC、路由、双向数据绑定、依赖注入、指令系统等，其中提供的服务与过滤器也相当方便，ng还有很多强大的方面有待我去挖掘，我会继续努力的。

ionic 

谈到angularjs，就不得不说 ionic + angularjs 开发的app了。

来公司没多久之后老大就开会说，我们接下来要使用ionic+angularjs构建非原生APP，网上有教程，叫我们过年前先开发个雏形（因为老大有事，提前请假），过完年后再慢慢叠加。

我当时是第一次听说前端可以开发APP，当时有兴奋又担心；兴奋是因为又可以学到新的东西，担心是怕做不好，加上老大也是第一次接触，哈哈哈，不过老大是万年老司机，知识层面比我高很多，接受新知识肯定比我们快很多，所以我的担心是老大预料之中的事情。

ionic 是基于angularjs的混合应用开发框架，其中一些css组件与Boostrap的类似，加上ionic独特的注入，开发起来相当方便。

当时开发APP1.0的时候可以说是困难重重，比如最简单的，在APP的首页做个banner幻灯片（轮播图）。

一开始是用写死的数据，所以轮播图显示一点问题都没有，但是一用后台请求回来的数据就杯具了，完全没有显示，只有一些标签。

在这里认真一想就通了，逻辑是没错的，因为这些标签加载完成的时候，后台请求的数据还没拿到，所以在页面没有显示轮播图的图片。

找了好久，最后是在国外的ionic论坛里找到答案的，他们说只要在回调哪里加上下面这句话就好了

$ionicSlideBoxDelegate.$getByHandle('slideHandle').update();  //重绘幻灯片

我照做了，但是还是没有效果，这就尴尬了，最后还是看官网的API才知道答案的，加上上面这句话还不完整，还要在轮播图标签加上识别' 把柄' '如下

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

这里的 delegate-handle="slideHandle" 中的  slideHandle  要与  $getByHandle('slideHandle') 中的slideHandle相一致；

确保重绘的幻灯片是自己想要的那个

还有就上拉加载/下拉刷新，这个也折腾了我好久，因为当时我不知道所谓的 下拉刷新  就是重新获取一次数据就好了（一脸懵逼，这么简单？），上拉加载  就是上拉翻页，百度一下什么都有了，只是我一开始不知道是这个原理（...，乖我是小白咯）；

其实还有很多，只要是第一次接触不是太了解，只要肯下功夫去学，慢慢就清晰了，我会继续加油的。

三、看似弱小而强大的力量 —— CSS

要我说，把一个完整的页面比喻成做一道美食的话，html应该是还没有加工的食物，js就好比配料，我们就属于厨司了，这样一道美食端到晚餐的桌面上会不会觉得少了了点什么东西？

想象一下这样的场景，你与你的女神在很优雅的餐厅吃饭，服务员把这个名厨炒的菜端到你们的桌子上，这么扑鼻而来的香味刺激着你的嗅觉神经，这时不叫一支82年的拉菲，对得起这样的情调吗，我相信你们不会错过的。

而css就像这支82年的拉菲，高贵而优雅，看似弱小却起到四两拨千金的作用。

我看似是对着css掌握的很好了，觉得我会写一大堆动画效果了，什么布局都可以完美处理。人就是这样，自大总会被事实打脸啪啪。

就拿一个<img />标签来说，直接放在一个div里面，你会发现这div中会比这图片大5像素作用，不管你设置padding：0、还是设置margin：0；这些都没有效果，因为css中默认img的display属性是inline；你仔细观看就会发现图片的底部高了一点，一般情况下是没有太大的影响的，假如真的影响到了就要解决掉。

要解决这个问题，你可以设置成下面这样  

img {display:block;}  

或者img{float:left;}

这个你可能会在css的一些基础设置里面就已经写好了，但是偶尔一些是没有写到的，除了这个方法，你还可以为这个img标签添加浮动样式，也可以起到相同的效果，这些是再常见不过的问题了。

还有一个让我耳目一新的样式，我觉得很神奇，就是在（pc端/移动端）屏幕定位居中显示的弹窗。我们一般是用  margin-left  或者 margin-right  取负值来左右平衡，这样是没什么问题的，也是解决上下左右显示的一种方法，一些老司机可能就没有这样的新鲜感了。

另一种办法就是下面这种了

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

不管你的宽高是多少，都可以相对这个元素的父级上下左右居中显示；虽然对其中原理的解释还不够清晰，但这个样式可以应用到很多方面，这就要看实际的应用了。

这个世界很大，比你我优秀的大有人在，要追逐这些大神的脚步，我们要马不停蹄的努力，这条路没有捷径，加油。

以上就是这一年内在工作上比较突出的收获了，这其中还有很多需要深入的知识，接下来我会更加努力的。

感谢在这一年中一直陪伴着我的各位，谢谢。

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