前端工程师

web前端开发技术人才越来越吃香，而且web前端领域划分越来越细，对技术的需求越来越高，想学习web前端的人也是越来越多。那么，如何学习web前端知识？从哪开始？转型成为web前端工程师需要学些什么？小白到高手需要多久？ 1、转型web前端需要学什么 第一阶段：你要从最基础的HTML/CSS开始，简单地说，HTML就是一堆非常简单的标签，而CSS则是把你画画的流程用英语按一定的格式写出来。然后你需要理解常用HTML标签的意思，学会各种CSS的属性，还有CSS的盒模型、优先级、选择器…… 第二阶段：JavaScript学习，你要是想在网页上实现交互效果，比如轮播图、点击按钮后播放动画等等，那么就必须学会JavaScript。JavaScript是一门完整、强大、热门的编程语言，浏览器的各种交互效果都由它来做到的。然后学习jQuery，并且通过jQuery继续使用CSS的选择器。 2、转职成为web前端 专精HTML/CSS的前端从业人员也就是前端重构。这里要提一下，有一个职业对于这块很有优势，那就是设计师。不管是UI设计师，还是平面设计师，在页面上如何写页面，也知道怎么做的更好，并且更加理解Web世界，做出更“系统化”的设计。关于CSS的知识，你需要理解文档流、浮动流等各种定位的方式与原理，理解CSS 的继承复用思想、理解浏览器的差异、兼容等。关于HTML的知识，你需要学习语义化

前言 前端技术日新月异，随着 大前端 的趋势，想要成为一名合格的前端工程师，需要学习掌握的东西更是宽泛。所以我们在寻求进阶的过程中，既要不断夯实前端基础，也要快速响应技术的更新迭代。闲话少说，这次给大家整理分享一些前端进阶的优质学习资源，希望对大家有所帮助！ 个人博客地址 ?? fe-code github 优质项目 frontend-tech-list 前端技术清单，不论你是正在自学前端，还是对前端某些技术熟练掌握但某些还未涉足，我都希望这份清单能帮助你 review 一些前端的基础能力。 github 前端技术清单 0. 年度报告 1. 基础拾遗 1.1. JavaScript 1.2. CSS 1.3. 浏览器 2. 工程化与工具 2.1. webpack 2.2. Gulp 2.3. Linter 2.4. 静态类型（Typescript/Flow） 2.5. Babel 2.6. CSS预处理与模块化 3. 性能优化 3.1. 加载性能 3.2. 运行时性能 3.3. 前端缓存 3.4. 性能调试与实践 3.5. 性能指标 4. 安全 4.1. XSS 4.2. CSRF 4.3. CSP 4.4. HTTPS 4.5. 安全实录 5. 自动化测试 5.1. 单元测试 5.2. 端到端测试 (E2E) 5.3. 其他 6. 框架与类库 6.1. React 6.2.

前端 跟python没有任何关系 什么是前端? 任何与用户直接打交道的操作界面都可以称之为前端 比如:电脑界面,手机界面,平板界面 什么是后端? 暂时先理解成 幕后操作者 不直接与用户打交道 为什么要学前端 因为你们是全栈开发工程师 前端的学习流程 软件开发架构 c/s b/s Web服务的本质: 浏览器中敲入网址回车发送了几件事? 1.浏览器向服务端发送请求 2.服务端接收请求 3.服务端返回相应的响应 4.浏览器接收响应 根据特定的规则渲染页面展示给用户看 HTTP协议 # ​ 超文本传输协议 ​ 规定了浏览器与服务端之间消息传输的数据格式 ​ 四大特性: 1.基于请求响应 2.基于TCP/IP之上的作用于应用层的协议 3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见) 4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了) websocket 相当于是HTTP协议的一个大的补丁 它支持长连接 请求数据格式 请求首行(标识HTTP协议版本,当前请求方式) 请求头(一大堆k,v键值对) ​ 请求体(携带的是一些敏感信息比如 密码,身份证号...) 响应数据格式 响应首行(标识HTTP协议版本,响应状态码) 响应头(一大堆k,v键值对) ​ 响应体(返回给浏览器页面的数据 通常响应体都是html页面) 响应状态码

