实习总结

拿到腾讯这个 offer 纯属意外，当初得知需要线下面试的时候，拒绝了线下面试的邀请。最后面试官（现 leader）打电话过来问拒绝的原因，得知原因后 leader 给了个机会线上面，最后拿到了这份实习 offer。

从 7 月份实习到现在也半年多了，在这个半年多的时间里，接触到了不少东西，比如工具类vtools xboos mojo 等，也实践了很多自己的想法，还是有一些收获的，所以决定写一篇总结。

关于技术、业务

文档输出

刚来的时候和另外两个实习生写了大概 3 个礼拜的技术文档吧。补全了各种文档，也是第一次写技术文档。在写文档的过程中读完了express-ci的源码，这是一个express的改版，无中心路由的一个 node 框架，通过中间件解析出querystring 中的path controller method 然后实例化 controller 然后去调用，但是在阅读代码的过程中发现express-ci的几个问题

1. express-ci自己维护的中间件模型是混乱的。
2. express-ci频繁实例化controller的类，每一次请求都需要实例化一次

这种无中心的路由方式其实有好有坏，好的在于下一个接手代码的人很容易的就能知道这个请求的处理方法在哪里，坏的在于管理混乱，并且对开发者约束太强。

工程开发体验

刚开始实习的时候，大部分工程还在 svn 上，正在逐步的往 git 上迁移。当时的发布流程是本地构建文件，然后上传到 svn，再通过发布系统去拉 svn 的文件发布的 IDC，然后就会有特性相互覆盖的事件发生。并且由于所有人的构建环境都不一样，很危险，而且发布的时候 每个人的权限都非常大，经常都是免测发布，以至于，我刚到的时候都不敢用那个发布系统，每次都是找同事帮忙发，直到现在，我还是没学会那个发布系统（因为已经抛弃那个系统了）。

给同事介绍 CI 和 CD 的概念之后，开始尝试提升整个开发的体验，想在现有的条件下，最轻量的接一个集成系统。研究了Jenkins Drone 还有部门的Jats Jats是部门一直有的集成系统，但是主要是针对 Cpp 和移动端的集成。经过以下尝试：

1. drone 接入内部 git
2. 搭建 Jenkins 接入内部 git
3. 使用 jats 搭建 web 发布环境

经过这些尝试后，使用了jats发布了一段时间，稍微提升了一点开发体验，但是其实感受没有特别明显。

直到现在，公司内部有了类似 tranvisCI 的工具，公司内部几个 CI 系统的竞争，我们也选择了某个 CI 工具，开发体验有了大幅度提升，不需要 scp 去部署开发环境，不需要上传 svn 去部署测试环境和发 IDC。

在探索这个的过程中还是有一些阻碍的，比如最开始由于公司网络隔离，导致构建的机器没办法通过 22 端口拉git的依赖。有一些私有依赖都是放在 git 上的，npm install的时候没办法拉下来这些依赖。于是写了一个工具去分析这些依赖，然后通过git clone的方式安装下来，场景越来越复杂，最后这个工具也迭代了好多版本。不过现在网络环境优化，已经弃用了这个工具了。

还有测试环境隔离，在测试环境需要把不同版本隔离开来，于是写了一个工具，自动管理这些版本，工具在 github 私有仓库躺着。最后也没派上用场。因为 IDC 上不是 docker 环境，为了保持环境的一致性，所以最后写了个脚本，对代码工作目录和启动的端口做了隔离。

这段时间也了解到了不少东西，比如Monorepo 与Multirepos 学到了一些相关的工具lerna teambit等。

这部分应该是实习这段时间做出最大贡献的一部分吧。个人认为。

了解装饰器

装饰器（Decorator）是用来修改类行为的一个函数（语法糖），在许多面向对象语言中都有这个东西。

语法

装饰器是一个函数，接受 3 个参数target name descriptor

• target 是被修饰的目标对象
• name 是被修饰的属性名
• descriptor 是属性的描述

定义一个装饰器函数

1
2
3
4
5
6
7

function setName(target, name, descriptor) {
  target.prototype.name = "hello world";
}

@setName
class A {}
console.log(new A().name); // hello world

Immutable 与 Immer

Mutable

在前端中，对象是一个很重要的类型，为了优化以及尽量节省内存，所以对象保存的都是一个引用。比如：

1
2
3
4

