Fork me on GitHub
image frame

枋

单例模式

单例模式

Java中的单例

饿汉

1
2
3
4
5
6
7
8
9
public class Single {
  private static Signle instance = new Single();

  private Single() {}

  public static Single getInstance() {
    return instance;
  }
}

懒汉

1
2
3
4
5
6
7
8
9
10
private static Single instance= null;
private Single() {}

public static Single getInstance () {
  if (instance == null) {
    instance = new Single()
  }

  return instance
}

懒汉线程安全

1
2
3
4
5
6
7
public static synchronized Single getInstance() {
  if (instance == null) {
    instance = new Single()
  }

  return instance
}

双检验

1
2
3
4
5
6
7
8
9
10
public static Single getInstance() {
  if (instance == null) {
    synchronized(Single.class) {
      if (instance == null) {
        instance == new Single()
      }
    }
  }
  return instance
}

登记静态

1
2
3
4
5
6
7
8
9
10
11
private static class SingleHolder {
  private static final Single INSTANCE = new Signle()
}

private Single() {

}

public static final Single getInstance() {
  return SingleHolder.INSTANCE
}

枚举

1
2
3
4
5
6
7

public enum Single {
  INSTANCE;
  public void method() {
    
  }
}

JavaScript中的单例

闭包实现单例

1
2
3
4
5
6
7
8
9
10
11
12

function A () {
  this.data = "Class A"
}

A.getInstance = function () {
  var instance;
  return function () {
    instance = instance ? instance: new A
    return instance
  }
}()

正常单例

1
2
3
4
5
6
7
8
9
10
11
12
13
let A = function () {
  if (A.instance) {
    console.log("no new")
  }
  this.data = "Class A"
}

A.getInstance = function () {
  if (A.instance == null) {
    A.instance = new A()
  }
  return A.instance
}

跨域资源共享

跨域资源共享

通过xhr实现ajax通信的主要限制来源于跨域安全策略。默认情况下xhr对象只能访问与包含他的页面位于同一域中的资源。

同域名，同端口，同协议

CORS - Cross-Origin Resource Sharing

基本思想

使用自定义的http头让浏览器与服务器进行沟通，从而决定请求或响应应该是成功还是失败。

在发送http请求时，附加一个额外的头部

1
Origin： http:www.kfdykme.xyz

如果服务器认为请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息

如果是公共资源，可以回发*

1
2
3
Access-Control-Allow-Origin: http:www.kfdykme.xyz

Access-Control-Allow-Origin: *

如何没有该头信息或者不匹配，则浏览器驳回请求

对CORS的实现

通过XMLHTTPRequest对象实现对CORS的原生支持。

跨域xhr的限制

  • 不能使用setRequestHeader设置自定义头部
  • 不能发送和接受cookie
  • 调用getAllResponseHeaders()方法返回空字符串

Prefighted Requests

带凭据的请求

Access-Control-Allow-Credentials: true

其他跨域技术

图像ping

1
2
3
4
5
6
7
var img = new Image();

img.onload = img.onerror = function () {
  alert('done')
}

img.src = ''

JSONP

动态script标、

Comet

长轮训

短轮训8

服务器发送事件

Web Socket

总结自 JavaScript高级程序设计

JavaScript-继承

JavaScript 继承

原型链

实现原型链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function SuperType() {
  this.property = true;
}

SuperType.prototype.getSuperValue = function () {
  return this.property;
}

function SubType () {
  this.subproperty = false
}

//继承了SuperType
SubType.prototype = new SuperType()

SubType.prototype.getSubValue = function () {
  return this.subproperty
}

var instance = new SubType()
console.info(instance.getSuperValue())

当前的原型链
SubType.prototype 指向SubType Prototype
SubType Prototype.prototype 指向 SuperType Prototype
SubType -> SuperType => Object

给原型添加方法的代码一定要放在替换原型的语句之后

原型链的引用类型问题