什么是前端?什么是后端? # 任何与用户直接打交道的操作界面都可以称之为前端,前端跟python没有任何关系 比如:电脑界面,手机界面,平板界面 # 暂时先理解成 幕后操作者(不直接与用户打交道) 为什么要学前端? 因为全栈开发工程师就是同时懂前端和后端 1.信心满满 老子一定能学会 凭啥学不会 2.哎呦卧槽 好像有点难 可能学不会 3.我靠 怎么还不毕业 老子要出去挣大钱 4.卧槽 怎么毕业了 我啥都不会 来老男孩学习的心路历程 软件开发架构(c/s, b/s) Web服务的本质: # 浏览器中敲入网址回车发送了几件事? 1.浏览器朝服务端发送请求; 2.服务端接收请求 3.服务端返回相应的响应 4.浏览器接收响应 根据特定的规则渲染页面展示给用户看 HTTP协议(*****) 超文本传输协议 规定了浏览器与服务端之间消息传输的数据格式 四大特性: # 1.基于请求--响应 # 2.基于TCP/IP之上的作用于应用层的协议 # 3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见) # 4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了) # websocket 相当于是HTTP协议的一个大的补丁 它支持长连接 请求与响应 # 请求数据格式 请求首行(标识HTTP协议版本,当前请求方式) 请求头(一大堆k,v键值对) 请求体

前端 跟python没有任何关系 什么是前端? 任何与用户直接打交道的操作界面都可以称之为前端 比如:电脑界面,手机界面,平板界面 什么是后端? 暂时先理解成 幕后操作者 不直接与用户打交道 为什么要学前端 因为你们是全栈开发工程师 前端的学习流程 软件开发架构 c/s b/s Web服务的本质: 浏览器中敲入网址回车发送了几件事? 1.浏览器向服务端发送请求 2.服务端接收请求 3.服务端返回相应的响应 4.浏览器接收响应 根据特定的规则渲染页面展示给用户看 HTTP协议 ​ 超文本传输协议 ​ 规定了浏览器与服务端之间消息传输的数据格式 ​ 四大特性: 1.基于请求响应 2.基于TCP/IP之上的作用于应用层的协议 3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见) 4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了) websocket 相当于是HTTP协议的一个大的补丁 它支持长连接 请求数据格式 请求首行(标识HTTP协议版本,当前请求方式) 请求头(一大堆k,v键值对) ​ 请求体(携带的是一些敏感信息比如 密码,身份证号...) 响应数据格式 响应首行(标识HTTP协议版本,响应状态码) 响应头(一大堆k,v键值对) ​ 响应体(返回给浏览器页面的数据 通常响应体都是html页面) 响应状态码

一、什么是前端 　　任何与用户直接打交道的操作界面都可以称之为前端 　　比如：电脑界面，手机界面，平板界面 　　什么是后缀？ 　　　　暂时先理解成 幕后操作者 　　　　不直接与用户打交道 二、为什么要学前端 　　因为你们是全栈开发工程师 三、Web服务的本质 　　浏览器中敲入网址回车发送了几件事？ 　　　　1.浏览器朝服务端发送请求 　　　　2.服务端接收请求 　　　　3.服务端返回相应的响应 　　　　4.浏览器接收响应，根据特定的规则渲染页面展示给用户看 　　文件（后缀名是.html结尾的文件，也就意味着，只要看到.html结尾文件，那么他就是一个前端页面） 　　文件的后缀名仅仅是给人看的，计算机无所谓，因为都是二进制数据　　 四、HTTP协议 　　超文本传输协议 　　规定了浏览器与服务端之间消息传输的数据格式 　　四大特征： 　　　　1.基于请求响应 　　　　2.基于TCP/IP之上的作用于应用层的协议 　　　　3.无状态（服务端无法保存用户的状态，一个人来一千次，我都记不住，还当是初次见面） 　　　　4.无连接（请求来一次我响应一次，之后立马断开连接 两者之间就不再有任何关系 ） 　　　　　　ps:websocket相当于是HTTP协议的一个大的补丁，他支持长连接 　　请求数据格式 　　　　请求首行（标识HTTP协议版本，当前请求方式） 　　　　请求头（一大堆k,v键值对）

