前段时间，公司来了一批实习的小伙伴，我负责给他们讲讲前端相关的知识，算作给他们做个简单的入门。

什么是前端

    百度百科 里说前端即部分运行在跨平台浏览器上展现给用户浏览的界面布局和动态设计。一个项目里，和界面有关的就是前端的，和数据有关的就是后端的。每逢朋友们问我在外面做什么，如果我说是做前端的，他们会一脸懵逼，如果说是搞计算机，他们就会说你牛掰。不过前端还好，不像做PHP，如果PHP和相亲的姑娘说我是做PHP的，不知情的妹子可能会联想到岛国的爱情动作片，所有PHP单身也是有原因的。

    那么前端到底是什么？可能前端小伙伴也不知道如何定义。

    前端架构师要懂一门后端语言，我就没见过，要求后端架构师要懂一门前端脚手架的。后端大牛请忽视！

前端起源

    在很久很久很久很久之前，应该是2001左右吧，前端不叫前端，前端被习惯叫做网页设计师或者网页制作，所用的开发工具基本就是传说中的网页三剑客。如果要修炼成为网页设计师，这三个工具必须会。到2005年，淘宝开始崛起，第一次在招聘网站上挂出了“web前端开发”这个职位。一直到2014年底，万维网联盟宣布支持Html5紧接着15年互联网+爆发，H5轻应用和APP开始盛行。前端成为了市场的香饽饽。薪水一路飙升。很多后端开始转前端，各种培训机构开始陆续躲起来。然后前端开发终于开始细分领域，有H5开发工程师，web开发工程师，iso开发工程师，安卓开发工程师，而这些被我们统称为“大前端”,当然大前端远远不止这么理解。

从入门到弃坑

    当然这次的主题是前端是坑，那么现在我就和大家一起来学习前端，从入门到弃坑。首先我们建一个txt的记事本，然后编辑他，写上hello word这个是每个程序员学习任何语言的入门词汇，然后修改文件名为html,然后双击打开。好了，在做的各位都成为一名前端开发工程师了，恭喜你们月薪至少1万（xx机构这样说）。然后又人会不屑的说，前端不就是（html,css,js）吗。好吧，那我们从入门开始进阶，编写css和js。

10+9=19
// 10+9=19,幼儿园小朋友都知道
10+"9"=109
// 那么10+字符9回啥等于109？
"10"-"9"=1
// 字符10-字符9等于1吗？
"10">"9"
// 如果字符10-字符型9等于1，那字符10真的大于字符9吗？
0.1+0.2=0.3
// 0.1+0.2真的等于0.3吗？

    如果你觉得可能很懵逼，没关系，再看看下面，让你知道啥叫绝望。回答下面的几个结果是否都是对的

[]+{}={}+[]
[]+{}="[object Object]"
{}+[]=0
[]+[]
true+true===2
true-true===0
true===1
true==1

    如果刚刚，我们入门了，那么现在开始慢慢弃坑吧。我虽然是前端，但是我还是喜欢PHP的，因为PHP开发人员经常对我说PHP是最好的语言，没有之一。然后JAVA不服气了，说java才是最牛逼的语言。然后C++很不屑的说我还没发话呢。只有前端不敢说最好，也不敢说最牛逼，因为JS存在，TM的就是一门不想让人学精的语言。都说计算机程序是有逻辑的，但现在自从我认识了JS之后，我就不这么认为了。

    我们再谈谈CSS里面的坑---兼容性。

    如果绝望刚刚开始，那么，我们再来了解CSS，css是调整界面样式的。刚开始我也很喜欢它，他是如此的美好，就好比女人的化妆，只要你使得好，能让页面变出花来。当然刚开始我也这么认为的，然后…出现了“兼容性”三个字，让我开始怀疑人生。你写的每一行css样式都不能保证所有设备的样式都是一样的。我刚毕业那会，要兼容的IE7，IE8有的还要兼容IE6。同样的布局我要写三套，引入各种hackcss兼容样式。

#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {width:130px;} /*会被IE7执行*/
所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;
IE8 最新css hack：
"9"　例:"border:1px 9;".这里的"9"可以区别所有IE和FireFox.（只针对IE9 Hack）
"0"　IE8识别，IE6、IE7不能.
"*"　IE6、IE7可以识别.IE8、FireFox不能.
"_"　IE6可以识别"_",IE7、IE8、FireFox不能.

    哪些80后的前端大叔大妈们，你们还记得这些痛吗。

    H5发布之后，我觉得我们应该抛弃Ie9以下的哪些变态的浏览器了，我还开心了一整。然后没多久，我又开始绝望，手机里各种平台的浏览器TM也不兼容。安卓的，ios的，然后安卓各种手机端，微信，UC的。我开始凌乱了，TM前端就是坑。

前端---一门横向发展的职业

    上面这些坑，我都能忍，毕竟我还年轻，多努力一些总该让我成为前端的风云人物吧。一年，两年，三年，直至今日，我整整8年时间。8年时间总该让自己在某个行业里横着走。然后我发现我错了。如果其他职业经验越多，能力就越强，这些职业属于垂直发展的职业。但是前端呢，TM是个横向发展的职业，怎么理解。你掌握的所有技能，总会被其他一套技能给替换。比如，你刚刚掌握了JQ，组件化angular开始流行。你好不容易把angular1.0学会了，那么2.0版本又是另外一套语法。然后你去一下公司面试，人家用的VUE，或者REACT,你一脸懵逼，你发现你工作了这么多年，你还是个小白。

前端只是js,css,html吗？我之前也是这么认为的，然后发现我错了。你要学习的太多了。你学会了这么多。你以为你很牛逼了。现实告诉你，在不同的公司，会用到不同技能，你在他们眼里，你就是个菜谱，面试你就和点菜差不多，这个你会吗，这个你会吗。当你犹豫学PHP好，还是JAVA好，那你还是来学前端吧，前端重来不让你犹豫，因为前端TM什么都得学。

前端——坚持下的来的都是真爱。

    很多人问我，很少见到做前端做这么久的。我真想说，我痛并快乐着。我爱前端因为我永远记得我给holle word加上颜色那一刻的心情，那是一种情怀,最最让我爱上前端，是因为前端很酷。现在的前端不仅仅做个页面那么简单了，前端可以做很多东西，小程序，轻应用，桌面应用程序还有H5游戏，比如打飞机，回合游戏。所以尽管前端坑我无数遍，我依旧喜欢前端。

    当然技术岗都不容易，都要保持不断学习更新自己的状态。