前端工程师手册

下载 0

ccone

发布于

2401

人观看

#信息技术

该手册是由进击的皇虫使用书栈构建用于前端工程师快速查询相关知识

展开查看详情

1 .

2 . 目录致谢介紹 HTML/CSS基础 HTML常用标签 HTML语义化 DOCTYPE和浏览器渲染模式理解DOM结构 HTML5新增内容常用CSS属性盒模型 CSS普通流（文档流） CSS定位方式 CSS浮动相关 CSS选择器 CSS常见布局 CSS书写与命名 CSS3新增特性常用meta整理什么是Viewport HTML/CSS进阶自定义字体 CSS基线 CSS动画前端UI框架 Bootstrap学习指南 JavaScript基础作用域问题运算符的优先级变量对象 undefined与null的区别内置对象与原生对象关于函数立即执行函数闭包事件机制 3原型继承本文档使用书栈(BookStack.CN) 构建 - 2 -

3 . 3详解this 3在JavaScript中一切都是对象吗？ 3DOM操作 3JSON对象 JavaScript进阶理解作用域链 Callback问题 Promise 模板引擎 Underscore ES6 Base64编码与解码 JavaScript面向对象封装继承 JavaScript设计模式单例模式: Singleton 编写JavaScript框架框架结构 JavaScript模块管理模块化简介模块依赖管理工具对比 AMD UMD requireJS 入门使用压缩优化 JavaScript数据结构数据类型 JavaScript异步编程常见的异步模式什么是Promise Promise规范 Promise实战 Async控制异步流程 EventProxy控制异步流程 JSDeferred控制异步流程 JavaScript正则表达式本文档使用书栈(BookStack.CN) 构建 - 3 -

4 . 基本语法实用案例 jQuery相关 jQuery事件注册和取消获取元素在DOM中的顺序 Deferred对象 jQuery代码技巧 jQuery源码分析源码构建理解架构 GSAP相关常见问题网络相关常见HTTP状态码 web缓存机制 404页面跨域问题同源策略 iframe自适应 WebService解决方案 JSONP 调试与测试 Blackbox Mocha测试框架前端自动化项目目录组织自动化流程 yeoman yo bower gulp gulp插件选择 yeoman参考案例 SPA 什么是SPA 单页面SEO解决方案开发无框架单页面应用可伸缩的同构Javascript代码本文档使用书栈(BookStack.CN) 构建 - 4 -

5 . PJAX 理解架构前后端分离一个简单粗暴的前后端分离方案 UI 关于Retina 响应式图片响应式字体中文字体移动端字体响应式设计原则中文排版的规范移动端尺寸 UX 页面滚动条出现时不跳动使用渐进式JPEG来提升用户体验动画相关动画类型跟动画有关的数学和物理公式缓动原理与实现常用动画效果与缓动 SVG动画原理性质 JavaScript的加载与执行单线程的Javascript 浏览器解析介绍 v8引擎浏览器渲染 JS动画性能 Repaint和Reflow URL编码与解码字体的渲染 2图片格式的优缺点性能优化编码规范 JavaScript代码最佳实践移动H5前端性能优化指南浏览器渲染性能优化本文档使用书栈(BookStack.CN) 构建 - 5 -

6 . 开发和部署前端代码优化网络请求页面提速方法 Chrome开发者工具的使用 JavaScript内存优化 javascript事件优化页面滚动性能 canvas渲染性能 web开发中的坑or技巧排版兼容性问题浏览器报错 iPad的bug合集 addEventListener与handleEvent关系 localStorage的使用移动端fixed布局 touch事件处理输入事件触摸和鼠标在一起如何延时触发事件数组的操作对象的操作 mobile设备的横竖屏切换检测生成随机数字 setTimeout的误区好用的原生API操作前端面试前端技能图谱前端知识点原则与技巧 html/css面试题 JavaScript面试题 jQuery面试题网络相关面试题面试题集合参考资料图书资料视频教程设计方向本文档使用书栈(BookStack.CN) 构建 - 6 -

7 . 2S库 CSS相关库 Bootstrap资料移动开发框架 Loading动画辅助工具本文档使用书栈(BookStack.CN) 构建 - 7 -

