Frontend Knowledge Chart

Frontend Knowledge Chart

HTML & CSS

HTML常用的一些Tips

Text

Paragraphs

大多数情况下我们都会用段落，它是HTML的重要组成部分，而在HTML中有一个元素就是为它而存在的：<p>。

千万别使用<br>标签用于分开整篇数落，因为断行标签不是用于这种情况的。

避免:

Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream pie jelly
beans muffin donut marzipan oat cake.

<br>

Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes pudding
chocolate cake cheesecake toffee.

推荐:

对于断行标签的一个合理使用场景是，举例来说，在诗或是歌曲的押韵处断开：

<p>So close, no matter how far<br>
Couldn’t be much more from the hearth<br>
Forever trusting who we are<br>
And nothing else matters</p>

Headings

标题标签，从<h1>到<h6>，其实是有一个暗含的层级关系的，从1（最重要）到6（不重要）逐层递减.

为了正确的处理语义，顺序的选择对于你来说正确的标题层级，而不是因为浏览器渲染标题时的大小而决定。你可以并且也应该用CSS来控制文本大小，同时选择一个合适的级别。

避免:

<article>
    <h1>Monkey Island</h1>
    <h4>Look behind you! A three-headed monkey!</h4>
    <!-- ... -->
</article>

推荐:

<article>
    <h1>Monkey Island</h1>
    <h2>Look behind you! A three-headed monkey!</h2>
    <!-- ... -->
</article>

另外需要考虑的一件事情就是如何创建与标题对应的子标题或是标语。W3C规范推荐使用普通的文本标签而是更低一层级的标题。

避免:

<header>
    <h1>Star Wars VII</h1>
    <h2>The Force Awakens</h2>
</header>

推荐:

<header>
    <h1>Star Wars VII</h1>
    <p>The Force Awakens</p>
</header>

Forms

Placeholders

大家都知道表单元素<input>中有一个叫placeholder的属性，它规定描述文本区域预期值的简短提示，该提示会在文本区域为空时显示，当字段获得焦点时消失。很明显，Placeholder是针对为表单元素提供正确示例用的。

不幸的是，我们常常将这些placeholder当作<label>元素来使用，让别人知道这个表单元素是什么而不是做为一个合法输入值的一个示例。这种做法不支持accessibel，所以你应该避免它。

避免：

<input type="email" placeholder="Your e-mail" name="mail">

推荐：

<label>
    Your e-mail:
    <input type="email" placeholder="darth.vader@empire.gov" name="mail">
</label>

移动设备中的键盘

对于使用移动设备（如电话或是平板）浏览网站的用户来说，提供输入提示是至关重要的一个功能。只要我们能够给<input>元素选择正确的type，那么我们其实可以很轻易地就做到这一点。

举例来说，type='number'会让移动设备显示数字键盘而不是通常的字母键盘。对于type='email'或是type='tel'来说也是一样的道理。

避免：

<label>Phone number: <input type="text" name="mobile"></label>

推荐：

<label>Phone number: <input type="tel" name="mobile"></label>

下面是一张对比图：左边是当使用type='text'时的键盘显示；右边是type='tel'时的键盘显示。

keyboard_compare.png

Images

该说说SVG了吧！现在你不仅可以像下面这样在<img>标签中这样使用SVG：

<img src="acolyte_cartoon.svg" alt="acolyte">

同时，你也可以在你的Web应用或是网站中使用SVG sprites实现矢量图标，而不是使用Web Font- 它一直是一种hack，有时可能你并不能得到你想要的结果。这是因为浏览器把Web Font当成文本对待，而不是图片。同时也有其它方面的问题，如广告拦截器会禁止下载Web Font。

Github从2016年2月23号开始已经不再支持Icon Font的Octicons。

如果你想了解更多，可以看看Sarah Semark的这篇关于为什么使用SVG的icons会比使用Web Font的更好的演讲。你也可以在CSS-Tricks上读到更多关于这项技术的。

其实SVG sprites与CSS sprites很相似。它也是把所有的SVG资源合并为一个图片文件。对于SVG来说，每一个资源是被包含在<symbol>标签中的，像下面这样：

