TypeScript

1.可兼容JavaScript；相比js，加入了注释；添加一个完整的类结构，更好的面向对象；

2.Mac OS X环境搭建：

2.1.安装homebrew（套件管理器）官网：brew.sh:

ruby -e "$(curl -fsSL 
https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.2安装npm（nodejs包管理器）：

brew install node

2.3.安装typescript(安装成功后，可以键入tsc测试)：

npm install -g typescript
tsc

3.IDE中新建typescript文件，添加watcher实现自动编译

也可以用命令的方式编译一个ts文件为js文件：终端目录下，tsc xx.ts，会生成同名js文件

4.TypeScript 7种基础数据类型：

Boolean：

var isBone: boolean = false; //使用时要给个初始化的值

Number：

var height: number = 6;

String：

var name: string = "bob";

Array：

var list: number[] = [1, 2, 3]; 
// 或者
var list: Array = [ "joe", ”kevin” ];

获取数组中数据：

List[0];

Enum：

枚举类型：有一定范围的数据可以用枚举类型最好

enum Color {Red, Green, Blue};

var colorName:string = Color[1];

console...

枚举类型还可以进行(数组)下标赋值操作：

enum Color {Red = 10, Green = 12, Blue = 13};
var colorName: string = Color[12]; // Green
// 获取下标：
var c:Color = Color.Green; // 1

Any：

任意类型：可以多次赋值，后面的会覆盖前面的。

var notSure: any = 10;
notSure = "hello";

也可以指定类型，如下指定为数组

Var list: any[ ] =  [1, “hello”, false];
List[2] // false

Void：

对函数进行声明：

function tell( ):string{
  return  "hello";
}

不需要任何返回值，就可以把函数声明为void

function tell1( ):void{}

类：

创建一个类：

class Preson{
  // 属性
  name:string;
  age:number;
  // 构造方法
  constructor(name:string, age:number){
    this.name = name;
    this.age = age;
  }
  // 普通方法
  print(){
    return this.name + " : " + this.age;
  }
}

调用这个类：

var p = new Person(“mike”, 10);
p.print();

类的继承

无构造函数的类的继承：

class Person{
  name: string;
  age: number;
  tell(){
    return this.name + ":" + this.age;
  }
}

class Student extends Person{
  school: string;
  tell(){
    return this.name + ":" + this.age + ":" + this.school; 
  }
}
var s = new Student("捷克学院");
// 没有构造函数，无法使用参数，就用如下方式传入参数值
s.name = "jack";
s.age = 23;
s.school = "捷克学院";
// 执行
s.tell();

有构造函数的类的继承：

class Person{
  name: string;
  age: number;
  constructor(name:string, age:number){
    this.name = name;
    this.age = age;
  }
  tell(){
    return this.name + ":" + this.age;
  }
}

class Student extends Person{
  school: string;
  constructor(school:string){
    // 修改父类的参数，super要写在最前面
    super("ime", 23);
    this.school = school;
  }
  tell(){
    return this.name + ":" + this.age + ":" + this.school; 
  }
}
var s = new Student("捷克学院");
// s.name = "jack";
// s.age = 23;
// s.school = "捷克学院";
s.tell();

访问修饰符

公有：public（默认）
私有：private

class Person{
  public name: string; 
  /**
  * 默认就是public，如果我在这里写private，
  * 或者在下面constructor参数中这样写：private name:string，
  * 那么继承自它的 Student 就无法访问到 name 这个属性了
  **/
  age: number;
  constructor(name:string, age:number){
    this.name = name;
    this.age = age;
  }
  tell(){
    return this.name + ":" + this.age;
  }
}

class Student extends Person{
  school: string;
  constructor(school:string){
    this.school = school;
    super("ime", 23);
  }
  tell(){
    return this.name + ":" + this.age + ":" + this.school; 
  }
}
var s = new Student("捷克学院");
// s.name = "jack";
// s.age = 23;
// s.school = "捷克学院";
s.tell();

封装的实现

· 利用private实现的私有属性，可以在类中通过getter和setter来对外开发（私有属性或方法）接口
· 在调用方法时，getter和setter会默认执行

class Hello{
  private _age:number;
  show(){
    return this._age; 
  }
  get age():number{
    // 可对外开发私有属性
    return this._age;
  }
  set age(newage:number){
    // 可修改私有属性
    if(newage >200 || newage < 0){
      alert("请输入正确的年龄");
    }else{
      this._age = newage;
    }
  }
}