8 .致谢致谢当前文档《前端工程师手册》由进击的皇虫使用书栈(BookStack.CN) 进行构建，生成于 2018-07- 17。书栈(BookStack.CN) 仅提供文档编写、整理、归类等功能，以及对文档内容的生成和导出工具。文档内容由网友们编写和整理，书栈(BookStack.CN) 难以确认文档内容知识点是否错漏。如果您在阅读文档获取知识的时候，发现文档内容有不恰当的地方，请向我们反馈，让我们共同携手，将知识准确、高效且有效地传递给每一个人。同时，如果您在日常工作、生活和学习中遇到有价值有营养的知识文档，欢迎分享到书栈(BookStack.CN) ，为知识的传承献上您的一份力量！如果当前文档生成时间太久，请到书栈(BookStack.CN) 获取最新的文档，以跟上知识更新换代的步伐。文档地址：http://www.bookstack.cn/books/front-end-database 书栈官网：http://www.bookstack.cn 书栈开源：https://github.com/TruthHun 分享，让知识传承更久远！感谢知识的创造者，感谢知识的分享者，也感谢每一位阅读到此处的读者，因为我们都将成为知识的传承者。本文档使用书栈(BookStack.CN) 构建 - 8 -

9 .介紹介紹 front-end-database 原文: https://leohxj.gitbooks.io/front-end-database/content/index.html 本文档使用书栈(BookStack.CN) 构建 - 9 -

10 .HTML/CSS基础 HTML/CSS基础 HTML/CSS 基础知识罗列一些基础内容。资料学习资料可以参考HTML Dog以及Learn HTML & CSS。详细的文档内容，推荐参考WebPlatform和MDN。关于属性的兼容性，可以通过Can I Use查询。原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/index.html 本文档使用书栈(BookStack.CN) 构建 - 10 -

11 .HTML常用标签 HTML常用标签 HTML常用标签 div div标签用于组合其他HTML元素，本身无实在意义。常用于页面的布局，比如一个展开式的广告页面框架大致如下： 1. <body> 2. <div id="wrap-container"> 3. <div id="collapsed-container"></div> 4. <div id="expanded-container"></div> 5. </div> 6. </body> h1~h6, p, span, strong, em… 此类标签用于设置文本，常见的使用方式是填充段落，比如弹出的legal框文字HTML结构如下: 1. <div id="legal-window"> 2. <h4>LEGAL</h4> 3. <img id="legal-close" src="img/embed/legal-close.png" alt="close window"> 4. <p>*Requires a system with Intel<sup>®</sup> Turbo Boost Technology. Intel<sup>®</sup> Turbo Boost Technology and Intel<sup>®</sup> Turbo Boost Technology 2.0 are only available on select Intel<sup>® </sup> processors. Consult your PC manufacturer. Performance varies depending on hardware, software, and system configuration. For more information, visit http://www.intel.com/go/turbo. Copyright © 2014 Intel Corporation. All rights reserved. Intel, the Intel logo, Intel Core, Look Inside, Intel Inside, and Pentium are trademarks of Intel Corporation in the U.S. and/or other countries. Other names and brands may be claimed as the property of others.</p> 5. </div> ul, li, ol, dl, dt, dd 此类标签用于设置带有列表内容的，比如导航栏的下拉菜单，多视频的缩略图等： 1. <ul class="nav-tools-list"> 2. <li> 3. <div> 4. <img src="shoppingtools-icon-1.png" alt=""> 5. <span>Build & Price</span> 6. </div> 7. </li> 8. <li> 9. <div> 10. <img src="shoppingtools-icon-2.png" alt=""> 本文档使用书栈(BookStack.CN) 构建 - 11 -