创建子类型的实例时，不能向超类的构造函数传参

借用构造函数

解决原型中包含引用类型的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function SuperType () {
  this.colors = ["red","blue","green"]
}

function SubType() {
  SuperType.call(this)
}

var instance1 = new SubType()
instance1.colors.push("black")
console.info(instance1.colors)

var instance2 = new SubType()
instance2.colors

可以传参

但是也无法避免构造函数的问题：方法都在构造函数中声明，无法复用

组合继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function SuperType(name) {
  this.name = name
  this.colors = ["red", "blue", "green"]
}

SuperType.prototype.sayName = funciton () {
  console.info(this.name)
}

function SubType(name, age) {
  SuperType.call(this, name)
  this.age = age
}

SubType.prototype = new SuperType() ;
SubType.prototype.constructor = SubType
SubType.prototype.sayAge = function () {
  console.info(this.age)
}

原型式继承

1
2
3
4
5
function object(o) {
  function F() {}
  F.prototype = o
  return new F();
}

ECMAScript5 通过新增Object.create()方法规范了原型式继承

1
2
3
4
5
6
var person = {
  name: 'Nicholas',
  friends: ["Shelby"]
}

var anotherPerson = Object.create(person)

引用类型会有影响

寄生式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createAnother(original) {
  var clone = object(original)
  clone.sayHi = function () {
    console.info('hi')
  }
  return clone
}


var person = {
  name: 'Nicholas',
  friends: ["Shelby"]
}

var anotherPerson = createAnother(person)

寄生组合继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function inheritPrototype(subType, superType) {
  var prototype = object(supertype.prototype)
  prototype.constructor = subType
  subType.prototype = prototype
}

function SuperType(name) {
  this.name = name
  this.colors = []
}

SuperType.prototype.sayName = function () {
  console.info(this.name)
}

function SubType (name, age) {
  SuperType.call(this, name)

  this.age = age
}

inheritPrototype(SubType,SuperType)

SubType.prototype.sayAge = function () {
  console.info(this.age)
}

总结自 JavaScript高级程序设计

JavaScript-对象

JavaScript

  • 属性类型
    • 数据属性
    • 访问器属性
  • 创建对象
    • 工厂模式
    • 构造函数模式
    • 原型模式
    • 组合构造函数和原型模式
    • 动态构造函数模式
    • 寄生构造函数模式
    • 问题构造函数模式

JavaScript 属性

JavaScript 创建对象

工厂模式

1
2
3
4
5
6
7
8
9
10
function createPerson (name, age, job) {
  var o = new Object()
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function () {
    console.info(this.name)
  };
  return o
}

构造函数模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Person (name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function () {
    console.info(this.name)
  }
}

var person1 = new Person('Nicholas', 29, 'Software Engineer')

person1.constructor == Person //true
person1 instanceof Person //true
person1 instanceof Object //true

要创建Person的新实例，必须使用new操作符.实际上经历了:

  • 创建一个对象
  • 将构造函数的作用于赋值给新对象
  • 执行构造函数中的代码
  • 返回新对象

构造函数与其他函数的唯一区别，就在于调用方式不同。任何函数，只要通过new操作符来调用，那他就可以作为构造函数

1
2
3
4
5
6
7
8
9
10
// 作为构造函数使用
var person = new Person("",22,"")

// 作为普通函数使用
Person("a",2,"c")

// 在另一个对象的作用域中使用
var o = new Object();
Person.call(o, "Kristen",25,"Nurse")
o.sayName()

构造函数的不同实例中的同名方法是不相等的

1
2
3
4
5
6
7
8
9
function Person (name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  // this.sayName = function () {
  //   console.info(this.name)
  // }
  this.syaName = new Function("console.info(thisname)")
}

可以通过将方法定义在构造函数外部解决，但是也会引发新的问题，构造函数失去了封装性

1
2
3
4
5
6
7
8
9
10
function Person (name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.syaName = sayName
}

