杨勇冠的博客

本文转载自网易实践者社区
作者：马超（网易高级前端技术经理）

每年的三月到六月，都是招聘高峰，除了大量的应届毕业生涌入社会之外，还有一些工作了一两年尚未找到稳定归属感的人，也会开始投递简历（没错，基本都是在拿了年终奖之后）。

作为前端技术主管，有幸，或者说是不幸，我需要在这些投递过来简历的人中，耗费大量精力来筛选符合公司要求、团队发展、技术基础三方面条件的人选。

我不是一个擅长技巧的面试官，尽管公司HR也给我们培训过招聘的原则、技巧，但是真正的体验和感受，却是在做了大量面试之后自然而然悟出来的。常见的招聘要求中，基本都有“工作经验”的要求，而且都是以年作为单位。但是实际情况却告诉我，工作经验往往不是以年衡量的，甚至有些时候跟时间没有关系。

今天想要分享的一点，是关于“为什么你的工作经验不值钱”，或者“怎么样才能让工作经验值钱”。从一个小小的面试题目入手：

编写一个javscript函数 fn，该函数有一个参数 n（数字类型），其返回值是一个数组，该数组内是 n 个随机且不重复的整数，且整数取值范围是 [2, 32]。

如果愿意，请先暂停阅读文章，自己动手写一下这个函数。是的，老简单了。我可以等你五分钟。

~~~ 华丽的五分钟过去了 ~~~

现在假设你的工作时间为 y 年，经验系数默认为 1，即工作经验是：Y = 1 * y。从现在开始，以下的错误，你要是遇到了，请自行调整经验系数。

| 可用

作为一段需要满足需求的代码来说，它最核心的、最低的要求：可用。

如果你没有产出一个函数( fn )，或者产生了语法错误，那就请设置经验系数为 0，然后去面壁思过；

请将代码在控制台运行，并执行 fn(3)，看看是否输出一个数组，数组中包含了三个随机且不同且在[2,32]的整数，如果不是，请将经验系数 * 0；

一个参考的半伪代码是：

function fn(n){
   //准备容器保存结果
   var arr = [];
   //循环
   for(var i=0; i<n; i++){
      //创建一个随机数
      var rnd = getRand(2, 23);
      //检查是否重复
      if(checkInArr(arr, rnd)){
        i--;
      }else{
        arr.push(rnd);
      }
   }
   return arr;
}

其中 getRand 、checkInArr 还另有讲究，后面会提到。当然思路和方法不止一个，后面也会提到。

有相当多的面试者，包括不少工作时间为2年以内的同学，都会在这一步犯错，非常遗憾。

| 健壮

代码是否老道，过了“可用”这一关后，就开始见分晓了。

所谓“健壮”，即最基本的兼容性处理、边界处理，异常处理、用户输入校验。很多时候，需求方不会明确告诉你这些逻辑怎么处理，但并不意味着你不需要处理。

健壮的程序，一定会将这些兼容性、边界、异常、输入做处理，以保证核心功能的正确输出。当然，如果你的代码没有任何输入并不考虑兼容性（可能吗？）或者仅仅是内部函数，那这一步要求可以降低，并不意味着你可以完全不做。

好，回过头看代码：

——如果你没有对 n 的取值范围做校验（n必须是 1 到 31 之间的整数），请将经验系数 0.3；
——如果你没有对 n 是否为数字做校验，请将经验系数 0.5；
——如果你没有对 n 是否存在做校验，请将经验系数 0.7；
——如果上述校验都做了，但是没有校验对，请将经验系数 0.9；你需要多练习，仔细认真的。

| 可靠

大多数面试者都止步于前两关，鲜有进入第三关的：可靠。

javascript没有强数据类型，函数的返回值也无法强制返回的数据格式。但是作为“可靠”的要求，尽可能在任何情况下，都返回一个可靠的结果，哪怕是异常情况下。是的，这一步很简单，几乎不耗费几个字节的代码，但是会让 fn 的返回值变得可靠：

function fn(n){
   //健壮性校验
   if(!isThere(n)) return [];
   if(!typeOK(n)) return [];
   if(!rangeOK(n, 2, 32)) return [];

   //核心功能同上
   ...
}

如果你留意到并处理可靠返回值的问题，那请将经验系数 * 1.2；

另外，一个牵涉的话题就是：异常情况下，是否要抛出 Error，或 console.error ？

关于这个话题，似乎没有定论，需要自己衡量。我的观点是：如果异常情况下不会造成太大影响的话（包括定位错误），就不用抛错或提示。但同样的，这个衡量仍然是经验性的。此处不再展开讨论。