<svg>
    <symbol id="social-twitter" viewBox="...">
        <!-- actual image data here -->
    </symbol>
</svg>

之后，这个图标可以通过<svg>标签在你的HTML文件中使用，像下面这个例子一样，我们指向SVG文件中symbol的ID：

<svg class="social-icon">
    <use xlink:href="icons.svg#social-twitter" />
</svg>

不得不承认，创建这些SVG spritesheet的过程是很枯燥的。好吧，这就是这些自动化工具，如gulp-svgstore存在的理由，它会自动化帮你做这些并根据你提供的单个的资源文件创建好一个CSS样式表。

记住一件事，既然我们开始使用<svg>而不是<img>标签来包含我们的图片资源，那么我们就可以使用CSS来应用样式。所有你可以对Web Font icons做的，同样你也可以对SVG icons做。

.social-icon {
    fill: #000;
    transition: all 0.2s;
}

.social-icon:hover {
    fill: #00f;
}

但是，同时也有些CSS限制：当你像这样使用SVG时（通过<use>链接到<symbol>），那么图片是被注入到Shadow DOM，那么我们就失去了某些CSS的功能。在这种情况下，我们并不能知道SVG中的哪些元素我们需要应用样式，并且一些CSS属性（像fill）中会应到到原本这些属性值为undefined的元素上。但是，对于Web Font icons来说，你同样不能做到这些。

基础

包含了HTML以及CSS的基本知识。

知识点

常见问题

float: 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

那么如何清除浮动：

  1. Clear: clear 属性规定元素的哪一侧不允许其他浮动元素;
  2. 空的DIV: <div style="clear: both;"></div>;
  3. BFC: 设置父元素 overflow: hidden或display: table触发BFC；
  4. CSS pseudo selector (:after);
  5. 使用 br标签和其自身的 html属性
  6. …

inline-block后的元素创建了一个行级的块容器，该元素内部（内容）被格式化成一个块元素，同时元素本身则被格式化成一个行内元素。

如果没有type属性，默认会是text。

定义图像形式的提交按钮。

Quirks mode and strict mode

我们知道<!DOCTYPE>声明对浏览器来说就是一个指令，它会告诉浏览器当前页面是用适用于哪一个版本的HTML。

什么是doctype:

选择使用哪种模式是需要一个触发器的，而这个触发器就在doctype switching中。根据标准规范来说，任何一个(X)HTML文档必须有一个doctype，由它来告诉大家当前这个(X)HTML文档正在使用哪一种模式。

兼容

考察包括Internet Explorer 6-8、Firefox 3.5+、Chrome 6+在内的各浏览器在HTML以及CSS方面的兼容性知识。

知识点

常见问题

性能

考察页面重构的知识中与性能有关的各知识点，其考察以点状知识为主。

性能不仅仅是浏览器执行、解析的相关数值，也包括如何让用户更快地看到内容等方面的考量。

知识点

常见问题

实践1

实现一个二级的菜单，其中一级菜单横向排列，当鼠标移动到一级菜单的某个菜单项上时，显示出该项关联的二级菜单。要求写出相关的HTML和CSS，并解释具体原理，并遵循以下规定：

实践2

实现一个3列布局，要求使用以下给出的HTML结构：

并符合如下要求：

http://jsfiddle.net/starandtina/f7kng0td/

JavaScript及BOM、DOM

基础

考核javascript语言相关的基础知识、ECMA262标准相关知识，以及浏览器提供的BOM模型的知识，和w3标准下的DOM相关知识。

知识点

常见问题

　　　　 表达式：123 + null　　　　结果值：123 　　　　 表达式：123 * null　　　　结果值：0

- undefined

    - undefined是全局对象（window）的一个特殊属性，其值是未定义的。但 typeof undefined 返回 'undefined' 。
    - 虽然undefined是有特殊含义的，但它确实是一个属性，而且是全局对象（window）的属性。
    - 尽管undefined是有特殊含义的属性，但却不是JavaScript的保留关键字。
    - undefined参与任何数值计算时，其结果一定是NaN。
    - NaN是全局对象（window）的另一个特殊属性，Infinity也是。这些特殊属性都不是JavaScript的保留关键字！