function sayName() {
  console.info(this.name)
}

原型模式

1
2
3
4
5
6
7
8
9
10
11
function Person() {}

Person.prototype.name = "Namea"
Person.prototype.age = 29
Person.prototype.job = "Software Engineer"
Person.prototype.sayName = function () {
  console.info(this.name)
}

var person1 = new Person()
var person2 = new Person()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function Persone() {

}

Person.prototype = {
  name : "ada",
  age : 29,
  job : "Software Engineer",
  sayName: function () {
    console.info(this.name)
  }
}

//重写了 Person.prototype
var frient = new Person()
friend.constructor == Person //false

//可以这样

Person.prototype = {
  constructor: Person,
  name : "ada",
  age : 29,
  job : "Software Engineer",
  sayName: function () {
    console.info(this.name)
  }
}

//但是这样又会导致contructor属性的enumerable = true
//可以试下这样写

Person.prototype = {
  name : "ada",
  age : 29,
  job : "Software Engineer",
  sayName: function () {
    console.info(this.name)
  }
}

Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person
})

原型的动态性

先创建实例，再重写原型则会导致error

原生对象原型

1
2
3
4
5
6
String.prototype.startsWith = function (text) {
  return this.indexOf(teext) == 0;
}

var msg = "hello world"
msg.startsWith("hello") // true

原型对象问题

当涉及到原型中的属性是引用类型的属性时，会产生问题。

组合使用构造函数模式和原型模式

  • 构造函数用于定义实例属性
  • 原型模式用于定义方法和共享的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person (name, age, job) {
  this.name = name
  this.age = age
  this.job = job
  this.friends = ["Shelby","Court"]
  //此时对每个实例的friends操作都不会影响其他实例
}


Person.prototype = {
  constructor : Person,
  sayName: function () {
    console.info(this.name)
  }
}

动态原型模式

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name, age, job) {

    this.name = name
    this.age = age
    this.job = job

    if (typeof this.sayName != 'function') {
      Person.prototype.sayName = funciton () {
        console.info(this.name)
      }
    }
}

寄生构造函数模式

1
2
3
4
5
6
7
8
9
10
function Person(name, age, job) {
  var o = new Object()
  o.name = name
  o.age = age
  o.job = job
  o.sayName = funciton () {
    console.info(this.name)
  }
  return o
}

稳妥构造函数模式

稳妥对象

  • 没有公共属性
  • 其方法也不引用this的对象
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function Person() {
      var o = new Object()
      //可以在这里定义私有变量和函数

      o.sayName = function () {
        alert(name)
      }

      return o
    }

总结自 JavaScript高级程序设计

Sprinb-2-vue-my-code-life-5-类

Java 内部类

  • 常规内部类
  • 局部内部类
    • 定义在方法内部
  • 匿名内部类
  • 静态嵌套类
    • 只能访问静态成员

类

Java 类

1
2
3
4
5
public class JA{
  public JA () {

  }
}

常规内部类

JavaScript 类

1
2
3
4
5
6
7
8
9
class A {
  constructor() {

  }
}

function A () {

}

面试-某-Android

面试 Android

记了面经，但是忘了是哪一家公司了

  • 自我介绍
  • 项目经历
    • 小米
      • miui资源替换工具
        • flutter
          • dart文件上传下载，调用原生原生包
    • 商汤
  • Android
    • handler
    • handler机制
    • 事件分发
    • 自定义view
    • rxjava
  • java
    • 继承
    • 多态
      • 重载重写
      • 原理
    • 抽象
      • interface
      • 抽象类
    • 线程池
  • 算法
    • 下面
    • 有一个inter啥 没听清 不会
  • 内存泄漏
  • Android学习
  • 写过什么
    • 浏览器
    • 桌面助手

1、给出一个有序数组和一个数，求数组中连续元素的和等于所给数的子数组
如:[1,2,2,3,5,6,7,8,9],再给一个数5，求数组中连续元素的和等于5的子数组：[1,2,2]、[2,3]和 [5]