12 .HTML常用标签 11. <span>Incentives & Offers</span> 12. </div> 13. </li> 14. <li> 15. <div> 16. <img src="shoppingtools-icon-3.png" alt=""> 17. <span>Request a Local Quote</span> 18. </div> 19. </li> 20. <li> 21. <div> 22. <img src="shoppingtools-icon-4.png" alt=""> 23. <span>Search Dealer Inventory</span> 24. </div> 25. </li> 26. </ul> form表单相关页面中涉及到表单时候，需要使用到form相关标签： 1. <form name="frm-sample" class="frm-sample" action="try" method="post"> 2. <input type="text" class="form-control" placeholder="Name"> 3. <div id="status-message"></div> 4. <div id="sample-captcha"></div> 5. <a id="check-is-filled" class="info-btn">Check if visualCaptcha is filled</a> 6. <button type="submit" name="submit-bt" class="submit">Submit form</button> 7. </form> table表格相关页面中涉及到table结构，需要使用到table相关标签: 1. <talbe></talbe> img, canvas 用于图像显示。一般不直接操作img,canvas元素，而是在它的外层包裹一层父级元素（可以为span,div等)，对父级元素进行操作： 1. <div class="preload" data-src="CheddarBacon.png"> 2. <img src="CheddarBacon.png" alt=""> 3. </div> 4.  5. <div id="sprite-car" class="cw-sprite sprite-car" cw-interval="30" cw-loops="1" cw-auto-play="false" cw- texture="images/sprites/expanded/car-texture.png" cw-mapper="car"> 6. <canvas class="cw-renderer" width="460" height="130"></canvas> 本文档使用书栈(BookStack.CN) 构建 - 12 -

13 .HTML常用标签 7. </div> a a标签用于打开链接，发送邮件，段落跳转等功能。使用时需要注意阻止掉标签的默认事件。链接跳转，常见的关于分享按钮的HTML结构如下： 1. <div id="shareBox"> 2. <ul> 3. <li id="facebook"> 4. <a target="_blank" rel="nofollow" data-shareWay="facebook"> 5. <img alt="Post on Facebook" src="img/embed/f4Icon3.png" alt="Facebook" /> 6. </a> 7. </li> 8. <li id="twitter"> 9. <a target="_blank" rel="nofollow" data-shareWay="twitter"> 10. <img alt="Tweet this" src="img/embed/f4Icon4.png" /> 11. </a> 12. </li> 13. <li id="pinterest"> 14. <a data-pin-do="buttonPin" data-pin-config="none" target="_blank" rel="nofollow" data- shareWay="pinterest"> 15. <img alt="Pin it" src="img/embed/f4Icon5.png" /> 16. </a> 17. </li> 18. <li id="email"> 19. <a target="_blank" rel="nofollow" data-shareWay="email"> 20. <img src="img/embed/f4Icon6.png" /> 21. </a> 22. </li> 23. </ul> 24. <p></p> 25. </div> 发送邮件的代码片段如下： 1. <div class="button"> 2. <a class="mail" data-img="mail.png" href="mailto:example@gmail.com?subject=xxx&body=xxx"></a> 3. </div> 段落跳转代码片段如下： 1. <div id="html5"></div> 2. <a name="user-content-html5" href="#html5" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a> HTML5标签查询本文档使用书栈(BookStack.CN) 构建 - 13 -

14 .HTML常用标签 W3School: 点击查询原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/common-tag.html 本文档使用书栈(BookStack.CN) 构建 - 14 -

15 .HTML语义化 HTML语义化 HTML语义化语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。参考资料 semantic-html 关于语义化 HTML 以及前端架构的一点思考如何理解 web 语义化原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/semantic-html.html 本文档使用书栈(BookStack.CN) 构建 - 15 -

16 .DOCTYPE和浏览器渲染模式 DOCTYPE和浏览器渲染模式 DOCTYPE和浏览器渲染模式文档类型，一个文档类型标记是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。Doctype还会对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析，所以Doctype是非常关键的，尤其是在 IE 系列浏览器中，由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。浏览器解析HTML方式有三种解析方式: 非怪异（标准）模式怪异模式部分怪异（近乎标准）模式在“标准模式”(standards mode) 页面按照 HTML 与 CSS 的定义渲染，而在“怪异模式(quirks mode) 模式”中则尝试模拟更旧的浏览器的行为。一些浏览器（例如，那些基于 Mozilla 的 Gecko 渲染引擎的，或者 Internet Explorer 8 在 strict mode 下）也使用一种尝试于这两者之间妥协的“近乎标准”(almost standards) 模式，实施了一种表单元格尺寸的怪异行为，除此之外符合标准定义。一个不含任何 DOCTYPE 的网页将会以怪异(quirks) 模式渲染。 HTML5提供的 <DOCTYPE html> 是标准模式，向后兼容的, 等同于开启了标准模式，那么浏览器就得老老实实的按照 W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。参考资料 DOCTYPE和浏览器渲染模式 CS002: DOCTYPE 与浏览器模式分析怪异模式（Quirks Mode）对 HTML 页面的影响原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/doctype-and-brower-render.html 本文档使用书栈(BookStack.CN) 构建 - 16 -

