Recommended
More Related Content
What's hot
Similar to Web dev road map part one
Similar to Web dev road map part one (20)
Web dev road map part one
- 2. 上：基础知识篇 下：框架实战篇 - 前端的三驾⻢马⻋车：HTML 、CSS、JavaScript 学习路路线 - 开发⼯工具 - 调试⼯工具 - 构建⼯工具与部署 - 使⽤用 Vue 框架，熟悉数据绑定与组件化开发 - 使⽤用 UI 库：element 快速搭建后台管理理系统界⾯面 - 使⽤用 Webpack 打包项⽬目并发布 - 纵观当前H5项⽬目技术栈 - 使⽤用 cookvue 避开繁复配置，快速初始化⼀一个开箱即⽤用的 后台管理理系统
- 3. 基础知识篇
- 4. 前端开发的三驾⻢马⻋车 - HTML - CSS - Javascript
- 8. HTML：结构层 学习路路线: 1.过⼀一遍菜⻦鸟教程的 HTML 与 HTML5 教程 熟悉各种 HTML 标签： 基础标签： <body><header><div><p> 链接、图⽚片标签： <a><img> 表格标签： <table><tr><th><td> 表单相关标签： <form><input> 列列表标签： <ul><ol><li> 2.编写代码时有语义化的概念 ⾳音视频相关标签……
- 10. CSS：样式层 - 编写在 CSS 中的样式定义如何显示 HTML 元素 - 通常将样式存储在外部样式表（.css）中，实现内容与表现分离
- 12. CSS：样式层 CSS 选择器器 类型 选择器器写法 所选元素示例例 标签选择器器 p <p></p> class 选择器器 .demo <div class=“demo”></div> ID 选择器器 #target <div id=“target”></div> 属性选择器器 [data=option] <div data=“option”></div> … CSS选择器器分为元素选择符、关系选择符、属性选择符等等 使⽤用时需常查⽂文档 CSS选择器器参考⼿手册
- 13. CSS：样式层 CSS 声明 定位 position、top、left、right、bottom、z-index… 布局 display、float、overflow… 尺⼨寸 width、height… 间距 margin、padding… 边框 border… ⽂文本 font、line-height、text-align… Flex flex、align-items、justify-content… 动画 transition、transform… … CSS 参考⼿手册
- 15. CSS：样式层 学习路路线: 1.过⼀一遍菜⻦鸟教程的 CSS 与 CSS3 教程，熟悉 常⻅见的 CSS 规则写法 2.应⽤用于项⽬目中，遇到问题随时查阅⼿手册， 多练习⽤用 Float、Flex 布局 3.进阶阅读书籍：《CSS权威指南》
- 16. JavaScript：⾏行行为层
- 17. JavaScript：⾏行行为层 JavaScript 的版本问题：ES5、ES6、ES7是什什么⻤鬼？ - ES 是 ECMAScript 的缩写 - ECMAScript 是 JavaScript 的标准，JavaScript 是 ECMAScript 的⼀一个实现，⽇日常情况下两词可以互换 - 2009 年年 12 ⽉月发布 ES5.0，2011 年年 6 ⽉月发布 ES5.1 - 2015 年年 6 ⽉月发布 ES6，标准委员会决定此后 每年年 6 ⽉月发新标准，以年年代为名，所以 ES6 ⼜又称 ES2015 - ⽬目前的主流浏览器器均全⾯面⽀支持 ES5.1，部分⽀支持 ES6 特性 - 借助 Babel 转译器器，我们可以现在就使⽤用 ES6 编写业务
- 19. JavaScript：⾏行行为层 常⽤用知识点1. DOM 操作 HTML⽂文档会被解析为 DOM Tree 熟悉 DOM 节点的 增、删、查、改 动态改变⻚页⾯面内容
- 20. JavaScript：⾏行行为层 常⽤用知识点2. 事件 添加 JavaScript 与 HTML 之间的交互 熟悉事件的添加、移除、委托
- 21. ⿏鼠标事件 click、mousedown、mouseup… 键盘事件 keyup、keydown、keypress… 触摸事件 toushstart、touchmove、touchend UI事件 load、unload、scroll、resize… 焦点事件 focus、blur… … JavaScript：⾏行行为层 常⽤用知识点2. 事件 熟悉常⻅见的事件类型
- 22. JavaScript：⾏行行为层 常⽤用知识点3. AJAX 通过原⽣生的 XMLHttpRequest 对象发出 HTTP 请求， 获取服务器器返回的数据 常⽤用 HTTP 库： - axios - $.ajax
- 23. JavaScript：⾏行行为层 常⽤用知识点4. 本地存储 a. cookie - 服务器器通过 Set-Cookie 消息头可以直接设置 cookie - 每个域下的 cookie 累加⻓长度限制在 4KB - 浏览器器每次向服务器器发出请求，会⾃自动带上该域的 cookie - 如果 cookie 没有设置 HttpOnly 属性，则可通过 JS 进⾏行行编辑 常⽤用于标记⽤用户身份、鉴权 - 受到同源策略略限制
- 24. JavaScript：⾏行行为层 常⽤用知识点4. 本地存储 b. localStorage / sessionStorage - sessionStorage 保存的数据在⻚页⾯面关闭时清空， localStorage保存的数据⻓长期存在 - 除保存数据期限⻓长短不不同，这两个对象属性与⽅方法完全⼀一样 - 可存储数据在 2M 以上 ⽤用于安全存储⼤大量量数据 - 受到同源策略略限制
- 25. JavaScript：⾏行行为层 常⽤用知识点5. 同源策略略 两个⽹网址，协议相同、域名相同、端⼝口相同，即为同源 http://www.a.com/index.html http://www.a.com/about.html 同源 http://www.a.com:3000/about.html 不不同源 http://v2.a.com/about.html 不不同源 https://www.a.com/about.html 不不同源 浏览器器的限制： - ⽆无法获取⾮非同源⻚页⾯面的 cookie、localStorage、sessionStorage - ⽆无法获取⾮非同源⻚页⾯面的 DOM 元素 - ⽆无法向⾮非同源地址发送 AJAX 请求
- 26. JavaScript：⾏行行为层 常⽤用知识点5. 同源策略略 部分规避同源策略略 - 基础域名部分相同的两个⽹网⻚页可以通过设置 document.domain 共享 Cookie - 服务器器与客户端跨域通信 - JSONP - CORS，仅需服务器器做⼀一下配置
- 27. JavaScript：⾏行行为层 常⽤用知识点6. JSON JSON 格式是 ES5 标准中指定的⽤用于数据交换的⽂文本格式 JSON.stringify() - 将值转换为 JSON 格式字符串串 JSON.parse() - 将 JSON 字符串串转化成对象
- 28. JavaScript：⾏行行为层 学习路路线: 1. JavaScript 标准参考教程（alpha） 内容较全、易易懂，适合⽤用来⼊入⻔门，也适合随时查阅 API 2. 《JavaScript》⾼高级程序设计 ES5 经典，内容全⾯面且实⽤用 3. ECMAScript 6 ⼊入⻔门 进阶向，了了解 ES6 新特性 4. MDN ⽂文档 最规范详细的 API ⽂文档⼿手册
- 30. 提⾼高⽣生产率的插件 - Emmet HTML 标签⾃自动补全 - Color highlighter 颜⾊色⾼高亮 - HTML/JS/CSS Prettify 代码格式化 - Babel ES6 ⾼高亮⽀支持 - SublimeLinter 语法检查 - BracketHighlighter 括号⾼高亮 - GitGutter 实时提醒代码的 Git diff
- 31. 调试⼯工具 Chrome Dev Tool Chrome 开发者⼯工具⽂文档
- 33. 构建与编译 源代码需要经过处理理后才能上线 - ⽂文件名⾃自动打 md5，避免缓存问题 - CSS 和 JavaScript 源码压缩，节省体积 - JavaScript 源码丑化 - 多个 Javascript ⽂文件合并，减少请求数量量 每次上线前，使⽤用⼯工具⾃自动化对源码进⾏行行处理理 称为“编译”
- 35. 构建与编译 预处理理器器 HTML 预处理理器器：Jade、haml CSS 预处理理器器：SCSS、LESS JavaScript 预处理理器器：CoffeeScript、TypeScript、Babel - 这些预处理理器器定义新语法，增加了了新特性，对于复杂业务 可以提⾼高开发效率 - 但是预处理理器器需要预编译，增加了了构建⼯工作流的⼀一道环节； 需要学习成本，是否引⼊入需要权衡 - 使⽤用预处理理器器编写的代码，需被编译成正常的 HTML、CSS、 JS 后才能供项⽬目使⽤用
- 36. 构建与编译 Shop 项⽬目
- 37. 构建与编译 单⻚页应⽤用 1. 界⾯面切换⽆无刷新，⾮非常流畅，媲美本地应⽤用 2. 功能框架、UI都在本地，与服务端通讯只有数据请求， ⾮非常易易于迁移为桌⾯面产品、移动端 Hybird 产品 3. 整个系统只有⼀一个⻚页⾯面，所有业务功能均为⼦子模块 4. 路路由、缓存等均由前端管理理
- 38. 构建与编译 为了了解决单⻚页应⽤用规模增⼤大、复杂度提⾼高的问题 出现了了众多框架：React、Vue 等 1. 数据绑定 2. 组件化、模块分层 3. 完善的路路由⽅方案 (react-router / vue-router) 4. 完善的状态管理理⽅方案 (redux / vuex)
- 39. 构建与编译 单⻚页应⽤用
- 40. 构建与编译 在构建过程中，还可以做更更多事： - 使⽤用 ESlint 检查代码质量量 - 使⽤用 Browsersync 同时在 PC 和移动端调试⻚页⾯面 - ⾃自动执⾏行行单元测试 - 使⽤用热更更新提⾼高开发效率
- 41. 静态⻚页⾯面部署 1. 将项⽬目 dist ⽂文件夹中的⽂文件上传到服务器器 使⽤用 Nginx 作为静态⽂文件服务器器 2. Nginx 配置新增⼀一项 server，location 中 root 指向⻚页⾯面⽂文件即可
- 42. 当前 H5 项⽬目技术栈 Shop 项⽬目 http://weidian.com/?userid=251425459 预处理理器器：SCSS 构建⼯工具：Grunt
- 43. 当前 H5 项⽬目技术栈 微店 PC 端中 的多数模块（单⻚页应⽤用） 预处理理器器：SCSS、Babel 构建⼯工具：Gulp 框架：Angular
- 44. 当前 H5 项⽬目技术栈 IM 项⽬目（单⻚页应⽤用） 预处理理器器：SCSS、Babel 构建⼯工具：Webpack 框架：React (Preact)
- 47. 下篇⻅见！