抛弃原来专业，步入计算机行业，已经马上三年了，最近感觉学习遇到了瓶颈。
会的东西不少，由于这样的那样的借口，从来没有把自己会或者不会的东西重头到尾的梳理一遍。也只有国庆长假能给这么一段时间，让自己放空一下，静静的回想一下这三年来所有的过程了。
入坑之前
记得还是三年前，刚毕业不久，从另一个行业刚离职，到北京工作，找了一段时间工作以后，发现原来的专业所对口的工作，并不是自己喜欢的工作内容。然后跟朋友聊天，便推荐我学计算机，因为我做事思路清晰，挺喜欢钻研，而且这个行业也刚好在当时是一个高大上的工作，试想一下如果可以像电影里面的黑客一样，敲几行代码就可以为所欲为；再近一点，现在社会已经步入互联网社会，做计算机相关的，肯定比其他行业更能把握这个社会的发展风向。对自己日后的发展也是很有帮助的呀！
于是乎，就听从了他们的建议，但是摆在面前的又是一大堆的选择：UI设计、web前端、H5、Android、iOS、PHP、java、c/c++、python…
我的天，这么多一个个的专业词汇摆在面前，而我只停留在会用办公软件，以及对VB的一丝了解，哦，对了，还会玩各种游戏。从来没有了解过这些名词所对应的专业知识，做选择，怎么做啊？
然后就只能找已经从事，或者了解这方面的内容的前辈来了解一下了。
他们对我说，安卓和ios就别考虑了，java学的人都烂大街了(当然现在也还有好多初学者开始学习)，c和Python入门门槛比较高，没有基础的话不太好，你可以去看看刚兴起的H5，这个最近挺火的！问了几个人，都给出了这个类似的结果，原因就是我基础太差了。 T_T
然后，就开始了学习之旅。报了一个班。
学习的过程用一句话来说就是，痛苦并快乐着。刚开始接触一脸懵逼然后跟着代码一行行敲，看着代码一个个理解然后记忆再把它变成顺手就能敲出来的工具，这其中的滋味只有经历过的才能明白了。
什么是前端？就是前端啊 ！
不如问，前端能是干什么的？到现在我也没有一个准确的定义。但是现在的我可以这么说，所有带屏幕的设备上，你一眼能看到的内容，大都是前端的工作成果。大到Google、百度，小到单机测评，只要你能看到，都是前端对数据进行渲染做到的。(如果抬杠说，java和php可以生成数据流直接展示，我也不辩驳，因为html并不是前端的专属，但是是你们的潜意识里把html方面的bug推给前端的)
准确的来说，到目前为止，前端的使用的代码主要有三大块：html、javascript、css。(当然如果非要把html5、css3、jq都给数出来的话，我就不陪你数了，因为单单一个js就可以数一个晚上了)
前端的主要职责就是，通过参与设计制作所有能看到的界面(页面)，然后由用户进行操作(交互)，跟后台(或者我经常用的一个词“服务器端”)进行数据交流，然后对数据进行渲染，在呈现一个新的界面给用户，使用户享受到舒适的使用体验。日常工作就是写页面，然后跟后台进行数据对接，测试，然后循环往复。
综上所述，这就是现在我认为的前端。
但是回想起刚入坑的时候，什么是前端？就是前端啊！(问这么白痴的问题…)前端要学什么？学前端啊！(问这么白痴的问题…)前端是做什么的？做前端啊！(问这么白痴的问题…) T_T
html
刚接触的时候，印象特别深刻！
记得那时一个大晴天的下午，刚进一个教室，带我们(还有一个是我同学)进去听一下老师讲基础，然后老师就开始说：“大家在桌面上新建一个记事本文件。然后打开它，跟着我一起输入<html></html>,然后在里面写<head></head><body></body>,然后在body里面写<h1>Hello World!</h1>,然后保存。现在把它关掉，把后缀改成html然后打开…”。打开以后就是很惊讶的表情，我当时的基础大概就是这个样子的。“哇，刚才还是乱七八糟的东西，现在就变成一行字了，而且是一个网站！！！”，当时的真实写照。再然后，又给说了一些经常用的标签，h2、h3、h4、h5、h6、ul、ol、li、hr,然后用行内style修改了一下字体颜色，还有hr的宽度和颜色，一节课居然就过去了？自高中以后，除了玩游戏没有感觉时间过得比这个更快了。我当时就决定要搞这个了！
然后就开始了一段时间的学习，开始慢慢认识了更多的标签。并且慢慢的把他们的特点记住，并灵活运用。
比如form表单，里面各种各样的输入框选择框，还有按钮。table表格，里面各行各列然后跨行跨列，表头标题。有序列表、无序列表、定义列表，当然还有div、p、a、span、img…。然后到h5里面增加了新的元素和更多语义化标签就不一一去数了，但是有一个不得不说的神奇标签就是现在不怎么用了的iframe了，很威武霸气的。
直到有一天，换了一台电脑，忽然发现写的汉字，全部都是乱码？一个个的火星文，一脸懵逼。
这才知道，原来head不是个花架子了，里面是可以写东西的，而且写的东西很重要！
下面是我以前用过的一个head,简单兼容移动端和其他终端的。
<head> <meta charset="utf-8"> //编码声明 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //优先使用IE最新版本和Chrome <meta name="viewport" content="initial-scale=1,maximum-scale=3,minimum-scale=0.1"> //缩放 <meta http-equiv="Cache-Control" content="no-siteapp"> //禁止百度转码 <meta name="keywords" content="your keywords"> //页面关键词,多个关键词用英文逗号隔开 <meta name="description" content="your description"> //页面描述内容 <meta name="author" content="author, email address"> //作者 <title>your title</title> //页面标题标签</head>还有一些其他的根据实际情况兼容iOS和其他屏幕尺寸，或者更多功能的，百度可以百度出来好几页，就不往过搬了。
这里就可以配合css写一些静态页面了，直到后来有一天。他们说页面只要一个空的body然后所有html都是在其他语言里面算出来的，当时这么理解的：“算出html代码？天方夜谭啊！”，然后才知道原来真的可以实现，只要保证最终结果和你要的效果一样就OK了，然后就是先在页面上写好效果，然后在关键数据部分用特殊标记记录下来，然后把数据填进去，后台直接返回一个拼接出来的页面。这个页面的后缀已经不是html了，变成了一堆零散的零件！！！哇，又学到了！当时就在想，其实html语言只是一个规则，只要能让浏览器认识(解释器识别)，就可以了，完全没有必要一板一眼的去写他。这些想法在后来的vue的学习中也得到了实现，因为他的组件全是.vue作为后缀。工作中自己还尝试着写了.common、.page这些固定样式的组件，用load进行加载，然后修改里面关键数据，省了好几百行没用的代码。当时就感觉牛*炸了！后来才发现其实并没有什么卵用，只不过是花里胡哨的方便一下阅读这一个优点而已，而且文件布局反而麻烦了…单不管怎么说，总归还是尝试了一下不是？
再然后，就开始接触vue、angular了，最先使用的时候是在html直接调用一个js用里面的方法进行数据的绑定和事件的运行，第一感觉就是，这tm什么玩意儿啊，为了绑定个数据反而引入一个好几百k的框架，这是为了增加用户体验呢，还是为了赚用户流量呢？然后了解了node，在node环境下再返回来部署vue，哇！不一样了，把一个html拆分成一个个组件，就好像是一块块积木，想怎么组装就怎么组装，然后组件之间进行通讯，太棒了，原来这才是他们的真实目的啊，一开始错怪它了。
到这个时候，也就是现在这个时候，眼里已经没有html结构那种概念了！说个最简单的，你直接把一个div保存为html，用浏览器打开，照样是一个网页！就是这么神奇…
到现在，我理解的html是这个样子的：
不管你怎么写，html里面的标签分为三类：
第一类是说明规则的或者附属信息的，就是
第二类是块级标签：
<div>、<p>、<h1>…<h6>、<ol>、<ul>、<li>、<address>、<blockquote>、<form>等等这类标签其实总的来说就是一个div衍生出来的(除了一些特殊的标签麻烦一点)，如果你有兴趣，你可以只用任何一个标签写完一整个页面，包括输入框，按钮，等等。
第三类是行内标签：
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
1.行属性标签它和其它标签处在同一行内
2.行属性标签无法设置宽度，高度 行高 距顶部距离 距底部距离
3.行属性标签的宽度是直接由内部的文字或者图片等内容撑开的
4.行属性标签内部不能嵌套行属性标签(a链接内不能嵌套其他链接)
还有一些被称为行内块标签：img,input,textarea
当然，如果搭配js和css，一个div就可以实现所有标签的效果了。
css
写了一个html，然后发现所有的内容都是默认的黑色，所有内容一字摆开，跟别人的网页不太一样啊？这是什么情况？
然后，老师变戏法似的就让我在写一个这样的东西出来<h1 style="color: yellow;">Hello world!</h1>,然后奇迹就出现了，这行字就真的变成yellow了！然后就开始各种height、width、background、margin、padding、border、font……来使这个hello world变得越来越花里胡哨了。
直到又发现，写了n个div，想改一下背景颜色，就疯了！为什么？照着这个方法，n个div一个个改？能不疯吗？于是乎，在head里面就有这么一个标签<style>,把所有的css样式全写这里面，然后给需要这个样式的标签一个类(class)名,就可以对所有class为某个值的标签进行控制了！再后来，就直接写一个.css的文件，然后在head里面用<link>引入，就可以达到同样的效果了。而且可以根据你自己喜欢，指定一整套的css样式表放里面，比如你做了100个按钮的样式，你就可以把他们都放进这个css里面，用的时候直接写class名就可以用啦！而几乎所有的UI组件库都是这么做的，比你做的多的一个就是，他们把你记在脑子里的100个类名所代表的意义用一个文档给展示了出来，让更多的人去使用并且帮忙完善。然后更完善，用的人更多，一个良性循环就诞生了。
然后慢慢的接触：
- css选择器
- css安装自定义字体
- css动画
- flex弹性布局
- css3D转换
- More
各种各样的css写出来，让页面越来越炫！
在往后，和js配合以后，让页面变得更加不可思议，各种流星，雪花，3D旋转。
常规的css大概就是这么个情况，直到有一天我看到这么一个东西：div.main{height: 200px; width: 200px; background:#ccc; >img.userlogo{ height: 100px; width: 100px; border-radius: 50%; } }
这种写法什么鬼？能解析吗？我马上写了一个一模一样的，div没问题，但是里面的图片样式却没有了，这是什么情况？马上上网查了一下，又学了一个新的名词css扩展技术，虽然还是控制页面元素的样式，但是基于css进行了深层次的开发，使可读性增加，还引入了一些js语法。事情变得越来越有意思了!目前常用的就是less、sass/scss。
到这里其实就已经差不多明了了，原来js可以把一个文件解析以后再给浏览器去渲染页面？那岂不是说head里面的其他内容也可以控制了？
脑子里马上有了一个初步的模型：一个非常复杂的页面效果，源代码其实是这样子的：
<!DOCTYPE html><html></html>没了，就是这个样子的！其他的所有的一切，全都交给js去做！请求数据，渲染数据，渲染样式…随便你想怎么玩！
然后我就做了一个样的总结：
如果把html元素作为一块块积木的话，那么css样式表就是针对每一块或者每一类积木进行样式的规定，而且不论怎么写最终只要能给到浏览器解释器能解释的通的格式，那么根据你心情随便你怎么写，但是最后要的还是最原始的格式！
而且提到css不得不提的一件事就是渲染规则，既然那么多种写法，总得有一个先后顺序吧！
css渲染规则(就近渲染原则)：css选择符权重渲染规则：important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 >通配符 > 继承
js
js，学前端最痛苦的经历啊！但是不得不说也是最开心的经历！
一上来，JavaScript，好长一个单词啊。而且前四个字母Java什么鬼，怎么忽然开始学Java了？什么是JavaScript？，作为初学者，我看完百科的介绍，跟没看差不多。
但是随着慢慢的学习呢？
从一开始跟着教材，一脸懵逼的，拿一个字符串然后去验证它是什么数据类型，得出是一个String以后，乐的跟二傻子似的，但是不知道为什么乐。
然后拿着 1+1 ,去做判断，如果 1+1==2 ，弹出一个弹框 “哇， 1+1=2”，然后又开始沾沾自喜了。
在然后，从0开始循环一直循环到 <=9,然后输出了0123456789，哇，也不知道哇什么呢？
再往后，拿一个数组，先看里面到底有什么，然后看里面到底有没有什么，再然后把里面的什么给拿出来，再放回去，再放到第一个，然后打乱，排序，针对里面的那个什么进行改变，然后再拿着他看看她是不是 String，然后这个数组被折腾的差不多了，再建一个数组，跟他并在一块，重复刚才的那个过程，比较相同，比较不同，然后切割重组…也幸亏那是个数组，不是个人…
数组折腾完了，在搞一个对象，然后看看他的key是什么，value是什么，key是key的value是不是key是key的value，然后在循环一下，判断一下，然后在对象里面的一个属性居然也是对象，然后…幸亏不是一个人啊…
到这了，开始函数了，把上面所有的执行过程，用一个函数对象包括起来，去里面执行去，让你执行你再执行，然后加个定时器，不停的执行…各种组合，各种玩法，只有想不到，没有组不成的。
基础就这么一脸懵逼的，搞完了？
然后开始有意思的了，获取页面中的一个元素，然后折腾它，改个内容啊，改个样式啊，一会显示一会隐藏啊，增加动画啊…
然后点击之前是这样的，点击完了是那样的，鼠标放上去是另一个样子的，然后按按键盘，敲敲屏幕…
哇，居然就这么完了好久？
再然后，js面向对象编程？
工厂模式？监视器模式？…什么乱七八糟的。
然后稀里糊涂的就写了一个构造函数，然后用类似的方法实现其他各种模式，好麻烦啊，但是还要学呀！里面的好多思维模式到现在还是不明白…
再然后就用构造函数思路，封装了几个常用的功能函数…
这是为认为的面向对象：
js面向对象编程,就是所有的执行目标都作为一个对象来进行操作，所以经常说的一句话“万物皆对象”，对象有几个特点：对象方法分为私有方法和共有方法，对象具有继承性、多态性、可封装性。面向对象就是针对这几个特性来实现不同场景下的功能体现，所谓的各种模式，只不过是前辈们为了帮助新手总结的一些常用的写法而已。
其中继承性，经常被我认为是this的指向问题，如果this指向发生改变，该方法(或属性)就不可被继承，那么就需要用一个共有属性来继承过来。只要牢记这个的话，this指向不出问题，然后其他问题就是逻辑思维上的烟雾弹了。
(跟人讨论过，但是没说过我，随着见识越来越广，等真的发现问题了再回来改！)
到这里，基础部分就差不多都涵盖了，直到忽然想起来的一个问题，这些数据都是死的，在我自己电脑上是没问题啊！但是这么实现那种分分钟上百万条数据的数据呢，我不能一个字一个字写吧！
这就引入了一个新的概念 ajax,作为和后台对接的关键部分，当时讲的是分为四步：
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据，开始和服务器端交互
4.注册事件、更新界面
原生代码：
get请求
//步骤一:创建异步对象var ajax = new XMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端ajax.open('get','getStar.php?starName='+name);//步骤三:发送请求ajax.send();//步骤四:注册事件 onreadystatechange 状态改变就会调用ajax.onreadystatechange = function () { if (ajax.readyState==4 &&ajax.status==200) { // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的 console.log(ajax.responseText);//输入相应的内容 }}post请求
//创建异步对象 var xhr = new XMLHttpRequest();//设置请求的类型及url//post请求一定要添加请求头才行不然会报错xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.open('post', '02.post.php' );//发送请求xhr.send('name=fox&age=18');xhr.onreadystatechange = function () { // 这步为判断服务器是否正确响应 if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } };但是这个真的好麻烦啊，然后jQuery应运而生，一个$.ajax()，里面带上参数，齐活！而且好多方法他都帮忙给封装好了！
有了一个jQuery，就开始真的入坑了，各种各样的js插件，应接不暇啊！针对各个功能尽量做到极致，而且还在不断更新中。
然后又自学了node.js的部分内容，至少会用npm安装一些需要用到的插件了，然后部署vue，angular开始跟着教程先一步步做，然后看一些常用的api，但是由于公司项目中没有用到，也只能学习一下，为下一段工作做准备了。
闲暇之余，跟着php又学了一些php代码，并且成功的写了一个连接数据库的本地用户管理后台。了解了三句半的sql语句。
在然后到又知道了一个github之后，更是一发不可收拾，曾经跟我朋友说，github就是个坑，跳进去以后就不想写代码了，因为你辛辛苦苦写的自己认为很好的功能，人家已经帮你封装好了，你需要的就是看看人家是怎么写的，然后借用一下，star一下就好啦！
但是，越来越接触那些大牛们的代码，越发的感觉自己掌握的东西还不够，但是眼花缭乱的代码，反而让自己迷茫了。
梳理一下以前学东西的经历，让自己清醒一下，开始下一段的学习吧！
一个然后走遍全文！哈哈！
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
