WEB前端经验之谈（没有速成，只有不断积累。）

2013年8月25日，我人生中的第一份正式工作开始了，第一份工作做的是当时学习的asp.net，用的是C#语言。

到第一家公司上班是公司是做一个OA系统，不过我去的时候大部分都已经完成了，剩下的都是细节和BUG处理，而就在第一份工作3个月后，我就走上了自己的路，准确的说，我是从2014年才开始自己真正的前端之行。

2014年3月初，辞职，休息了一个月，因为离职原因是我想转方向，从后端转到前端，我现在还记得当时主管签我的离职协议说的那句话：“不就签个字嘛，这个很简单的。”，确实，对已经走到主管这个位置的人来说，签个字是很轻松的事，但是对于一个初入职场的白丁来说，任何选择都必须经过自己的慎重考虑，不然一步走错就没有后悔的机会。

第一份工作辞职原因是因为我重新给自己定下了一个人生目标‘前端工程师’，当然，现在想想也是当时对前端这块理解还不够深入，因为我自己还有个目标就是‘架构师’，所以在2014年4月初，找到了自己第一份前端工作，但是由于总总原因，在这个公司只待了2个多月时间就辞职了。

2014年6月中旬，我的第3份工作，也就是现在的工作，在公司主要是做公司自己网站的页面，但是待了几个月后对公司里面各种问题和各种看法也不断的纠缠自己离职的心情，所以如果没有意外将在今年3月中旬离职。

ok，所了这么多废话，也该开始本文的主题了。

WEB前端，不知道什么时候出现的这个名词，向后看几年，WEB前端也就是集设计、切片（写页面）、js处理、兼容处理于一身的美工，现在回过头去看。可以说几年前的WEB前端就是一个打杂的人员，因为很多页面后台人员就可以搞定，所以那时一个中小型公司需要真正的一个WEB前端人员的很少，而且那时候WEB前端也还不成熟。（下面的前端皆为WEB前端）。

但是，就在这几年里面，前端却发生了翻天覆地的变化，各种框架满天飞，各种交互、各种插件等等，也就导致了现在很多初学者学会了懒惰，以至于接触了N多框架、插件，整理出了几个比较入眼的特效然后就到一个公司5K、6K的要价，然后被公司各种等通知p掉。

看到这里可能有的人觉得不服气了，但是你还真不服气，这一年时间接触前端，我也仅仅感觉自己才入门而已。

我们先不说如何手写代码，先来看看代码的工整性。

先来一段HTMl代码：

<ul>
<div></div>
    <a href="#"><li></li></a>
</ul>

　　ok，代码的排列格式不说，a标签包裹li标签，不知道有多少人用过，反正我到现在为止没有这么用过。

现在html5也正式落地了，html5中有个提议就是代码的可阅读性和对seo的友好性进行了优化，多了header、footer、nav等一些含义明显的标签，而这里ul标签下面直接出现了div和a标签，本身就是对ul标签的一个误用，当然，这里可能有人说加一个a标签方便点击链接啊，如果你这么认为我也就无法可说了，确实，我也不明白这么写有什么不好，浏览器能解析、代码也可以完美的格式化。但是，这样的逻辑意义和在？

问题这里先不做解答，再来一段css

