前端知识

1. Hoist
   a variable can be used before it has been declared(var的定义方式).
   var没有block statement scope: var可以被declare twice in same scope, var defined 在scope里却能影响scope外面。
   function declaration have a higher priorty than variable

2. Interceptor
   在前端项目中我们往往需要对每次请求做一些统一的处理，比如请求结果session过期处理，在header头部加上验证参数token等等，这个时候就需要用到拦截器。

// angular 7 version
import {Injectable} from "@angular/core";
import {
  HttpErrorResponse,
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
  HttpResponse
} from "@angular/common/http";
import {Observable, of, throwError} from "rxjs";
import {catchError} from "rxjs/internal/opeerators";
import {Router} from "@angular/router";

@Injectable()
export class MyInterceptor implements HttpInterceptor {

  constructor(private router: Router) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err: HttpErrorResponse) => this.handleData(err))
    );
  }
  
  private handleData(event: HttpResponse<any> | HttpErrorResponse): Observable<any> {
    switch (event.status) {
      case 401:
        console.log('not login');
        this.router.navigate(['/']);
        return of(event);
        break;
    
      default:
        break;
    }
    return throwError(event);
  }
}

3. what is dom
   DOM是什么data structure? tree

When a web page is loaded,
the browser creates a document object model of the page
so that javascript can maniplulate: HTML elements/attributes/styles, react to the element, create/delete

4. Html5 new feature

• new structural elements
  like <header><main> <footer> <section>
• new form elements
  new input type: date time number
  new input attribute: required placeholder autocomplete
• new syntax
  Empty, Unquoted, double quoted, single quoted
• Graphics
  canvas and svg

5. Box model, flexbox, css sizing
   box model is to define the syle of HTML elements, with margin, border, padding, content
   horizontally: only 3 attribute can be set to be auto: width, margin-left, margin-right, the auto is decided by the rest of space

Flexbox: A CSS3 layout mode that provides a easy way to arrange items in a container (responsive and mobile friendly)
No float
flex:1 | 2 | 3...
order: 1 | 2 | 3...
display: flex | inline-flex
flex-direction: column;
flex-wrap: wrap | nowrap
justify-content: flex-start | flex-end | center | space-between | space-around

for responsive:
@media(min-width:768px){
}

6. display:none, visibility: hidden, block and inline block and inline
   display:none, visibility: hidden: whether space is allocated for it on the page

• block
  create line break
  the whole box model applies to "block"

• inline
  just show like text in a paragraph, no height/width, you can set padding/margin/border, it will influence postion of surrounding text, but not surrounding "block" box

• inline-block
  Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

7. Javascript closure
   一句话: closure就是一个function，这个function可以access parent scope's variable
   这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
   闭包就是能够读取其他函数内部变量的函数, 闭包会使得函数中的变量都被保存在内存中

Example:

var outerFunc = function() {
    var foo = 'success';
    var innerFunc = function() {
        alert(foo);
    };
    setInterval(innerFunc, 3000);
};
outerFunc();

1.var func = innerFunc;将innerFunc传递给func形参(其实传递的是一个闭包，后面再具体说明)
2.程序运行3000ms，这期间继续执行其他代码
3.执行func()，但是3000ms以后，func()的执行是在window对象下了，但是func()能取到outerFunc()内部的变量

闭包的作用

• setTimeout/setInterval
  有时候控件没反应了，代码外层包装一下 setTimeout 就可以了。JavaScript 是单线程的环境，setTimeout 的作用是把包装的代码塞入队列，而不是立刻执行。
  A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).
  Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.

只看红字部分，首先闭包是函数(典型的情况)，其次，闭包包含了外部函数的作用域链。只要建立了对闭包的引用(var func = loop;或者将loop作为实参传递给函数)，就相当于变相读取了外部函数(outerFunc)的变量。

• 回调函数（callback）
• 事件句柄（event handle）

8. this
   this是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。

func.call(context, p1, p2)

this，就是上面代码中的 context。如果你传的 context 不是一个对象，那么 window 对象就是默认的 context。

• Javascript call() & apply() vs bind()?

  
  image.png
  

  Use .bind() when you want that function to later be called with a certain context, useful in events. Use .call() or .apply() when you want to invoke the function immediately, and modify the context.

Call/apply call the function immediately, whereas bind returns a function that, when later executed, will have the correct context set for calling the original function. This way you can maintain context in async callbacks and events.

9. Es6 new feature

let 关键词声明的变量不具备变量提升（hoisting）特性
const 在声明时必须被赋值

2. 模板字符串

$("body").html(`This demonstrates the output of HTML content to the page, 
including student's ${name}, ${seatNumber}, ${sex} and so on.`);

3. Arrow Functions
   不需要 function 关键字来创建函数
   省略 return 关键字
   继承当前上下文的 this 关键字

4. ES6中的类
   （for…of遍历出的结果是value
   for…in遍历出的结果是key）

• 类的声明不会提升（hoisting)，如果你要使用某个 Class，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误
• 在类中定义函数不需要使用 function 关键词

5. ajax call
   AJAX just uses a combination of:

• A browser built-in XMLHttpRequest object (to request data from a web server)

• JavaScript and HTML DOM (to display or use the data)

  
  image.png

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

• what is SPA?
  pros: 1. SPA is fast, as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application. 2. SPA can cache any local storage effectively. An application sends only one request, store all data, then it can use this data and works even offline.

cons: Memory leak (forgot to remove event listener)

6. if not use httpclient in angular, how to do it in native js

function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

7. use strict
   严格模式不允许意外创建的全局变量
   严格模式不能对变量调用 delete 操作符
   为只读属性赋值报错

Good understanding of asynchronous request handling, partial page updates, and AJAX
server-side CSS pre-processing platforms, such as LESS and SASS