个人前端学习经历

时间 2019-12-09

标签个人前端学习经历栏目职业生涯繁體版

原文原文链接

写在以前

从事了三年多前端开发的工做，前先后后学习了不少东西，感受学得愈来愈心累，可好像本身也没有学到些什么，也没有摸清晰前端的思路，想写篇文章总结一下。css

学习过程

1. 原生js/html/css阶段

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

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

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

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

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

以后本身所有手写html/css/js模仿一个用户体验很好的网站。完成以后对html/css已经有了一些认识，有了些底气。jquery

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

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

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

今后漫长的时间里面，开始html/css/jquery实现页面的阶段，不断的取dom操做dom。git

比较吃力的时候

使用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工做流方式

克隆项目到本地

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

成员A建立一个新的分支

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

成员A提交代码

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

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

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

6. 实用工具

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

最后

这篇文章是本身工做中的一些总结，如有不对的地方，欢迎你们指出。