浅谈前端入门以及项目初创的经验

从去年1月份到今天恰好一年，值此值得纪念的一天，来点评一下这一年来作为一个前端工程师遇到的坑和总结一些工作经验。
前端的入门从HTML的标签开始，分为

• 语义化
• 样式

语义相当于word的格式，样式就是格式的细节。很多新手刚入门的时候习惯除了html``body后只用div,这样有两个坏处:一是不便于代码的维护查看，二是让自己的逻辑层次混乱，尤其到了写层叠样式表(css)的时候无从下手。常见的语义标签的嵌套层次应该是如下顺序:

• html
• body
• section(article,nav,footer)
• div
• h1,h2,…,p
• span,i,label

其次是样式的编写。这里遇到的两个大坑是定位问题(position)和行内块(display)。
position是一个非常重要的布局属性，通常是不会和float一块出现，一般我们想让元素固定出现在某个位置的时候，使用

position:absolute;

不过需要注意的是，它的父元素也需要有position的属性定义，不管是absolute还是relative,不然定位会直接到body或者整个文档流上。

值得一提的是，fixed固定定位是会让整个元素脱离文档流，挂靠到screen上，所以才不会受到滚动的影响，网页的导航栏<nav>可以尝试使用，加上一个headroom.js的轻量插件可以让导航栏更加好看。在移动端开发上，fixed会出现卡顿现象，并且IOS内核在键盘弹出时出现不兼容，这时最好选择relative定位。
定位问题的基础是盒子模型，HTML实际上是一门排版语言，每个标签都是对应着一个占位，占位符就是一个盒子。网络上有许多关于盒子模型的介绍，但是都说的太抽象，其实所谓的盒子模型就是把元素切成三个部门来看，外部，边界(border)和内部内容。

盒子模型

一般元素标签div都是默认占一行，所以排版的时候也是一行行排下来，当我们想要两个元素之间的间距变大，可以使用margin属性，想要父元素内部的子元素跟自己距离远一点就选择用padding。有些情况它们可以互相补充，所以总结下来就是一句话，同级用margin,不同级padding。margin和padding属性的写法基本一样，除了padding没有auto的属性。属性只有一个参数就是4个边距都相同，两个参数的情况，前面的是上下边距，后面的是左右边距，三个参数情况第一个和第三个指上下，第二个指中间两边，四个是最一般的情况，实际上可以用顺时针的顺序来排，第一个是上，第二个是右，第三个是下，第四个是下。特别的情况是属性值为auto的情况，理解了盒子模型，就是相对父元素的四个边，我距离你们多少由我自己决定，所以这是一种元素居中的方式。当选择绝对定位时也要元素居中需要用left和transform来解决，前者是父元素的距离，后者是自身的宽度。

说完了规范的position定位问题，剩下就是float浮动问题，这个属性与fixed有点像，也是脱离了文本流，但是fixed脱离的是全部有定义到页面的根元素，float则是脱离当前，到最相邻的有position定义的父元素去，这也是流式布局瀑布布局的基础，因为它能见缝插针，慢工出细活地找到空的地方占位。

正常布局

第一个float:left

三个div都浮动了

但是有时候会发现占的位是一个大坑，使用flaot属性就必须要面对清除浮动的问题。一个父元素的子元素浮动了，因此他们实际上不占空间，所以我们需要填充内容来将那些脱离文档流的地方撑开，所以常见的方法就是给这个元素加上clearfix的类名，基础写法如下：

content:'';
clear:both;
width:0;
height:0;

基本能解决问题,更多详细的可以参考

《那些年我们一起清除过的浮动》

另外一种要让两个元素在同一行的方法就是使用display属性，这种方法的本质就是将div这种默认是块(block)变成像span一样的行内块(‘inline-block’),这种写法相对于float的优势很明显，位置能掌控在自己手中，并且不用整个页面都是clearfix的身影。
上面的知识(语义标签、层叠样式表的属性和属性值、盒子模型、清除浮动)是作为一个前端入门的基础素质，能理解浮动的发生和处理方法就差不多了，在工作中除了PM和UI给的设计图，一般我常用的属性是