17 .理解DOM结构理解DOM结构理解DOM结构 DOM: Document Object Module, 文档对象模型。我们通过JavaScript操作页面的元素，进行添加、移动、改变或移除的方法和属性, 都是DOM提供的。 W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 DOM节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点 HTML DOM 节点树 HTML文本会被解析为DOM树, 树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。本文档使用书栈(BookStack.CN) 构建 - 17 -

18 .理解DOM结构节点的关系父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）: 在节点树中，顶端节点被称为根（root）每个节点都有父节点、除了根（它没有父节点）一个节点可拥有任意数量的子同胞是拥有相同父节点的节点参考资料 W3C: Document Object Model (DOM) Technical Reports MDN: DOM API 浏览器的工作原理：新式网络浏览器幕后揭秘开发者需要了解的WebKit 理解WebKit和Chromium: HTML解析和DOM HTML解析原理原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/learn-dom-tree.html 本文档使用书栈(BookStack.CN) 构建 - 18 -

19 .HTML5新增内容 HTML5新增内容 HTML5新增内容 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3， JavaScript 的说法（严格意义上说，这么叫并不合适，但是已经这么叫开了，就将错就错了）。与HTML 4的不同之处文件类型声明（）仅有一型：。新的解析顺序：不再基于SGML。新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。 input元素的新类型：date, email, url等等。新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。全域属性：id, tabindex, repeat。新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。新增标签 HTML 5提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签，但有一定含义，例如 <nav> （网站导航块）和 <footer>``<audio> 和 <video> 标记。移除的标签一些过时的HTML 4标记将取消，其中包括纯粹用作显示效果的标记，如 <font> 和 <center> ，因为它们已经被 CSS取代。还有一些通过DOM的网络行为。修改的标签尽管和SGML在标记上的相似性，HTML5的句法并不再基于它了，而是被设计成向后兼容对老版本的HTML的解析。它有一个新的开始列看起来就像SGML的文档类型声明， <!DOCTYPE HTML> ，这会触发和标准兼容的渲染模式。在2009年1 月5号，HTML5添加了Web Form 2.0的内容，html5开始发展起来。无障碍（Accessibility）本文档使用书栈(BookStack.CN) 构建 - 19 -

20 .HTML5新增内容为了使HTML5的新元素或新属性获取最大化的兼容性，开发人员需要附加一点额外补助，或者有些特性根本没有被任何浏览器实现，或者浏览器根本不支持补助技术。因此有些特殊的HTML5特性根本不能使用。更多细节可参见HTML5 Accessibility（无障碍）新应用程序接口（API）除了原先的DOM接口，HTML5增加了更多样化的API: HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE HTML Canvas/WebGL HTML Audio/Video 总结最后奉上一张图片：本文档使用书栈(BookStack.CN) 构建 - 20 -

21 .HTML5新增内容参考资料维基百科: html5 MDN: HTML5 W3Schools: Learn HTML5 知乎: HTML5 到底是什么？原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/what-is-html5.html 本文档使用书栈(BookStack.CN) 构建 - 21 -

22 .常用CSS属性常用CSS属性常用CSS属性本文档使用书栈(BookStack.CN) 构建 - 22 -

23 .常用CSS属性本文档使用书栈(BookStack.CN) 构建 - 23 -

24 .常用CSS属性原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/common-use-css-property.html 本文档使用书栈(BookStack.CN) 构建 - 24 -

25 .盒模型盒模型盒模型盒模型(box model)是CSS中的一个重要概念，它是元素大小的呈现方式。需要记住的是："every element in web design is a rectangular box"。如图： CSS3中新增了一种盒模型计算方式： box-sizing 熟悉。盒模型默认的值是 content-box , 新增的值是 padding- box 和 border-box ，几种盒模型计算元素宽高的区别如下： content-box（默认）布局所占宽度Width： Width = width + padding-left + padding-right + border-left + border-right 布局所占高度Height: Height = height + padding-top + padding-bottom + border-top + border-bottom padding-box 布局所占宽度Width： Width = width(包含padding-left + padding-right) + border-top + border-bottom 布局所占高度Height: 本文档使用书栈(BookStack.CN) 构建 - 25 -