var h = new Hello();
h.age = 300;
alert(h.tell());

static(静态)和其使用技巧

类的属性或方法（非静态），可以通过实例化对象调用，如下：

class Person{
  name:string;
  tell(){
    alert("姓名：" + this.name);
  }
}

var p = new Person();
p.name = "hello";
p.tell();

但一旦属性或方法声明为Static后，就变为了静态属性 / 静态方法
不能再通过实例化对象调用，必须通过类本身调用:

class Person{
  static name:string;
  tell(){
    alert("姓名：" + Person.name);
  }
}

var p = new Person();
Person.name = "hello";
p.tell();

static静态的使用（进阶）技巧：引用数据类型

class Greeter{
  greeting:string;
  constructor(msg:string){
    this.greeting = msg;
  }
  greet(){
    return "Hello," + this.greeting;
  }
}
/**
创建一个类型，指定它的类型为当前类的类型；
其实，创建了一个类，也就是创建了一个声明，
可以把当前数据的类型，声明为当前类的类型
我们称它为“引用数据类型”
**/
var green:Greeter;
green = new Greeter("mike");
alert(green.greet());

函数：函数类型

函数有命名函数和匿名函数，在Ts中，可以指定函数参数的类型和函数本身（返回值）的类型：

// 命名函数
function add(x:number, y:number):string{
  // 如果返回值的类型不是函数指定的类型，就会报错
  // 例如：return x+y；就会报错
  return "hello ts"；// 类型相符，不会报错
}

// 匿名函数(在js中，上面的命名函数是这种方式的语法糖)
var myadd = function(x:number, y:string):string{
  return "hello ts";
}

上面的x，y，并不清楚其意义，我们可以让参数更明确其意义：

/** 
* "=>" 前面可以声明参数的语义化名称和类型
* "=>" 后面紧跟着函数类型
**/
var myAddts:(name:string, age:number) => number = function(n, a){
  return a;
}

函数：可选和默认参数

可选参数：用？表示，可传可不传

function buildName(firstName:string, lastName?:string){
  if(lastName){
    return fristName + " " + lastName;
  } else {
    return firstName;
  }
}
// 均不会报错
var result1 = buildName("james", "bonde");
var result2 = buildName("bonde");
// 超出最大的参数个数，则会报错
// var result3 = buildName("james", "bonde", "valin");

默认参数：直接在参数上赋值

function buildName(firstName:string, lastName="bonde"){
  return firstName + " and " + lastName;
}
// 可以只传一个参数，也可以传两个参数，传两个，则会覆盖默认参数值
var result1 = buildName("Hello: ");
var result2 = buildName("james", "wade");
// 超出最大的参数个数，仍旧会报错
// var result3 = buildName("james", "bonde", "valin");

函数：可变参数

利用es6的扩展运算符（展开运算符）

function peopleName(firstName:string, ...restOfName:string[]){
  // restOfName:string[] 代表数据类型为字符串的数组
  return firstName + " " + restOfName.join(" ");
}
// 利用可变参数，可以传递无数个参数，在需要传入不确定参数个数时，很好用
var pn = peolpleName("jack", "mary", "honly", "kevin"...);

Lambads 和 this 关键字的使用

var people = {
  name:["iwen","ime","if","bean"];
  getName:function(){
    return function(){
      var i = Math.floor(Math.random()*4);
      return {
        n:this.name[i]
      }
    }
  }
}

var myName = people.getName();
alert("名字：" + myName().n); // 这是访问不到的

此时这个this指向的不是people。调用发现getName中的this关键字指向的是getName,访问不到外部的name属性。

可以用lambads表达式"()=>"修改，箭头函数能保存函数创建时的 this值，而不是调用时的值。

var people = {
  name:["iwen","ime","if","bean"];
  getName:function(){
    return () => {
      var i = Math.floor(Math.random()*4);
      return {
        // 这里的this代表函数创建时的this，因此可以访问到name属性
        n:this.name[i]
      }
    }
  }
}

var myName = people.getName();
alert("名字：" + myName().n); // 此时可访问

TypeScript 的重载

function attr(name:string):string;
fucntion attr(age:number):number;

function attr(nameOrAge:any):any{
  if(nameOrAge && typeof nameOrAge === "string"){  
    alert("姓名");
  }else{
    alert("年龄");
  }
 }

