Fork me on GitHub

360奇舞学院2018前端星技术测评总结

发表于 | 分类于 | Pageviews

360奇舞学院2018年前端星计划技术测评相关问题及自己的回答。

说明：写这篇博客意在记录做题经历，后面有时间温故知新，因为学习时间较短，所以难免有不少错误和不周之处，希望多多指正。同时，也分享给一起学习的小伙伴，一起进步成长，fighting，时刻不忘奶自己，蛤蛤蛤。

题目回忆及自己解答如下，我自己的回答肯定不太好，仅供参考，欢迎有更周全回答的小伙伴多多补充~~~

关于HTML”语义化”

题目：HTML“语义化”的理解。

回答如下：

1、我所理解的”语义化”

写html结构时，要根据内容结构安排，选择合适的标签元素，便于开发人员阅读，即语义化好的html文档，即使在没有css的情况下，页面也能呈现出良好的内容结构，开发人员能清晰的阅读和了解到基本的内容结构；

语义化也有助于提升用户体验，例如使用标签的title、alt属性可以提供附加的提示信息；

语义化还有助于SEO，爬虫可以根据标签确定关键字的权重，让浏览器爬虫更好的解析，所以类似h标签，和title标签就对SEO很重要。

语义化还可以使其他设备例如屏幕阅读器等以自己的方式呈现网页。

2、平时在项目中如何实践”语义化”

首先，在页面结构的整体组织上，对于页面内容整体划分区域结构，使用html5的语义化标签，像navigator定义导航栏,header、footer分别定义页面的头部和脚部，section定义某块区域，article定义一大段的文章段落等等。

其次，在具体的某一块内容区域内部的html结构实现上，注重细节，像img元素的alt属性，以便图片在无法加载时显示给用户必要的文字说明，lable标签的使用，可以使表单输入操作对用户更友好等等。

最后，应该尽量避免通篇div。

对结构、表现、行为分离原则的理解

题目：对结构、表现、行为分离原则的理解。

回答如下：

使用html文件编写网页结构，使用css文件写样式，js文件写与用户交互等网页动态行为，应该避免在html文件的标签内写内联样式，尽量使用外部样式表引入网页样式，同理，避免在html文件的标签上添加onClick等与交互相关的js操作，将动态行为相关的js操作放在单独的js文件中，使用script标签在body底部引入。

在实践中，我会在html文件中只写页面结构，不会添加style这样的内联样式，以及在标签上定义onClick这样的js属性操作，而是在单独的css文件中写页面样式，在单独的js文件中写页面的交互相关的动态操作代码，最后在引入到html文件中。

操作数组

题目：给定两个长度相同的整数数组，将其中的数字分别一一配对，对每一对数字计算乘积，然后求和，计算出总和最小的配对方式，并打印出总和。例如输入 [1,2,3], [1,2,3]，输出为10。

回答如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function compare(num1, num2) {
	return num1 - num2;
}
module.exports = function match(arr1, arr2){
	var len = arr1.length;
	arr1.sort(compare); //将数组arr1按从小到大排序
	arr2.sort(compare);
	var sum = 0;
	var temp = 0;
	for (var i = 0; i < len; i++) {
		temp = arr1[i] * arr2[len - 1 - i]; //将arr1的最小值与arr2的最大值配对
		sum += temp;
	}
	return sum;
};

待改进：应该全部用ES6语法写要好一些，但ES6语法不太熟练，导致写的有点不伦不类，凑合看看吧。。

CSS画扇形

题目：垂直、水平居中显示一个半径100的标志，如图所示：

效果图

回答如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #warning {
            position: relative;
            overflow: hidden;
            width: 200px;
            height: 200px;
            margin: 150px auto;
            background-color: yellow;
            border-radius: 50%;
        }
        #warning ul li {
            list-style: none;
            position: absolute;
            width: 200px;
            height: 100px;
            right: 50%;
            top: 0;
            -webkit-transform-origin: 100% 100%;
            -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
            /*transform-origin设置旋转元素的基点位置*/
        }
        #warning .sector1 {
            background-color: black;
            -webkit-transform: skew(30deg, 0);
            -moz-transform: skew(30deg, 0);
            -ms-transform: skew(30deg, 0);
            transform: skew(30deg, 0);
        }
        #warning .sector2 {
            background-color: black;
            -webkit-transform: rotate(120deg) skew(30deg, 0);
            -moz-transform: rotate(120deg) skew(30deg, 0);
            -ms-transform: rotate(120deg) skew(30deg, 0);
            transform: rotate(120deg) skew(30deg, 0);
        }
        #warning .sector3 {
            background-color: black;
            -webkit-transform: rotate(240deg) skew(30deg, 0);
            -moz-transform: rotate(240deg) skew(30deg, 0);
            -ms-transform: rotate(240deg) skew(30deg, 0);
            transform: rotate(240deg) skew(30deg, 0);
        }
    </style>
</head>
<body>
    <!-- 核辐射警告标志是一个60度扇形黄、黑相间的圆，要求，使用html和css实现下面的效果：在网页中始终垂直、水平居中显示一个半径100的核辐射警告标志圆-->
    <!-- 制作原理，底部一个黄色纯色圆形，里面用三个黑色的矩形通过rotate、skew等变换得到三个黑色扇形-->
    <div id="warning">
        <ul>
            <li class="sector1"></li>
            <li class="sector2"></li>
            <li class="sector3"></li>
        </ul>
    </div>
</body>
</html>

待改进：忘记实现垂直居中效果了！！！ 以下是老师批改时给的思路，”使用border构造相间的三角形，然后使用overflow-hidden和border-radius剪裁成圆”，感觉老师好认真，很nice! 下面是老师的思路实现：

其中：

border-top: solid 173.2px yellow;
border-left: solid 100px transparent;
border-bottom: solid 173.2px black;
border-right: solid 100px transparent;

实现的效果是利用border构造两个顶角是60度的三角形，效果如图：

使用border构造相间的三角形

然后再利用父元素的overflow-hidden和border-radius剪裁成圆。完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #warning {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            /* 水平、垂直居中 */
            transform: translate(-50%, -50%);
            position: absolute;
            left: 50%;
            top: 50%;
            overflow: hidden;
        }
        #warning .bg {
            position: absolute;
            width: 0;
            height: 0;
            top: -73.2px;
            left: 0px;
            border-top: solid 173.2px yellow;
            border-left: solid 100px transparent;
            border-bottom: solid 173.2px black;
            border-right: solid 100px transparent;
        }
        #warning .bg:nth-child(1){
            transform: rotate(0deg);
        }
        #warning .bg:nth-child(2) {
            transform: rotate(120deg);
        }
        #warning .bg:nth-child(3) {
            transform: rotate(240deg);
        }
    </style>
</head>
<body>
    <div id="warning">
        <div class="bg"></div>
        <div class="bg"></div>
        <div class="bg"></div>
    </div>
</body>
</html>

2048游戏

问题： 实现一个 2048 游戏。

解答如下：

我的github项目地址

2048游戏的实现原理参考了github项目js实现2048小游戏。

待改进：没有实现移动盒子时的动画效果，游戏初始时的第一个数字有时不是2，因为当时为了简单，设计的每一次更新盒子2或者4出现的概率分别为2/3、1/3，没有为初始的情况单独设计，有待进一步改进。

-------------本文结束感谢您的阅读-------------
坚持原创，您的支持将鼓励我继续创作！