a{display:block;}
a.info{display:block}
a.info{color:#f00}

　　这是一个简单的css样式，当然如果你的参数是上面那种情况我建议你做一下优化，或者去了解下css样式的作用域和优先级，很多代码其实都是重复的，有时候花点时间去优化，或者写的时候就避免这种情况更好（我现在所在的公司就是这个情况，上面老大不做，我们这些小兵也只有干瞪眼）.

最后来段js

if(true)
alert(0)
if(true)
alert(1)

　　如果你想编写一个阅读性好的代码，请在if的执行内容放在一个大括号内，随然这样也可以执行，但是，如果代码太多了，这样的代码读起来很累，也不利于格式化，当然，如果你要压缩就另当别论了。（我用的ide是vs，保存的时候可以自动压缩一个文件包括js、css、html）

综上所述，其实希望初学者在开始学习编码的时候保持一个代码精简不重复、格式和逻辑清晰的风格，这样对你未来的工作有很大帮助。

下面贴一段我写的代码，仅供参考

                    _run = function (run) {
                        run = run || true;
                        //清除一下定时器
                        window.clearTimeout(zd.public.cache[_cName]);
                        zd.public.cache[_cName] = null;
                        _op.num += 1;
                        if (_op.num >= 0 && run) {//判断主动关闭或者次数达到限制
                            zd.public.cache[_cName] = window.setTimeout(function () {
                                //传出：【当前次数倒数,运行方法】
                                _op.fn(_op.num, _run);
                            }, _op.time);

                        } else {
                            _exit();
                        }
                    },

　　这段代码是截取我写得一个js里面的一小段内容，当然，格式是有IDE自动处理的，这样也让我保持了一个格式清晰的编码风格，对于代码混乱的文档看着也很头疼。

如果你是新手，编写代码建议你学会使用ide，当然，在你知道某个代码意思的情况下，虽然在学校的时候老师习惯叫我们手写代码，但是我推荐使用ide，ide的智能提示可以提高编码速度，自动格式化功能让你在编写代码的过程中也不会出现层次不清晰的情况，所有代码一览无余。别人看你的代码也不累。

作为初学者，养成一个良好的编码习惯对自己的好处不少，当然你还要学习更多的东西，下面是对初学者的一些建议，仅供参考。

1.学会自己写东西，不要动不动就拷贝别人的代码。

　　任何东西，自己会了才是王道，如果你学会的只是拷贝，那么前端的路你也止步于此了。

2.兼容性要做，但是首先学会抛弃。

　　到目前为止，前端的兼容也还是前端人员一个头疼的问题，css兼容、html兼容和js兼容，初学者可能不会想到同样的一段js在谷歌、ie、火狐中执行的结果不一样，严重的直接报错，但是，兼容性不是你首要做的，现在兼容性问题都已经很少了，大多数都是因为低版本问题，我相信过几年后低版本基本上都会没有了，而初学者现在所需要学习的怎么去编写代码，而不是怎么去处理兼容。（现在很多兼容性问题百度一下就出来了）

3.打牢基础，慢慢成长。

　　现在很多人习惯用jq的dom操作，到过来纯js的操作都不会了，这样下去是对自己的不负责任，我现在就是这个情况，jq用得很习惯，但是纯js操作却一塌糊涂，现在还得花时间去学习基础。

4.减少页面的资源链接，执行代码放在页尾。

　　减少资源链接，是对网站加载的提速，执行代码放在页尾，也是对网站加载的提速，对与用户而言，花大部分时间去加载一个网页已经很痛苦了，所以我们要从一开始学会如何优化网页。

5.前端做的事情不少。

　　在你打算学前端的时候就要做到学会前后通吃、页面架构、ued、seo等等，前端现在发展起来了，水也开始深了，一定要保持一个不断学习周边知识的心态，你不可能编写一辈子代码，而是用仅有的代码发挥更大的作用。

6.抛旧成新。

　　html5+css3的时代，之前的html和css能抛弃一部分就抛弃一部分，从新学起，不然等你学会时你已经晚了。

7.路要一步一步走，目标要不断坚持。

　　前端学起来没有后端的枯燥，但是入门容易深入难，现在很多前端人员不是设计转型过来就是后台转型过来的，但是，前端的js的水最深，里面的东西也是最多的，要编写好js程序，首先给自己明确目标，然后就是不断的坚持，多百度，多看看大神的源码，对你帮助很大。

这篇文章就到这里了，希望能给到初学者一些帮助，这篇文章没有多深的水分，不过对于初学者来说还是有点小用。

PS:给自己打个广告，我是WEB前端小菜鸟一枚，上学不学无术，入社会时不小心误入WEB前端这个行列，幸运的是入门的时候没有给我亮起红灯，如果你要找我，可以QQ搜索zoeDylan,寂寞的svip6,总是被列入红名单，还混迹于前端周边的一些群。如果你在成都，我们可以一起喝喝咖啡聊聊天，说不定还是同事。