/**
*  在某些编程语言中，函数重载或方法重载是指能够创建具有不同实现的同名方法。
*  对重载函数的调用将运行与调用上下文相适应的该函数的特定实现，
*  允许一个函数调用根据上下文执行不同的任务。
*  这里如果有不清楚可以看一下这里：https://www.zhihu.com/question/63751258
**/
attr("Hello");
attr(19);

接口-创建接口

// 规范了参数的类型
function printeLabel(labelObj:{label:string}){
  console.log(labelObj.label);
}
var myObj = {label:"Hello"};
// var myObj = {label:10};
printeLabel(myObj);

接口-可选属性

interface USB{
  name:string;
  age:number;
}
function printUSB(pu:USB){
  console.log(pu.name);
}
// 如果不定义参数可选，my必须包含两个参数，即string类型的name和number类型的age，否则编译会报错
var my = {name: "ime", age: 100};
printUSB(my);

可选参数通过 " ？"定义

interface USB{
  name?:string;
  age?:number;
}
function printUSB(pu:USB){
  console.log(pu.name);
}
// 定义了参数可选，my就可以按照可选参数传递参数了。
var my = {name: "ime"};
printUSB(my);

接口-函数类型

用接口的类型来规定函数的类型

interface SearchFunc{
  (source:string, subString:string):boolean;
}
// 定义函数的类型为接口的类型
var mySearch:SearchFunc:
mySearch = function(src:string, sub:string){
  var result = src.search(sub);
  if(result != -1){
    return true;
  }else{
    return false;
   }
}

接口-数组类型

使用接口对数组进行规范化

interface StringArray{
  /**
  * 数组中index对应的是一个number类型，但数组最终返回的是一个string类型
  * 可理解为下标是number类型；数组中的数据是字符串类型
**/
  [index:number]:string; 
}

var myArray:StringArray;
// 规定了数组中必须是string类型，其他类型都不可以，即使为空，也必须是空字符串。
myArray = ["10", "12"];
alert(myArray[1]);

接口-class类型

interface ClockInterface{
  currentTime:Date;
  setTime(d:Date);
}
class Clock implements ClockInterface{
  currentTime:Date;
  setTime(d:Date){
    this.currentTime = d;
  }
  constructor(h:number; m:number){

  }
}

接口 - 接口继承与混合类型

接口的继承：

interface Shape{
  color:string;
}
interface PenStroke{
  penWidth:number;
}
interface Square extends Shape,PenStroke{
  sideLength:number;
}

var s = {}; // 将一个接口初始化在一个变量中
s.color = "blue";
s.penWidth = 10;
s.sideLength = 10;

接口的混合类型：

interface Counter{
  interval:number;
  reset():void;
  (start:number):string;
}

var c:Counter;
c(10);
c.reset();
...

认识泛型

可以让参数类型在使用时才指定类型，而不需要在方法定义时就指定，这样使用更加灵活；它相比于any类型，在使用方法时有更好的明确性。

function Hello(num:number):number{
  return num; // 必须是number类型
}
function hello(str:any):any{
  return str; // 可以是任意类型
}
// 泛型一般用表示,也可以用其他的大写字母
function hello(arg:T):T{
  return arg; // 在调用之前可以是任意类型
}
// 调用时指定参数类型后，就必须是这种类型
var output = hello("world");

泛型的使用

Vue

1、谈谈你对MVVM开发模式的理解
Model：代表数据模型，数据和业务逻辑都在Model层中定义；
View：代表UI视图，负责数据的展示；
ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

2、Vue 有哪些指令？
v-html、v-text、v-show、v-if、v-for等

3、v-if 和 v-show 的区别
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

4、简述Vue的响应式原理
当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
用ES5实现：