| 宽容

如果在你的日常开发中注意“可用”、“健壮”、“可靠”原则的话，你的工作经验就会大于你的工作时间，也就会更容易受到重视，自己所挖的坑就会少。而我近期面试的人中，甚至包括5、6年工作时间的，几乎都止步于此。

如果你要想成为一个受欢迎的技术人员，“宽容”是第一步：对需求宽容、对用户宽容、对调用者宽容、对维护者宽容。

回到代码:
——如果 n 是一个字符串数字，是否可以允许进入处理流程？如果是，请将经验系数 1.1；
——如果 n 是一个含有小数的数字，比如 3.000001，是否允许进入处理流程？如果是，请将经验系数 1.1；
——你的代码中，是否有足够多且清晰的注释？如果是，请将经验系数 1.2；
——如果需求调整了 [2, 32] 的范围，你的代码是否可以快速调整，甚至不用调整？如果是，请将经验系数 1.2；

一个参考的半伪代码是：

function fn(n){
   //健壮性校验
   if(!isThere(n)) return [];
   if(!typeOK(n)) return [];
   if(!rangeOK(n, 2, 32)) return [];

  //准备容器保存结果
     var arr = [];
     //循环
     for(var i=0; i<n; i++){
        //创建一个随机数
        var rnd = getRand(2, 23);
        //检查是否重复
        if(checkInArr(arr, rnd)){
          i--;
        }else{
          arr.push(rnd);
        }
     }
     return arr;
}

| 精益求精

恭喜你完成了前四关！

如果你在实际开发中，时时刻刻留意这些原则，这足够让你的工作经验扩大化，并给你带来更多的认可，这些认可来自于需求方（或许是那个曾经非常蛮横的产品狗）、用户以及你的同事。但不应该包括你自己，你还需要更进一步。

宽容是宽以待人，精益求精是严以律己。内外兼修才是高手。当你将这五个原则（可用、健壮、可靠、宽容、精益求精）变成你自己的开发习惯，你的工作经验就跟你的工作时间没有关系了。

看到这里，不知道你的前端经验系数是多少，有没有达到自己的心理预期了呢？

前端开发是当前互联网行业炙手可热的岗位，希望大家能不断进步。

认识HTML5的WebSocket

在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API：它可用于客户端、服务器端。而且有一个优秀的第三方API，名为Socket.IO。

一、什么是WebSocket API?

WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。

Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。

二、WebSocket API的用法

只专注于客户端的API，因为每个服务器端语言有自己的API。下面的代码片段是打开一个连接，为连接创建事件监听器，断开连接，消息时间，发送消息返回到服务器，关闭连接。

// 创建一个Socket实例
var socket = new WebSocket(‘ws://localhost:8080’);

// 打开Socket
socket.onopen = function(event) {

// 发送一个初始化消息
socket.send(‘I am the client and I\’m listening!’);

// 监听消息
socket.onmessage = function(event) {
console.log(‘Client received a message’,event);
};

// 监听Socket的关闭
socket.onclose = function(event) {
console.log(‘Client notified socket has closed’,event);
};

// 关闭Socket….
//socket.close()
};

让我们来看看上面的初始化片段。参数为URL，ws表示WebSocket协议。onopen、onclose和onmessage方法把事件连接到Socket实例上。每个方法都提供了一个事件，以表示Socket的状态。

onmessage事件提供了一个data属性，它可以包含消息的Body部分。消息的Body部分必须是一个字符串，可以进行序列化/反序列化操作，以便传递更多的数据。

WebSocket的语法非常简单，使用WebSockets是难以置信的容易……除非客户端不支持WebSocket。IE浏览器目前不支持WebSocket通信。如果你的客户端不支持WebSocket通信，下面有几个后备方案供你使用：

三、WebSocket 后备方案

Flash技术 —— Flash可以提供一个简单的替换。使用Flash最明显的缺点是并非所有客户端都安装了Flash，而且某些客户端，如iPhone/iPad，不支持Flash。

AJAX Long-Polling技术 —— 用AJAX的long-polling来模拟WebSocket在业界已经有一段时间了。它是一个可行的技术，但它不能优化发送的信息。也就是说，它是一个解决方案，但不是最佳的技术方案。

由于目前的IE等浏览器不支持WebSocket，要提供WebSocket的事件处理、返回传输、在服务器端使用一个统一的API，那么该怎么办呢？幸运的是，Guillermo Rauch创建了一个Socket.IO技术。

为什么你的前端工作经验不值钱？