font-size:14px;
font-family:'Arial';
box-shadow:rgba(200,200,200,0) 0 0 5px;

前端入(进)完门(坑)，也就是差不多能自己独立写出一个完整页面(nav+body+footer+图标)后，基本就要开始思考用户交互的问题，这个是所有互联网产品都应该思考的核心问题。之前深圳有一款叫酷米客公交的APP，发版初基本功能都能实现并且没有太大的bug，但是许多存在许多交互的缺陷，这个产品上了应用商店后一直不温不火，直到今年几次改版后我能感受到做产品的用心，所以我才会去推荐其他人用，所以前端在做交互其实也是要思考产品的用户体验，让人感觉到诚意。常见的实习生或者创业公司会犯的错就是不去考虑图标的清晰度，用sprite图也是图标失真后难以维护的原因，现在大部分解决方法是用font-icon和svg来表示图标。(使用图标是让整个毫无生气的文字网站活起来的最简单的方法)。

因此，回写页面并且有经验后就开始javascript的奇妙之旅，认真啃js的话还是要去看经典(砖头)《javascript权威指南》，而如果是直接上项目的话就去HTML教程里简单把六个基本数据类型。跟C++一样，在使用之前需要声明，六种类型是

• String
• Number
• Boolean
• Array
• Object

其实不管哪种语言，都会有相似的这种数据类型，还是C++,字符串，整型，布尔，数组(链表、顺序表、哈希)，结构体对象。JS最大的好处就是不用去考虑这些底层的越界问题。交互实现的时候我们也是要考虑算法的问题，但是基本都是操作DOM元素，所以比较直观，该做些什么，右键审查元素就能定位到，所以最简单的项目就是绑定一个点击事件，写了这一个其他的都大同小异。有时候写原生的js会让人抓狂，获取页面元素的步骤太繁琐，所以我们请出了大杀器jQuery。jQuery实际上是一个函数库，封装了元素选择器和事件绑定两个最常用也最实在的方法。它使得我们获取DOM能像写css那样直接，几乎不用动脑，譬如用原生的js来获取页面元素 p:

var ele = document.getElementsByTagName('p');//获取页面所有p元素

使用jQ:

var ele = $('p');//同上
var ele2 = $('div p');//与css一样的选择器写法获取div里面的p元素

事件绑定的封装，原生的基本写法：

document.getElementById("btn").onclick=function(){alert('点击事件')};//先获得元素，实现onclick的方法

jQ的写法

$('#btn').click(function(){alert('点击事件');});//接口封装的更简洁;

以上两个事件绑定的写法都涉及到一个笔试或者面试的常考知识点，就是闭包的概念。所谓JS的闭包用一句话来说就是”函数的内部定义函数，内部函数可以调用外部的变量”。
更进一步，其实JS的对象的实例的本质都是函数。
在开发项目，尤其是涉及到ajax的时候，总是会在原来的div容器里添加更多的元素，这时我们会发现点击事件(click)不能触发了，怎么点没有反应，这是因为ajax请求回来的拼接数据append到父元素后已经是我们的js执行完以后，所以当然不会有反应。所以页面点击元素没有响应的问题，一般有两种解决方法：
1.在拼接的数据后再加上事件绑定
2.

$('body').on('click','.ele',function(){
    //your code
});//将事件监听绑定在父元素或者根元素上

一般的项目写到一堆的事件绑定后就差不多了，闭包函数内实现的大多数操作css的属性，显示、隐藏内容，现在主流的ajax数据交互其实也是一样的东西，不断重复的工作。说到实习生做项目，因为自身的经验问题还有许多时间制约，我建议是多用插件，尤其是涉及到canvas的，先把项目做完，再来研究源码有时候更能让提起我们的兴趣。