重审业务逻辑 用过MVC的童鞋都知道 业务逻辑(Bussiness Logic) ，但是大多对这概念又是模棱两可，业务逻辑从来都是这样难以理解，谈论前后端分离之前这个概念非常有必要探讨一下！ 　　在简单的CRUD的系统中，基本上都是对数据进行增删改查操作，并没有多少业务逻辑可言；但像银行系统对金融数据的操作就显得不那么简单了，以转账为例：A给B转帐转100元，简易代码如下： if(A.balance - 100 >= 0){ A.balance -100; B.balance +100; }else{ //返回异常信息 } 　　这串代码已经不仅仅是对数据的增删改查了，它包含了一些业务规则，比如A的余额如果少于100，这个代码会返回异常信息提示"余额不足"，类似于这种，一组和特定领域业务相关而又不可拆分的代码，可以看作业务逻辑的实现。所以转账是作为一部个不可拆分的整体提供给用户的，也就是说Business层是不可能给你提供一个"A.余额+x"这种接口的，如果你想转账，请用转账方法，方法里面怎么对数据操作，你无需关心，你也没法关心。 ===== 这里注意强调一下：页面/渲染逻辑和业务逻辑的区别，页面通常需要多个数据用来展示，比如网上银行界面即显示用户名、余额和转账记录等，这些信息的组合称作页面/渲染/展示逻辑，并不等于业务逻辑，业务逻辑只应提供基本的业务数据而不应该和页面逻辑掺和起来

一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。 前后端分离(解耦)的核心思想是：前端Html页面通过Ajax调用后端的RestFul API并使用Json数据进行交互。 注：【在互联网架构中，web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。 应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。】 一般只有Web服务器才能被外网访问，应用服务器只能内网访问。 二、为什么前后端分离 一般公司后端开发人员直接兼顾前端的工作，一边实现API接口，一边开发页面，两者互相切换着做，而且根据不同的url动态拼接页面，这也导致后台的开发压力大大增加。前后端工作分配不均。不仅仅开发效率慢，而且代码难以维护。 而前后端分离的话，则可以很好的解决前后端分工不均的问题，将更多的交互逻辑分配给前端来处理，而后端则可以专注于其本职工作，比如提供API接口，进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器

一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。 前后端分离(解耦)的核心思想是：前端Html页面通过Ajax调用后端的RestFul API并使用Json数据进行交互。 注：【在互联网架构中，web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。】 一般只有Web服务器才能被外网访问，应用服务器只能内网访问。 二、为什么前后端分离 一般公司后端开发人员直接兼顾前端的工作，一边实现API接口，一边开发页面，两者互相切换着做，而且根据不同的url动态拼接页面，这也导致后台的开发压力大大增加。前后端工作分配不均。不仅仅开发效率慢，而且代码难以维护。 而前后端分离的话，则可以很好的解决前后端分工不均的问题，将更多的交互逻辑分配给前端来处理，而后端则可以专注于其本职工作，比如提供API接口，进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器

随着Web2.0思想的日益普及，让企业都慢慢认识到前端的重要性。前端开发人员的地位也日益提高，相应的技术要求要是越来越高，那么现在想成为一名合格的Web前端工程师应该怎样学习呢 Web前端学习路线图，希望对初学者有帮助。 1.Javascript 语言 全栈开发中，用的编程语言就是 javascript 2.HTML5 标签和 DOM 这是前端最核心技术，为之后学习各种开发框架，打下坚实基础。 3.CSS3 学习通过 css 开发网页和各种可视 UI 组件。 4.SASS 利用 sass 语言，开发复杂的页面 css 5.Node.js 掌握Node.js 核心 API ，具备后端开发能力。 6.Express 5.x 框架 掌握 Express 框架，从而具备快速开发后端程序的能力。 7.socket.io 库 让前后端通过 websocket协议通信，是web 开发游戏、聊天等程序必备技术。 8.Mongoose 框架 可以让程序具备文档数据储存能力 9.Git 命令与 github 可以对项目进行版本管理，从而能团队开发项目。 10.Gulp 构建工具实战 通过 gulp 工具，灵活对项目进行构建。 11.Webpack 可以用和 Node.js 后端模块化方式，开发前端程序，从而能开发大型系统。 12.Jasmine & Karma 可以利用 Jasmine & Karma