2、给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。
示例:
输入: [-2,1,-3,4,-1,2,1,-5,4],
输出: 6
解释: 连续子数组 [4,-1,2,1] 的和最大，为 6。

面试-百度-前端

  • 2020/03/25 10:00 - 11:00 二面
    • suanfa
      • let
      • 数组去重
      • 数字倒序
      • 长连接短链接
    • photoshop
  • 一面
    • http3
      • udp 头变了
    • css
      • flex有什么不好实现的
    • js
      • 新语法
    • 项目
    • 自我介绍
    • vue
  • 03/31 11:00 三面
    • 项目

面条-头条-ailab后端

头条-ailab后端

刚好需要前后端都做过的人。面试问的前端部分多

一面

记到别的地方，找不到了

二面 03/27 下午12:30

头条二面

  • 自我介绍
  • react
  • 后端
    • koa 怎么样
  • 跨域
  • 部署
  • 浏览器同源策略
  • cookie
  • let var
  • ldap
  • 时间戳四舍五入
  • 手写sleep
  • css移动端适配
    • dp
1
2
3
4
5
6
7
8
9
10
11
12
let sleep = (time) => {
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve()
      },time)
    })
}
async () => {
  a()
  await sleep(1000)
  b()
}

面试-美团-前端

美团-前端

一面

上来面试官先自我介绍了，但是我没听清名字，然后说已经看过我的简历了，让我说一下兴趣.
面试官一边问一边对我做出肯定，面得特别开心。

  • 自我介绍
  • js基础
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let arr = [{i:1},{i:2},{i,3}]
    let newArr = []

    newArr.push(arr[0])
    arr.forEach(i => {
      i.i = i.i+1
      })

    console.log(newArr[0])
    围绕这些做了变体
  • vue基础

data: () => {
arr: [0,1,2]
}

arr[0] = 1

会不会更新，为甚么
主要还是问vue的数据绑定，但是关于数组的数据绑定没了解过，但是可以知道他肯定不会变
[1]
需要变的话可能得对数组赋值，或者强制更新

  • electron
    • 主进程和渲染进程
    • 同步异步
      • 同步
        • evenet。returnValue
      • 异步
        • event。sender。send

主要讲了一下我当时写主进程渲染进程交互的时候遇到的比较恶心的情况，解决方法是封装出一个mvp模式

  • 进程与线程

讲了一下，概念，再讲了一下具体

  • 进程调度算法

讲了先入先出和按权重来。这部分都忘光光了

  • 同步锁

讲了java的同步锁和wait notify

  • 网络
    • tcp与udp的区别
  • 提了一下java内存回收和JavaScript内存回收机制类似
  • 其他不记得了
  • 算法
    • 判断循环依赖
1
2
3
4
a -> b,c
b -> c,d
c ->
d -> a
  • 问我有什么问题
    • 我问了为什么会问我electron 是不是美团有做这方面的东西
      • 答 有electron和智能硬件的交互，要调c 。 感觉牛逼，可以看一下

二面

  • 自我介绍等
  • 问了一个问题
    • 用面向对象实现一个流程图
      • 不清楚如何去描述]
      • 这里的流程图指的是程序设计中的流程图，而不是订单流程之类的东西
  • 设计模式
    • 只说了用过的的，没在课上学过
  • 操作系统
    • 问了大概
  • 计网
    • 问了大概，基本没问
  • 聊天为主
  • 算法学了什么
    • 问了快排，快排的时间复杂度
  • 数据结构学了什么
    • 链表，顺序表，树，图，
    • 堆没学
    • 图的相关计算不太记得
  • vue中的面向对象

[1] (https://blog.csdn.net/kirinlau/article/details/78027312)

  • © 2020 Kfdykme
  • Powered by Hexo Theme Ayer
  • PV: UV:

请我喝杯咖啡吧~

支付宝
微信