提高undefined性能 　　当我们在程序中使用undefined值时，实际上使用的是window对象的undefined属性。 　　同样，当我们定义一个变量但未赋予其初始值，例如： 　　　　var aValue; 　　这时，JavaScript在所谓的预编译时会将其初始值设置为对window.undefined属性的引用， 　　于是，当我们将一个变量或值与undefined比较时，实际上是与window对象的undefined属性比较。这个比较过程中，JavaScript会搜索window对象名叫‘undefined’的属性，然后再比较两个操作数的引用指针是否相同。 　　由于window对象的属性值是非常多的，在每一次与undefined的比较中，搜索window对象的undefined属性都会花费时间。在需要频繁与undefined进行比较的函数中，这可能会是一个性能问题点。因此，在这种情况下，我们可以自行定义一个局部的undefined变量，来加快对undefined的比较速度。例如：

function anyFunc()
{
    var undefined;          //自定义局部undefined变量

    if(x == undefined)      //作用域上的引用比较


    while(y != undefined)   //作用域上的引用比较

};

　　其中，定义undefined局部变量时，其初始值会是对window.undefined属性值的引用。新定义的局部undefined变量存在与该函数的作用域上。在随后的比较操作中，JavaScript代码的书写方式没有任何的改变，但比较速度却很快。因为作用域上的变量数量会远远少于window对象的属性，搜索变量的速度会极大提高。 　　这就是许多前端JS框架为什么常常要自己定义一个局部undefined变量的原因！

兼容

考察各浏览器中脚本编写时的兼容性处理，主要在于DOM相关属性的兼容性等。

知识点

常见问题

性能

考察在DOM操作等方面的性能测量、优化等知识，重在考察一个分析的过程，教条主义的结论并不适用。

知识点

常见问题

实践1

使用原生的javascript，实现一个ajax请求的函数：

function ajax(options) { };

要求options中含有以下内容：

url 请求的地址。 method 请求用的HTTP Method。 data 可选参数，发送请求时的数据。 success 可选参数，请求成功时的回调函数，形式：function(xhr) {}。 error 可选参数，请求失败时的回调函数，形式：function(xhr) {}。 codeXxx 可选参数，Xxx为一个数字，当响应中的HTTP状态码为Xxx时触发，形式：function(xhr) {}。

实践2

使用原生的javascript，实现一个函数：

function unique(array) { }

并符合以下要求：

实践3

使用原生的javascript，实现一个获取某个名字的cookie值的函数：

function getCookie(name) { }

要求不存在名字为name的cookie项时，返回空字符串。

实践4

使用原生的javascript，实现一个jsonp函数：

function jsonp(url, callback) { }

仅要求处理服务器正确返回的情况，在服务器正确返回时，可调用callback函数。

同时，与服务器约定，url中可添加callback=xxx作为回调函数名称，服务器会根据此query值生成脚本。

其他部分

HTTP协议

考查HTTP协议的认知程度和基本知识。

知识点

常见问题

安全相关

考查前端及系统安全方面的知识，需要对各种攻击手段和防范措施有基本的了解。

知识点

常见问题

新技术

考核对HTML5及CSS3、Javascript 1.6的相关知识的吸收程度，借以考察对前端技术的关注度及兴趣。

知识点

常见问题

实践1

现有一个页面的代码如下：

<!DOCTYPE html>

<%= Request.QueryString["errorMessage"] %>

该系统使用Session存放登录用户的信息，使用cookie中的session_id项来对应服务器的Session。

请设计一个攻击方案，使攻击者可以在不使用社会工程学的前提下，获得用户的帐号并成功登录到系统中。

实践2

现有一个简单的购物系统，有以下数据结构：

有以下的功能需求：

请根据上面的信息，请设计以下功能的url结构以及相应的HTTP Method，url中的参数使用{xxx}的形式表示：

功能

Method

URL

用户登录界面

用户登录提交地址

根据category查看Product列表

查看Product详细信息

购买Product

用户查看自己的BuyRecord

要求尽可能使每个URL语义化，便于用户的记忆和分享。

Related Posts

Xin(Khalil) Zhang 09 September 2016
blog comments powered by Disqus