我的前端学习经历

写在之前

从事了三年多前端开发的工作，前前后后学习了很多东西，感觉学得越来越心累，可好像自己也没有学到些什么，也没有摸清晰前端的思路，想写篇文章总结一下。

学习过程

1. 原生js/html/css阶段

这会儿刚刚毕业实习，一切都不懂，仅仅会的也是在vs里面拖动按钮，列表等绑定数据，前端懂得也是点点皮毛的表格嵌套，问我大学学了前端什么的话，答案是什么都没有学到！！！

然后开始了我学习前端摸打滚爬的血路史。

第一个项目（都称不上项目）是自己设计网站首页效果图然后还原。开始熟悉ps,仿着其他网站自己画设计，画得很丑，也一次又一次的修改，最后自己熟练了ps的使用。最深刻的收获还是带我的师傅左一遍又一遍告诉我的，“前端一个像素都特别重要，一个像素能影响整个页面布局，一定要细心”，这让我养成了今后严谨布局的习惯。

之后就是还原，基本都是div标签，都没有太弄懂各个标签有啥用处，感觉能用就行。css基本都没有复用，写完很多css样式。虽然看完了基础的js，但自己写还是难，真正理解了的getElementById,getElementsByTagName这些，就知道是取元素用的，之后看网上示例实现了banner滚动，无缝滚动之类的。

这算了解点前端三大将，明白了点前端主要是干嘛的了。

之后自己全部手写html/css/js模仿一个用户体验很好的网站。完成之后对html/css已经有了一些认识，有了些底气。

凭靠着这两个不成型的项目（但我今天再去看，我觉得是很认真的，看着很清晰，很舒心）我获得了第一份工作。

2. html5/css3/jquery/js进阶 阶段

第一份工作是做商城的，大量的出活动页面，各类页面布局。开始使用header、footer、nav等html5标签，大量的transform、animation、keyframes等css3动画实现，这个阶段锻炼了css/html以及html5/css3。当然原生js这时候就很吃力了，jquery拯救了我，那会儿我觉得jquery简直是上帝。

从此漫长的时间里面，开始html/css/jquery实现页面的阶段，不断的取dom操作dom。

比较吃力的时候

• 使用canvas实现移动端简单小游戏时候，canvas学习网站
• 自己写一些公用小插件的时候
• 复杂的活动操作，如刮刮卡、摇一摇之类的

推荐阅读

• 大量的dom操作绑定,需要用到模板引擎，我使用的是Handlebars和art-template
• 移动端的弹性布局,阮一峰老师的Flex 布局教程

pc和m端的布局

• pc端 设计稿1920px，最小兼容1200px,定位一般基于1200px
• m端 设计稿 640px 或者750px

pc和m端的布局单位

• pc端 一般使用px和百分比
• m端 m端一般使用rem,px,百分比，活动页一般使用rem，字体不要用rem,更好的是用flex布局
• 涉及兼容使用css媒体查询@media

切图和图标

• 切图拉参考线将切片存成web格式，透明图片用png,一般使用jpg，调整质量，压缩图片大小
• 图标可设置成字体图标，如Iconfont-阿里巴巴矢量图标库
• 使用2倍图标，多个图标整合成一张png图片，通过background-size取到

3. vue阶段

刚开始学习Vue，使用script标签引入vue1.0，学习vue的语法。实现整个页面不用操作dom,改变数据会自动操作dom,这个时候感觉Vue真牛，代码也简洁了很多。

学习Vue的生命周期，Vue的动画等。

然后学习es6,我看的是阮一峰老师的ECMAScript 6 入门

es6需要掌握：

• class 类的使用的继承
• let/const 和var 的区别，及他们的使用
• promise 解决回调的问题
• ...扩展运算符实用
• 数组和对象的解构和扩展
• ``模板字符串的使用
• async/await 请求方式

然后接触单页页面，自己尝试搭建环境，学习webpack的使用,了解package.json，webpack.config.js文件北荣，了解webpack打包之后是什么，页面需要引入什么。

了解组件化是什么意思，实现组件化后熟悉的html头部、页面在哪里。

最后使用vue的脚手架工具Vue CLI,搭建简单项目，学会Vue Router,学习vue中数据的管理vuex

4. react 阶段

学习react

1.react 中文文档：doc.react-china.org/

2.React组件生命周期小结：www.jianshu.com/p/4784216b8…

3.React.js小书：huziketang.com/books/react…

react 状态管理

1.redux: redux.js.org/

2.mobx: cn.mobx.js.org/

3.mobx详解：www.jianshu.com/p/505d9d9fe…

下一步学习React Native

React Native中文网: reactnative.cn/

5. SVN 和git 的使用

刚开始在项目中都是使用svn,就是简单的获取提交和解决冲突。后面慢慢更多的使用git,却感觉git还是比较复杂的

熟悉的git工作流方式

1. 克隆项目到本地

git clone ssh://user@host/path/to/repo.git

2. 成员A创建一个新的分支

git checkout -b new-branchA # 创建并切换到新分支new-branchA

3. 成员A提交代码

git status # 查看修改
git add . #提交到暂存区
git commit -m "提交注释" # 提交文件
git push origin new-branchA # 将提交推送到远程仓库
复制代码

4. 成员A发起一个Pull Request
5. 项目维护者审查pull request，没问题后Merge pull request
6. 成员A或其他成员获取更新

git checkout master # 切换到master分支
git pull origin master #拉取远程master分支最新代码合并到本地仓库
复制代码

6. 实用工具

1.can i use 查看兼容：caniuse.com/

最后

这篇文章是自己工作中的一些总结，若有不对的地方，欢迎大家指出。