文章目录
前端初识
web前端发展史
- web1.0时代(2013):网页制作
- web2.0时代
- 弱前端时代(服务端渲染)
- 客户端渲染(浏览器渲染)
- 全面进军移动端
- node.js 全栈开发工程师
职位名词解释
- PM -Product Manager 产品经理
- UE - F User Experience 交互 (通常拿到UE稿FE就可以开发了)
- UI - User Interface 视觉(通常拿到UI稿就FE可以视觉还原了)
- FE - Frontend Engineer 前端开发
- RD - Research and Development engineer 研发工程师(一般指Server,负责后端服务设计和开发,数据库建设,服务端搭建等)
- QA - Quality Assurance 测试
- OP - Operator 运维(开发)工程师
开发流程
- 一般开发流程: PM 提需求&评审 -> UE 提供交互稿 -> UI 提供视觉稿 -> FE&RD开发 -> QA测试 -> 上线(可能需要OP支持)
前端工作职责
- 基本职责: 常规开发、界面交互、数据交互
- 职位职责: 用户体验把控、对性能的追求
- 软素质: 具有探索精神、每天都在不断学习进步
前端开发职责
与UE协作,根据设计图完成页面制作,并对完成的页面进行维护和对网站前端性能做相应的优化。掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等;
项目流程介绍
产品需求—技术产品需求评估—视觉与交互稿—评估视觉与交互稿—技术开发—自测(还原度评估)—修复bug—再测试(还原度评估)—上线—线上观察
前端开发环境软件
前端开发常用的IDE(Integrated Development Environment 集成开发环境)
- 网页三剑客 (Adobe Dreamweaver、Adobe Fireworks[ Adobe Photoshop] 、Adobe Flash 目前设计效果图,很多公司都在使用sketch)
- Sublime Text
- HBuilder
- Webstorm (推荐)
- Atom
- Vim
- Visual Studio Code (推荐+) :
前端开发常用的浏览器(Browser)
- Webkit内核(V8引擎): 谷歌浏览器(chrome) 、 safari、大部分国产浏览器(360、搜狗、QQ、UC、猎豹、百度…)、安卓和IOS大部分手机浏览器…
- Gecko内核: 火狐浏览器(firefox)
- Presto内核: 欧朋浏览器(opera)
- Trident内核: IE浏览器(IE6 - IE11)
- KHTML排版引擎: 大部分网站都已放弃IE8及更低版本浏览器(例如:淘宝)
浏览器de控制台
打开控制台(F12、ctrl+F12、右击检查元素)
- elements:基础、原理 【style-样式 】
- console:控制台【可以当计算器,可以运行js代码,方便调试,打印页面内容,可以输出页面中的报错】
- sources:存放的是静态资源文件
- network:里面是所有的数据请求
代码编辑器VScode的安装
vscode 安装完毕之后,我们需要安装的几个插件:
- 中文汉化插件:chinese
- 在浏览器打开的插件:open in browser
- 设置控制已更新文件的自动保存 Auto Save : off 修改为 afterDelay
- 设置Font Size 代码字体大小
- 设置控制折行的方式Word Wrap: off 修改为 on
- 设置颜色主题: 设置我们喜欢的颜色主题