26 .盒模型 Height = height(包含padding-top + padding-bottom) + border-top + border-bottom border-box 布局所占宽度Width： Width = width(包含padding-left + padding-right + border-left + border-right) 布局所占高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom) margin叠加外边距叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单的说，当两个或更多个垂直边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。一般来说，垂直外边距叠加有三种情况：元素自身叠加当元素没有内容（即空元素）、内边距、边框时，它的上下边距就相遇了，即会产生叠加（垂直方向）。当为元素添加内容、内边距、边框任何一项，就会取消叠加。相邻元素叠加相邻的两个元素，如果它们的上下边距相遇，即会产生叠加。包含（父子）元素叠加包含元素的外边距隔着父元素的内边距和边框，当这两项都不存在的时候，父子元素垂直外边距相邻，产生叠加。添加任何一项即会取消叠加。参考资料 CSS-TRICKS:The CSS Box Model CSS Magic: The Box 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/box-module.html 本文档使用书栈(BookStack.CN) 构建 - 26 -

27 .CSS普通流（文档流） CSS普通流（文档流） CSS普通流（文档流）首先明确一点的是，W3C规范中没有 document flow 这个概念，只有normal-flow, 文档流的叫法主要还是多数中文译者的翻译方式问题。定义什么是普通流？简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述。调节普通流元素位置一般使用margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“距离”。只要不是float和绝对定位方式布局的，都在普通流里面。参考资料 normal-flow CSS定位机制之一：普通流原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-normal-flow.html 本文档使用书栈(BookStack.CN) 构建 - 27 -

28 .CSS定位方式 CSS定位方式 CSS定位方式 display属性每一个元素都有默认的display属性，使用最多的是 block , inline 和 inline-block ，不常用的是 table- cell 。根据display属性，我们可以将元素分为块级元素(block)和内联级元素(inline)。它们最大区别是: block 元素可以设置宽度，独占一行。 inline 元素宽度由内容决定，与其他元素并列在一行。常见的block属性元素有： div, h1-h6, ul, li, ol, dl, dd, dt 。常见的inline属性元素有: span, a, em 。 block 宽高可以自行设置，默认宽度由父容器决定，默认高度有内容决定。自己独占一行。 inline 宽度和高度都有内容决定，与其他元素共占一行。 inline-block 宽度可以自行设置，类似block，但是与其他元素共占一行，类似inline。长用于设置垂直居中。 table-cell 此属性指让标签元素以表格单元格的形式呈现，单元格有一些比较特殊的属性，可以设置元素的垂直居中等。 position属性元素在页面中的布局遵守一套文档流的方式，默认的定位属性值为 static 。它其实是未被设置定位的。元素如果被定位了，那么它的 top,left,bottom,right 值就会生效，能设置定位的属性是 relative , absolute 和 fixed 。需要注意的另一点是被定位的元素层次( z-index )会得到提高。 relative（相对定位）本文档使用书栈(BookStack.CN) 构建 - 28 -

29 .CSS定位方式设置了相对定位之后，通过修改 top,left,bottom,right 值，元素会在自身文档流所在位置上被移动，其他的元素则不会调整位置来弥补它偏离后剩下的空隙。 absolute（绝对定位）设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。元素偏移是相对于是它最近的设置了定位属性（ position 值不为static）的元素。且如果元素为块级元素（ display 属性值为 block )，那么它的宽度也会由内容撑开。因为：默认文档流中块级元素如果没有设置宽度属性，会自动填满整行。 fixed(固定定位) 设置了固定定位之后，元素相对的偏移的参考是可视窗口，即使页面滚动，元素仍然会在固定位置。参考资料 CSS 相对|绝对(relative/absolute)定位系列（一） CSS 相对/绝对(relative/absolute)定位系列（二） CSS 相对/绝对(relative/absolute)定位系列（三） CSS 相对/绝对(relative/absolute)定位系列（四） CSS相对定位|绝对定位(五)之z-index篇 displaytable-cell的应用 margin系列详析原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html 本文档使用书栈(BookStack.CN) 构建 - 29 -

21点赞

4收藏

0下载