《Web前端修仙指南课件.pptx》由会员分享，可在线阅读，更多相关《Web前端修仙指南课件.pptx（40页珍藏版）》请在三一办公上搜索。
1、Web前端修仙指南,前世今生篇,什么是前端,前端：针对浏览器的开发，代码在浏览器运行后端：针对服务器的开发，代码在服务器运行,混沌初开,混沌初开,1994年可以看做前端历史的起点，这一年10月13日网景推出了第一版Navigator；这一年，Tim Berners-Lee创建了W3C；这一年，Tim的基友发布了CSS。还是这一年，为动态web网页设计的服务端脚本PHP诞生。1995年网景推出了JavaScript至此，前端三大基础：HTML，CSS，JavaScript 均已诞生,前后端不分的时代,互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。后端收到浏览器的请求生成静态页
2、面发送到浏览器那时的前端工程师，实际上是模板工程师，负责编写页面模板。后端代码读取模板，替换变量，渲染出页面。,天地初现,天地初现,1999年W3C发布第四代HTML标准同年微软推出用于异步数据传输的 ActiveX，随即各大浏览器厂商模仿实现 XMLHttpRequest。这标识着Ajax的诞生。但是 Ajax 这个词是在六年后问世的，特别是在谷歌使用 Ajax 技术打造了Gmail和谷歌地图之后，Ajax获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术，它标识着Web2.0时代的到来。前端不再是后端的模板，可以独立得到各种数据。Web 1.0：静态网页，纯内容展示Web 2.
3、0：动态网页，富交互，前端数据处理,AJAX,AJAX即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。以前加载数据的时候，都是通过后端模板或者其他方式一次性将数据全部读取。每次加载数据都必须刷新整个页面有了 AJAX 以后，就可以在不刷新页面的情况下请求或提交数据。提升用户体验，减轻了服务器负担。,蓬勃发展,蓬勃发展,2009年AngularJS诞生，随后被谷歌收购。2010年backbone.js诞生。2011年React和Ember诞生。2014年Vue.js诞生,前端 MVC 框架,前端通过 A
4、jax 得到数据，因此也有了处理数据的需求。前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端 MVC 框架的诞生。Backbone.jsBackbone 将前端代码分成两个基本部分Model：管理数据View：数据的展现,前端 Controller,Backbone 只有 M 和 V，没有 C。因为，前端 Controller 与后端不同。不需要，也不应该处理业务逻辑只需要处理 UI 逻辑，响应用户的一举一动所以，前端 Controller 相对比较简单。Backbone 没有 C，只用事件来处理 UI 逻辑。,MVVM 模式,另一些框架提出 MVVM 模式，用 View Mode
5、l 代替 Controller。View-Model：简化的 Controller，唯一作用就是为 View 提供处理好的数据，不含其他逻辑。本质：view 绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view 上，不需要手动处理。,Angular,Google 公司推出的 Angular 一个 MVVM 前端框架。它的风格属于 HTML 语言的增强，核心概念是双向绑定。,Vue,Vue.js 是现在很热门的一种前端 MVVM 框架。博取众长，在轻量易于使用的同时，可以以渐进增强的形式开发不同规模的应用它的基本思想与 Angular 类似，但是用法更简单，而且引入了
6、响应式编程的概念。,React,Facebook 出品核心是组件化，虚拟DOM拥有React Native 作为移动端支持,SPA（Single-page application）,前端可以做到：读写数据切换视图用户交互,Router,前端还有一种天然的方法，可以切换视图，那就是 URL。通过 URL 切换视图，这就是 Router（路由）的作用。优点：便于用户定位自身，用户下次通过URL进入的时候仍然是这个页面便于分享便于SPA施展拳脚,Node,2009年，Node 项目诞生，它是服务器上的 JavaScript 运行环境。Node = JavaScript + 操作系统 APIJavaS
7、cript 成为服务器脚本语言，与 Python 和 Ruby 一样JavaScript 成为唯一的浏览器和服务器都支持的语言前端工程师可以编写后端程序了,前端开发模式的根本改变,Node 环境下开发大量使用服务器端工具引入持续集成等软件工程的标准流程开发完成后，编译成浏览器可以运行的脚本，放上 CDN,新的挑战,最好的时代与最坏的时代,HTTP/2 的持续普及放弃Internet Explorer 8ES6 & ES7promise、generator 与 async/await框架纷争打包工具：Rollup 、 Webpack 2 、 Grunt 、 Gulp包管理：npm 、 yarnW
8、ebVR、WebAR、WebAssembly、WebComponents、智能硬件、游戏,框架纷争,大前端,Web前端 + 移动端 + 桌面端 + 服务端移动端： Android端 + iOS端 Weex/React Native + Native桌面端：Electron服务端：Node.js,WebAssembly,谷歌、苹果、微软和Mozilla等公司合力研发，这是能够运用在未来浏览器中承诺可带来20倍更快性能的字节码好处：大幅度提高 Javascript 的性能，同时也不损失安全性。允许任何语言编译到它制定的AST tree,Instant App & PWA & 小程序,Android
9、 Instant App：一种用户无需安装即可运行 Android 应用的全新方式。可通过Google搜索，共享连接，NFC等技术提供给用户PWA（Progressive Web App）：利用现代浏览器的能力来达到类似APP的用户体验的技术如果用户需要，网页可以渐进式地变成App，比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等。小程序,WebGL(Web Graphics Library),https:/threejs.orghttp:/,Web前端修仙指南,上手篇,主讲人：沈馨悦,学习React、Vue等框架,0基础,引用框架+JS学习,熟悉前后端交互,0基础,实践+知识点：3
10、天看完HTML+CSS基础html常用标签css常用属性了解切图、reset、响应式、布局解决方案写出自己的第一个页面相关资料：Head First HTML 与CSS（培养兴趣，切勿沉迷）网易前端微专业（看到页面架构即可，后面的可以换教材了）百度IFE（前端技术学院）MDN,引用框架+JS学习,实践+知识点：JavaScript语法学习Dom树操作裸写JavaScript学习Bootstrap UI框架，结合JavaScript再写一个以上的页面相关资料：JavaScript Dom编程艺术（大致了解Dom的各类操作）JavaScript权威指南（犀牛书，重点为全书第二部分 客户端JavaS
11、cript）JavaScript高级程序设计百度IFE（前端技术学院）,熟悉前后端交互,实践+知识点AJAXPOST、GET、fetch等方法为自己的页面添加后台传递过来的数据，实现登录登出功能相关资料：MDN官方文档,学习React、Vue等框架,实践+知识点理解webpack、babel、npm等理解组件化思维理解路由、store、状态管理等官方文档相关资料：官方Tutorial视频教程（慕课网等）一些大牛的简要上手教程Stack Overflow,正确的打怪升级姿势,不要浪费自己的每一点努力,欲善其事，必利其器。,技术类问题首选Google + API文档 +github ReadMe.md(ctrl + F 搜索)配置专属开发环境用Git管理自己的代码采用ESLint避免低级错误和统一代码的风格,Webstorm VScode Sublimetext3 Atom,关注前端资讯,掘金,InfoQ,前端早读课,前端外刊评论,论 坛,公众号,
