Web前端修仙指南课件.pptx

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.0

3、：动态网页，富交互，前端数据处理AJAX AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。以前加载数据的时候，都是通过后端模板或者其他方式一次性将数据全部读取。每次加载数据都必须刷新整个页面 有了 AJAX 以后，就可以在不刷新页面的情况下请求或提交数据。提升用户体验，减轻了服务器负担。蓬勃发展蓬勃发展 2009年AngularJS诞生，随后被谷歌收购。2010年backbone.js诞生。2011年React和Ember诞生。2014年Vue.js诞生前端 MVC 框架 前端通过 Aj

4、ax 得到数据，因此也有了处理数据的需求。前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端 MVC 框架的诞生。Backbone.js Backbone 将前端代码分成两个基本部分 Model：管理数据 View：数据的展现前端 Controller Backbone 只有 M 和 V，没有 C。因为，前端 Controller 与后端不同。不需要，也不应该处理业务逻辑 只需要处理 UI 逻辑，响应用户的一举一动 所以，前端 Controller 相对比较简单。Backbone 没有 C，只用事件来处理 UI 逻辑。MVVM 模式 另一些框架提出 MVVM 模式，用 View Mo

5、del 代替 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+操作系统 API JavaSc

7、ript 成为服务器脚本语言，与 Python 和 Ruby 一样 JavaScript 成为唯一的浏览器和服务器都支持的语言 前端工程师可以编写后端程序了前端开发模式的根本改变 Node 环境下开发 大量使用服务器端工具 引入持续集成等软件工程的标准流程 开发完成后，编译成浏览器可以运行的脚本，放上 CDN新的挑战最好的时代与最坏的时代 HTTP/2 的持续普及 放弃Internet Explorer 8 ES6&ES7 promise、generator 与 async/await 框架纷争 打包工具：Rollup、Webpack 2、Grunt、Gulp 包管理：npm、yarn Web

8、VR、WebAR、WebAssembly、WebComponents、智能硬件、游戏框架纷争大前端 Web前端+移动端+桌面端+服务端 移动端：Android端+iOS端 Weex/React Native+Native 桌面端：Electron 服务端：Node.jsWebAssembly 谷歌、苹果、微软和Mozilla等公司合力研发，这是能够运用在未来浏览器中承诺可带来20倍更快性能的字节码 好处：大幅度提高 Javascript 的性能，同时也不损失安全性。允许任何语言编译到它制定的AST treeInstant App&PWA&小程序 Android Instant App：一种用户

9、无需安装即可运行 Android 应用的全新方式。可通过Google搜索，共享连接，NFC等技术提供给用户 PWA（Progressive Web App）：利用现代浏览器的能力来达到类似APP的用户体验的技术 如果用户需要，网页可以渐进式地变成App，比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等。小程序WebGL(Web Graphics Library)https:/threejs.org http:/ 录学习React、Vue等框架0基础引用框架+JS学习熟悉前后端交互0基础 实践+知识点：1.3天看完HTML+CSS基础 html常用标签 css常用属性2.了解切图、re

10、set、响应式、布局解决方案3.写出自己的第一个页面相关资料：Head First HTML 与CSS（培养兴趣，切勿沉迷）网易前端微专业（看到页面架构即可，后面的可以换教材了）百度IFE（前端技术学院）MDN引用框架+JS学习 实践+知识点：JavaScript语法学习 Dom树操作 裸写JavaScript 学习Bootstrap UI框架，结合JavaScript再写一个以上的页面 相关资料：JavaScript Dom编程艺术（大致了解Dom的各类操作）JavaScript权威指南（犀牛书，重点为全书第二部分 客户端JavaScript）JavaScript高级程序设计 百度IFE（前

11、端技术学院）熟悉前后端交互 实践+知识点 AJAX POST、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前端早读课前端外刊评论论 坛公众号