html-basic

发表于 2020-04-10 更新于 2021-02-21

html基础
- 何时引用js
  - src href
    - src
      - 请求src资源会阻塞
    - href
      - 并行下载
- 如何引入js
  - script标签
  - 动态创建script标签
- center标签居中

进程

发表于 2020-04-10 更新于 2021-02-21

进程状态
- 创建
- 就绪
  - 等待处理机
  - 运行
- 运行
  - 阻塞
  - 终止
- 阻塞
  - 等待输入输出
  - 就绪
- 终止

html5

发表于 2020-04-10 更新于 2021-02-21

HTML5 新特性
- Canvas
- Geolocation
- Audio Video
- localStorage sessionStorage
- webworker websocket
- header nav footer aside article section

css3

发表于 2020-04-10 更新于 2021-02-21

css3

transition
- transition: property duration timing-function delay;
animation
- @keyframes
- animation: name duration timing-function delay iteration-count direction;

html5 input

发表于 2020-04-10 更新于 2021-02-21

html5 input

input html5新增项
- email
- url
- number
- range
- Date Picker
  - date
  - month
  - week
  - time
  - datetime
  - datetime-local
- search
- color

单例模式

发表于 2020-04-09 更新于 2021-02-21

单例模式

Java中的单例

饿汉

public class Single {
  private static Signle instance = new Single();

  private Single() {}

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

懒汉

private static Single instance= null;
private Single() {}

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

  return instance
}

懒汉线程安全

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

  return instance
}

双检验

public static Single getInstance() {
  if (instance == null) {
    synchronized(Single.class) {
      if (instance == null) {
        instance == new Single()
      }
    }
  }
  return instance
}

登记静态

private static class SingleHolder {
  private static final Single INSTANCE = new Signle()
}

private Single() {

}

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

枚举


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

JavaScript中的单例

闭包实现单例


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

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

正常单例

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
}

跨域资源共享

发表于 2020-04-09 更新于 2021-02-21

跨域资源共享

通过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

var img = new Image();

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

img.src = ''

JSONP

动态script标、

Comet

长轮训

短轮训8

服务器发送事件

Web Socket

总结自 JavaScript高级程序设计

vue中的面向对象

发表于 2020-04-03 更新于 2021-02-21

Vue中的面向对象

被问了这么个问题，不好回答。但是

JavaScript-继承

发表于 2020-04-02 更新于 2021-02-21

JavaScript 继承

原型链

实现原型链

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

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

原型链的引用类型问题

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

借用构造函数

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

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

可以传参

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

组合继承

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)
}

原型式继承

function object(o) {
  function F() {}
  F.prototype = o
  return new F();
}

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

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

var anotherPerson = Object.create(person)

引用类型会有影响

寄生式继承

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)

寄生组合继承

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-对象

发表于 2020-04-02 更新于 2021-02-21

JavaScript

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

JavaScript 属性

JavaScript 创建对象

工厂模式

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
}

构造函数模式

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操作符来调用，那他就可以作为构造函数

// 作为构造函数使用
var person = new Person("",22,"")

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

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

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

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)")
}

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

function Person (name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.syaName = sayName
}

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

原型模式

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()

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

原生对象原型

String.prototype.startsWith = function (text) {
  return this.indexOf(teext) == 0;
}

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

原型对象问题

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

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

构造函数用于定义实例属性
原型模式用于定义方法和共享的属性

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)
  }
}

动态原型模式

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)
      }
    }
}

寄生构造函数模式

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的对象

function Person() {
  var o = new Object()
  //可以在这里定义私有变量和函数

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

  return o
}

总结自 JavaScript高级程序设计