前言

笔试题是反映出我们的能力以及对知识的掌握和运用能力所在。本文就近期我收到的一份笔试题(实习面试题)进行一些个人想法的表达。因为是这份笔试题时间不限的，所以肯定不是诸位想的什么关于js、css的一些刁钻问题，而且发这种题目过来，本地调试一下不就OK了吗，而且也和本文标题不符。好了，开始进入正题，下面就是我收到的五道面试题：

第一道:实现一个青蛙表情(表情网址请戳这里):css3

不得不说H5和CSS3是最近非常流行的技术了,将这道题目放在前面也是因为CSS3属性animation和transition容易上手，但是CSS3带来的许多全新的属性都是很重要的。所以CSS3和H5以后应该会成为“标配”。

我选了第一行的倒数第二个，主要动画就是瞳孔和眉毛。将瞳孔和眉毛的分开，这题可难不到我，瞳孔只有透明度的动画，眉毛上下运动，同时改变透明度，上下运动那不就是在animtion中加上alternate嘛。眼看着眉毛上去时的动画很正常，但是回来的时候有一段时间会发生“放慢现象”——感觉就像FPS很低一样。大家可以简单地试一试，animation加上alternate才能看到这一“奇观”。具体原因可能和动画渲染有关，这个暂未细查，知道的小伙伴可以分享一下。所以我换了个方法,不使用alternate而是在动画中实现“返回”效果。

到此，第一道笔试就快完成了。然后就是将css使用stylus写出。Stylus是CSS预处理器的一种，笔试题选择使用Stylus是因为Stylus基于Node，而从后面的笔试题也可以看出，该公司对Node比较钟情。Stylus的语法和SASS、LESS类似，使用缩进代表嵌套关系，冒号、分号、逗号都是可选的。具体文档大家可以参考stylus中文版.

第二道:发布-订阅者模式(也称观察者模式):逻辑思考能力

目前前端技术面越来越广，javascript从一开始的网页脚本语言到现在能与Java、C等相提并论的编程语言，javascript的的确是一门很神奇的语言。而设计模式是技术人员需要掌握的一门强力技能，学会了它——代码复用、可读性都不再是问题，前提是你的设计模式用在了合适的地方。个人以为想要掌握一个设计模式，我们需要知道用途再开始下手，发布-订阅者模式类似于显示生活中报社与吃瓜群众的关系，吃瓜群众订阅报纸，报社才给你分发报纸，倘若吃瓜群众取消订阅报纸了，报社也就不再给他分发报纸了。

首先我们需要有一个观察者，相当于上面例子中的报社。观察者有几个方法:(被)注册订阅、发送消息和(被)取消订阅。看名字好像都应该是吃瓜群众的方法，大家都要不要理解错了,观察者需要有一个消息队列，用来存放不同的消息以及每条消息中的处理动作。下面我们分析一下每个方法：

注册订阅

注册订阅方法,将订阅者订阅的消息和处理该消息的动作推入消息队列，所以该方法中接受两个参数，一个是消息类型，一个是处理动作。具体代码如下:

// 注册订阅
register : function(type, fn){
// 如果该消息不存在，则创建消息
if(typeof messages[type] === 'undefined'){
messages[type] = [fn];
// 如果消息存在
}else{
// 将动作方法推入消息对应的动作执行列表
messages[type].push(fn);
}
},

发送消息

发送消息方法，将每条消息的处理动作执行一遍。参数为消息类型和消息中的内容。具体代码如下:

// 发布信息
publish : function(type, args){
// 如果不存在该条消息
if(!messages[type]){
return ;
}
// 定义消息信息
var events = {
type : type, // 消息类型
args : args || {} // 消息携带的数据
},
len = messages[type].length; //消息动作的长度
// 遍历消息动作
for(var i = 0;i<len;i++){
// 将每条消息通知给订阅者
messages[type][i].call(this, events);
}
},

取消订阅

知道的前两个方法这个取消订阅自然就很简单了，将数组中处理动作相等的删除就行了。我们使用Array.prototype.splice.这个函数第一个参数为删除开始的位置，第二个参数为要删除的项数，最后可以为若干个插入项.具体代码如下:

cancel : function(type, fn){
// 如果存在该类型的消息
if(messages[type] instanceof Array){
var i = messages[type].length -1;
// 遍历通知方法
for(; i >= 0 ; i--){
// 如果有通知该订阅者的方法，则移除
// &&的短路机制
// splice的三种功能(删除、替换、插入)之一
messages[type][i] === fn && messages[type].splice(i,1);
}
}
}

第三道:使用 vuejs 开发一个抽奖程序:MVVM

这道题我就不上代码了(github地址请戳这),Vue作为近来很受欢迎的MVVM框架的确有它自己独特的一面。这个小程序我做的比较简陋，题目后面要求奖品不能重复，也就是使用一个数组存放奖品，每抽一次奖，就将该项移除。这个并不难，如果我们同时使用该数组与它的长度进行随机的话，我们会发现到最后一两个奖品时，这个程序的随机变化就显得已经能够猜到结果了。我的做法是使用一个常量存放奖品，之后也可用于初始化。我使用这个常量进行随机显示，但是最后显示由真正的奖品数组随机的那一项，差不多就可以迷惑眼睛了。

第四道、第五道:快速学习与阅读文档

说实话，这两道题目中的大部分知识点我都没接触过，所以这两道笔试题的目的就是考验我们的快速学习能力和阅读英文文档能力了.Express的话，因为只是写一个页面就不需要去使用Express应用生成器了,参考着文档我自己搭建一个目录，然后就是根据文档进行各种包的使用了。

关于swig引擎模板我之前是没有接触过的,我所知道的就是pug(之前的jade)和ejs了。但是由于题目要求,只能现学现用了。因为页面的样式大部分都是重复的,所以我将数据放入json文件然后直接在页面循环遍历生成就可以了。而且该页面使用swiper插件,并且对这个插件进行了添加了样式。一开始我以为可用过API修改参数实现效果的,后来还是参考了源码。。。。

最后便是Nightmare了,虽然说早就听说过前端自动化工具这个名词,但是现在才有幸一睹芳容,但是在下载Nightmare的时候,总是在electron×××中断了,就又了解了一个新知识(Electron)。nightmare 是一个基于 electron 的自动化库（意思是说它自带浏览器），用于实现爬虫或自动化测试.其中有evaluate方法,该方法在客户端注入JS脚本并执行，从而实现electron模型下的C/S互动及数据交换。而我们只需要从元素中获取文本(innerText)就可以了。

不得不说这次笔试对我的意义还是蛮重要的:第一次收到笔试题目,同时这份笔试也让我对前端越来越感兴趣。最后来波总结之类的,在这声势浩大的前端潮流中快速学习、逻辑思考能力是非常重要的。与诸君共勉！(全部代码请戳这里)

文中如有错误,或用词不恰当请大家多多指正,感激不尽！谢谢！

转载注明出处——————待之以桃