yorrran / cai-blog

This is to record the interview questions

This repo is used to record the problem that i met during interview question.

All the questions are recored with a way of using issue

cai-blog's Issues

interview-qn01

1. 解释继承
   继承本质是复制重写原型对象，代之以一个新类型的实例

原型链继承：
继承原型属性和方法，不同的实例对象有不一样的基本属性，改变实例对象基本属性不影响别的实例对象
function parent() {
this.parent='parent'; //私有，不共享
}

parent.prototype.getParent= function() {
return this.parent;
}

function child() {
this.child='child';
}

child.prototype = new parent();

child.prototype.getChild= function() {
return this.child;
}

var instance = new child();
console.log(instance.getParent()); //child

2. 构造函数继承
   继承实例属性和方法，不能复用, parent原型方法不能被复用，parent.prototype方法不能在继承方法复用
   function parent(){
   this.parent=["parent1","parent2","parent3"];
   }
   function child(){
   parent.call(this);
   }
   const v1 = new child();
   v1.parent.push("parent4");
   alert(instance1.parent);//"parent1, parent2,parent3,parent4"

var v2 = new child();
alert(instance2.parent);//‘parent1, parent2, parent3’

3. 组合继承
   继承方法和属性能被复用，能向parent传参，引用和基本属性不共享
   function parent(name){
   this.parent= name;
   this.arr= ["parent1", "parent2", "parent3"];
   }
   parent.prototype.sayParent= function(){
   alert(this.parent);
   };

function child(name, val){
parent.call(this,name);
this.val=val;
}
child.prototype = new parent();
child.prototype.constructor =child;
child.prototype.sayChild= function(){
alert(this.val);
};

var v1 = new parent("p1", 1);
v1.arr.push("parent4");
alert(v1.arr);//parent1, parent2, parent3, parent4
v1.sayParent(); //"p1";
v1.sayChild(); //1

var v2 = new child("p2", 2);
alert(v2.arr);//parent1, parent2, parent3
v2.sayParent(); //"p2";
v2.sayChild(); //2

cai-1(click through, http-caching, http transport)

From

From niuke

Description

选了几个题目来回答，虽然在正式开发的时候很少能用到这些知识，大部分都是在切图，可是对了解语言还是很有意思, 算是给自己的复习

1. Click through div to next element, explain why will it happen?

  var box1 = document.getElementById("box1");
  var box2 = document.getElementById("box2");
  box1.ontouchstart = function(e) {
   console.log('box1 touched');
   box1.style.display = 'none';
  };
  box2.onclick = function() {
   console.log('box2 clicked');
  }

• When on mobile device, user click on box 1, it will toggle both touch start and click.
• When touchstart on box1, box1 will be closed.
• Click event will be toggled with latency of 300ms.
• When click triggered, it will toggle click event on box2.
• This will cause click on box one but click through to box 2.

How to solve

I have met this problem before when i use fabric.js to draw rectangles on the image, the user needs to
explicit click on the area to go in to certain product detail but fabric.js only expose touch api. On mobile,
when user action is scroll, it will toggle both touch and click. Without intention of click but touch on the
click area, user will directly go in into the images.

This problem is different from event bubbling where event bubbling has the relationship of child element. To solve the problem, add preventDefault() to avoid the default action.

  box1.ontouchend = function(event) {
    $event.preventDefault();
  };

2. Explain http-caching

• Each resouce can define its caching policy via Cache-Control HTTP header

  It allows define how long the cache control should cache the response.
  Cache-Control: max-age=120
  It instructs clients to cache it for up to 120 seconds.
  It will follow with validate token to check if the resource has been modified
  Cach-Control: max-age=120
ETag: "x12dff"

• Provide ETag in 'IF-None-Match' HTTP request header.

  Sever will check the token against current resource. If token hasn't change, the server returns a "304
  Not Modified", it tells the browser that the response in cache hasn't change and can be renewed to 120
  second.

3. What is jsonp?

It uses javascript callback with script tag to achieve cors.
localhost: 8081

<script type="text/javascript">
function callback(data) {
 console.log(data.message);
}
</script>
<script type="text/javascript" src="http://localhost:8082/test.js"></script>

localhost:8082 test.js

callback({message:"success"});

Cors in development: Add proxy in web devserver
Cors in production: Nginx proxy pass to access different origins

4. Explain tcp and udp

TCP/IP and UDP/IP refer to tcp and udp over IP.
TCP: TCP will guarantee the package that received by recipient are in order by numbering them. It is
reliable and no data is corrupted or lost in transit. Package will be resended if sender does not receive
correct response from recipient.
UDP: Udp will just send the package without consider about sequence or whether recipient can
receive the packages.
Examples: tcp(Poker game), udp(multiplayer game)

cai-2(web speed)

Web performance

1. Avoid unnecessary downloading of resources.
   eg, import and use resource when component is loaded. When there are hundreds of images on swiper, only loading 10 each time to avoid all resources are loaded at once.
2. http-caching

Difference between callback, promise and async

1. callback points result to a function when asynchronous function finishes execution.
2. promise is object that contains asynchronous functions and notified .then or .catch when it is done.
3. async is syntactic sugar to handle asynchronous tasks.

caibi-me3

如何在远程服务器开启桌面GUI
在工作中遇到这样一个问题，当需要连接国内的authentication service的时候，需要vpn进入境内连接，可是作为googel的忠实用户，不想用后缀为-bj的vpn连接，这样就无法access只是境内的服务，那就开个服务器在云上然后开启桌面服务器，这样开发也可以在远程桌面服务器完成。

1. 本次test是用digitalocean的服务，桌面操作系统用的是centos7.6
   这里有一些tricky的部分，因为不同version的桌面系统在configuration的时候会有点不一样，查看documentation来找到不一样的地方。
   首先在digital ocean买一个服务器这里称droplets
   买2GB或者4GB可以根据开发需要

先安装gnome服务，这是和server做一个interaction作用的desktop
sudo yum groupinstall -y "GNOME Desktop"

安装完要reboot server
sudo reboot

install vnc server, 连接远程桌面
sudo yum install -y tigervnc-server，

建一个copy的service file给用户
sudo cp /lib/systemd/system/[email protected] /etc/systemd/system/vncserver@:4.service
这里的port会指向590X

编辑.service文件
ExecStart=/usr/bin/vncserver_wrapper <userName> %i
只需填入用户姓名
PIDFile=/home/<userName>/.vnc/%H%i.pid
增加pid文件， 填入用户姓名

改完configuration file之后要reboot server
sudo systemctl daemon-reload

开启给用户创建服务的service
sudo systemctl enable vncserver@:4.service

开启firewall
sudo firewall-cmd --permanent --zone=public --add-port=5904/tcp

修改使用firewall
sudo firewall-cmd --reload

切换到用户服务器
cd /home/<userName>

输入用户
vncserver
输入密码

修改使用vnc
sudo systemctl daemon-reload

开启vnc
sudo systemctl restart vncserver@:4.service

开启了远程服务器就可以用本地的电脑打vnc-viewer, 连接服务器和端口就可以打开桌面应用，此时在vnc-viewer可以access境内服务，在本地可以连接境外vpn，远程桌面access境内服务。