const obj = { a: 1 };
const b = obj;
b.a = 2;
obj.a === 2; // true

这就是副作用，b = obj 是将obj的引用赋值给b 所以b和obj在内存中的地址是一样的，导致了b修改了obj也会跟着修改。

在 js 中，有很多方法都是有副作用的。比如Array的方法push shift等等。。。这些方法都会改变原来的数组，所以叫做有副作用。副作用其实是很危险的，特别对于构建比较大型的应用以及团队合作来说，一个对象被多次引用，某个地方修改了这个对象可能导致整个应用崩溃或者产生一个无法理解的 bug。举个例子。

之前做的某游戏中，物体对象有个属性，引用了一个公共的对象，在开发中对象之间的引用很常见的。

1
2
3
4

const path = [{x: 0, y: 0}, ......]
const fish = {path: path}
// path是fish的移动轨迹，path[0]是fish的出生点
// 在过程中，fish.path进行了移动的才做 及 path[i].x += dx; path[i].y += dy

原文： Check out these useful ECMAScript 2015 (ES6) tips and tricks

EcmaScript 2015 (ES6) 已经出现了很多年了，我们可以使用它的一些新特性。

1.设置必须的函数参数

ES6 提供了 默认的参数值，可以让你在函数的参数中指定默认值当参数没有传递其值的时候。

1
2
3
4
5

const required = () => {throw new Error('Missing parameter')};
//The below function will trow an error if either "a" or "b" is missing.
const add = (a = required(), b = required()) => a + b;
add(1, 2) //3
add(1) // Error: Missing parameter.

在这个例子中，我们对函数 add 的参数 a 和 b 设置了一个默认值，这个默认值为一个函数。当函数 add 被执行时，且参数 a 和 b 有一个没有传递值的时候，这个 required 函数就会执行，我们就会得到一个报错 Error: Missing parameter.

背景

跨域这个问题前端开发者都接触过，网上的文章也非常多，但是昨天的腾讯二面给我留了非常深刻的印象，原来跨域能问出那么多花样，难怪所有面试官都喜欢和面试者来探讨这个问题。

跨域

一、什么是跨域

简单的来说就是浏览器限制了向不同域发送ajax请求。

不同域体现在：域名、端口、协议不同

一、盒模型

在浏览器中有2种盒模型：W3C标准（标准盒模型），IE采用的盒模型称为（怪异盒模型），大部分浏览器在支持W3C标准的情况下还保留了IE采用的盒模型，在css3中可以通过box-sizing来设置。

当不对Doctype进行定义时，会触发怪异模式。

一、继承

对于有基于类的语言经验 (如 Java 或 C++) 的开发人员来说，JavaScript 有点令人困惑，因为它是动态的，并且本身不提供一个class实现。（在 ES2015/ES6 中引入了class关键字，但只是语法糖，JavaScript 仍然是基于原型的）。

在继承中：JS只有一种结构：对象，每个对象有一个私有属性（[[prototype]]）浏览器中表示为__proto__ ,它指向原型对象（prototype）。同理，该对象又有一个私有属性（[[prototype]]）指向该对象的原型对象，通过这样一层一层的直到最后的原型对象为null，并成为原型链的最后一个环节。

我们通过一段代码来描述这个过程：

1
2
3
4
5
6

let animal = {}
let bird = Object.create(animal)
let eagle = Object.create(bird)
eagle.__proto__ === bird // true
bird.__proto__ === animal // true
animal.__proto__.__proto__ === null // true

VDOM

Github

为什么要有VDOM

一、DOM(Document Object Model)

什么是DOM？

在MDN上有这样的一段描述：

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。

DOM可以将文档解析成一棵由节点和对象组成的树。

LeetCode Weekly Contest 56

##Maximum Length of Repeated Subarray

Given two integer arrays A and B, return the maximum length of an subarray that appears in both arrays.

Example 1:

1
2
3
4
5
6

Input:
A: [1,2,3,2,1]
B: [3,2,1,4,7]
Output: 3
Explanation:
The repeated subarray with maximum length is [3, 2, 1].

Github:Sudoku

项目相关要求

利用程序随机构造出 N 个已解答的数独棋盘 。

输入

数独棋盘题目个数 N

输出

随机生成 N 个 不重复 的 已解答完毕的 数独棋盘，并输出到 sudoku.txt 中，输出格式见下输出示例。