// 第一步 实现基本架构
// 第二步 把模型的数据 显示到视图
// 第三步  更新视图同步到模型，再更新视图
// 发布者
class Vue{
  constructor(options){
    this.options = options;
    this.$data = options.data;
    this.$el = document.querySelector(options,el);
    this._directives = {
       // 存放订阅者集合的数组对象  
    }
    this.Observer(this.$data);
    this.Compile(this.$el);
  }
  // 劫持数据
  Observer(data){
    // 更新视图  局部更新
    for(let key in data){
      this._driectives[key] = []; // 空类数组对象
      
      let val = data[key]; // 当前的值 
      let _this = this;
      Object.defineProperty(this.$data, key, {
        get: function(){
          return val;
        },
        set: function(newVal){
           if(newVal !== val){
              val = newVal;
              //_this._directives[key] 得到myText的数组
              _this._directives[key].forEach(watch=>{
                // 遍历订阅者的实例
                watch.update(); // 更新视图
              })
            }
        }
      });
    }
  }
  // 解析指令
  Compile(el){
    let nodes = el.children;] // 获取APP下面的子元素
    for(let i = 0;i < nodes.length; i++){
      let node = nodes[i]; // 当前元素
      if(node.children.length){
        // 如果当前元素含有子元素，就递归调用自己
        this.Compile(node);
      }
      if(node.hasAttribute('v-text')){
         // 获取属性值，对号加入对应的订阅者数组
         let attrVal = node.getAttribute("v-text")
         this._directives[attrVal].push(new Watcher(node, attrVal, this, 'innerHTML'));
      }
      if(node.hasAttribute('v-model')){
        let attrVal = node.getAttribute("v-model");
        this._directives[attrVal].push(new Watcher(node, attrVal, this, 'value'));
        // 监听文本框事件
        node.addEventListener('input', (function(){
          return function(){
            // console.log(node.value);
            // 更新视图到模型
            this.$data[attrVal] = node.value;
          }
        })());
      }
    }
  }
  class Watcher{
    constructor(el, vm, mySelf, attr){
      this.el = el; 
      this.el = vm; 
      this.el = mySelf; 
      this.el = attr; 

      this.update(); // 初始化数据
    }
    update(){
      // div对象[innerHTML] = vue对象.data['myText']
      // input对象[value] = vue对象.data['myText']
      this.el[this.attr] = this.mySelf.$data[this.vm];
    }
  }
}

在Vue3.0版本中式采用ES6的Proxy对象来实现。

// 获取段落节点
const paragraph = document.getElementById('pararaph');
// 获取输入框节点
const input = document.getElementById('input');

// 需要代理的数据对象
const data = {
  text:  'hello world'
}

const handler = {
  // 监控data中的text属性变化
  set: function(target, prop, value){
    if(prop === 'text'){
      // 更新值
      target[prop] = value;
      // 更新试图
      paragraph.innerHTML = value;
      input.value = value;
      retur true;
    } else {
      return false;
    }
  }
}
// 构造 proxy 对象
const myText = new Proxy(data, handler);

// 添加input 监听事件
input.addEventListener('input', function(e){
   myText.text = e.target.value; // 更新myText的值
});

初始化值
myText.text = data.text;

5、Vue中如何在组件内部实现一个双向数据绑定？
假设有一个输入框组件，用户输入时，同步父组件页面中的数据。
具体思路：父组件通过props传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值，具体实现如下：

import Vue from 'vue'
const component = {
    props: ['value'],
    template: ` < div >

2019前端知识点复习

TypeScript

Boolean：

Number：

String：

Array：

Enum：

Any：

Void：

类：

类的继承

访问修饰符

封装的实现

static(静态)和其使用技巧

函数：函数类型

函数：可选和默认参数

函数：可变参数

Lambads 和 this 关键字的使用

TypeScript 的重载

接口-创建接口

接口-可选属性

接口-函数类型

接口-数组类型

接口-class类型

接口 - 接口继承与混合类型

认识泛型

泛型的使用

Vue

Vue的生命周期

什么是vue生命周期？

Vue实现数据双向绑定的原理: Object.defineProperty()

Vue组件间的参数传递

Vue的路由实现：hash模式 和 history模式

Vue与Angular以及React的区别？

vue路由的钩子函数

vuex是什么？怎么使用？哪种功能场景使用它？

state

mutations

getters

action

modules

其他知识点：

http 和 https

HTTPS和HTTP的区别：

GET 和 POST

GET 和 POST 报文上的区别

常见问题:

跨域 —— 9种跨域方式实现原理

什么是跨域？

同源策略

同源策略限制内容有：

PWA

原型与原型链

作用域及闭包

this：

this 有多种使用场景:

闭包：

异步和单线程

任务列队

ES6 语法

let 和 const

解构赋值

数组结构赋值：

对象解构赋值：

正则扩展：

y修饰符：

u修饰符：

字符串扩展：（要安装babel-polyfill）

模板字符串（很重要）：

标签模板：

数值扩展：

数组扩展：

函数扩展：

对象（object）扩展：

Symbol：

ES6数据结构：

Set：

Map

Map与Array的对比 、 Set与Array的对比

Proxy和Reflect

Vue的路由实现：hash模式和 history模式

Map与Array的对比、 Set与Array的对比

ES6中的类和对象

说到for...of，就来回顾一下js中，数据的操作方法和几个循环的区别：