polluxlee / blog Goto Github PK

function debounce(func, wait, immediate) {
  var timeId = null;

  return function () {
    
    clearTimeout(timeId);
    // 立即执行
    if (immediate) {
      if (!timeId) func.apply(this, arguments);
      timeId = setTimeout(() => {
        timeId = null;
      }, wait);
    }
    // 停止后执行
    else {
      timeId = setTimeout(() => {
        func.apply(this, arguments);
      }, wait);
    }
  }
}

function throttle(func, wait) {
  var now, previous = 0;

  return function () {
    now = +new Date();
    if (now - previous > wait) {
      func.apply(this, arguments);
      previous = now;
    }
  }
}

var btn = document.getElementById("myBtn");
btn.onclick = function() {
  console.log(this.id);  //  myBtn
}

// 将属性设置为 null 可删除事件处理程序
btn.onclick = null;

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
  console.log(this.id);
}, false);

// removeEventListener 无法移除匿名函数
// 像下面这样才有效
var btn = document.getElementById("myBtn");
var handler = function() {
  console.log(this.id);
}
btn.addEventListener("click",handler , false);

btn.removeEventListener("click", handler, false);  //  有效

var btn = document.getElementById("myBtn");
var handler = function() {
  console.log(this === window); // true
  console.log("Hello World!");
}
btn.attachEvent("onclick",handler , false);

btn.detachEvent("onclick", handler, false);

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(event){
  var targetId = event.target.id;
  switch(targetId) {
    /* 根据不同的 target 做不同的处理 */
  }
}, false);

// xhr 需要将 withCredentials 设置为 true ，浏览器才会发送 cookie
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

// 告知服务器，实际请求将使用什么方法
Access-Control-Request-Method: POST | ...

// 告知服务器，实际请求将携带哪些自定义请求首部字段，服务器据此决定，该实际请求是否被允许
Access-Control-Request-Headers: X-CUSTOM, Content-Type ...

// 允许访问的源
Access-Control-Allow-Origin: http://foo.example

// 允许使用的方法
Access-Control-Allow-Methods: POST, GET, OPTIONS

// 允许使用的自定义头
Access-Control-Allow-Headers: X-CUSTOM, Content-Type

// 表明该响应的有效时间为多少秒。在有效时间内，浏览器无须为同一请求再次发起预检请求
Access-Control-Max-Age: 86400

var img = new Image();
img.onload = img.onerror = function() {
  alert("Done!");
};
img.src = "http://www.example.com/test?name=polluxlee"

function handleResponse(res) {
  console.log(res)
}

var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

otherWindow.postMessage(message, targetOrigin, [transfer]);

var array = [1, 2, 1, 1, '1'];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}

console.log(unique(array)); // [1, 2, "1"]

var array = [1, 2, 1, 1, '1'];

function unique(array) {
   return Array.from(new Set(array));
}

console.log(unique(array)); // [1, 2, "1"]

var x = 1;                 // 声明 + 初始化 x
console.log(x + " " + y);  // '1 undefined'
var y = 2;                 // 声明 + 初始化 y

//上面的代码和下面的代码是一样的 
var x = 1;                 // 声明 + 初始化 x
var y;                     //声明 y
console.log(x + " " + y);  //y 是未定义的
y = 2;                     // 初始化  y 

var foo = 3;
function bar() {
    var foo = foo || 5;
    console.log(foo); // 5
}
bar();

// 相当于
var foo = 3;
function bar() {
    var foo;
    foo = foo || 5;
    console.log(foo);  // 5
}
bar();

console.log(square(5));  //  25
/* ... */
function square(n) { return n*n }

function bar() {
    foo(); // 2
    var foo = function() {
        console.log(1);
    };
    foo(); // 1
    function foo() {
        console.log(2);
    }
    foo(); // 1
}
bar();

//  相当于
function bar() {
    var foo;
    function foo() {
        console.log(2);
    }
    foo(); // 2
    foo = function() {
        console.log(1);
    };
    foo(); // 1
    foo(); // 1
}
bar();

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

f1();

function f1() {
  const MAX = 6;
  if (true) {
    const MAX = 10;
  }
  console.log(MAX); // 6
}

f1();

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError: foo is not defined
  var bar = 1;
  let foo = 2;
}

function test(){
   var foo = 33;
   if (true) {
      let foo = (foo + 55); // ReferenceError
   }
}
test();

<cookie-name>=<cookie-value>  //  cookie name
Expires=<date>   //  设置过期时间，若不设置，则浏览器关闭后就失效
Max-Age=<non-zero-digit>  //  优先级比 Expires，表示，在 cookie 失效之前需要经过的秒数
Domain=<domain-value> //  cookie 可以送达的主机名，若没指定，则表示当前文档访问地址中的主机部分（但是不包含子域名）
Path=<path-value>  //  指定一个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部
Secure  //  只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器
HttpOnly //  设置了 HttpOnly 属性的 cookie ，不能使用 JavaScript 经由  Document.cookie 属性、XMLHttpRequest 和  Request APIs 进行访问，以防范跨站脚本攻击（XSS）

document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/";

window.addEventListener('storage', function(e) {  
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = e.storageArea;
});

// 构造函数
function func(name, age) {
  this.name = name;
  this.age = age;
}

func.prototype.showAge = function () {
  console.log(this.age);
}

// 测试一下
var obj = new func("April", 21);
console.log(obj.name);  //  April
obj.showAge();  //  21

function objectFactory(func) {
  var obj = {};
  if (typeof func !== "function") return obj;
  var ret = func.apply(obj, [].slice.call(arguments, 1));

  // 考虑构造函数有返回值的情况
  // 当返回的是引用类型的时候，会覆盖 new 创建的对象
  if (typeof ret === "function" || typeof ret === "object") {
    return ret;
  }
  obj.__proto__ = func.prototype;
  return obj;
}

function func(name, age) {
  this.name = name;
  this.age = age;
}

func.prototype.showAge = function () {
  console.log(this.age);
}

// 测试一下
var obj = objectFactory(func, "April", 21);
console.log(obj.name);  //  April
obj.showAge();  //  21

var a = {
  name: 'a',
  say: function() {
    console.log(this.name)
  }
}
var name = 'global'

a.say();  // a
(a.say = a.say)();  // global
(false || a.say)();  // global
(a.say)(); // a

//将this绑定到一个对象上
function Cat() {
  this.name = 'kitty';
}

let cat = new Cat();
console.log(cat.name);  // kitty

function Cat() {
  this.name = 'kitty';
  return {
    name: 'kitten'
  }
}

let cat = new Cat();
console.log(cat.name);  // kitten

var name = "PolluxLee";
var a = {   
    name : "AymaxLi"
};
function foo(arg) {
    console.log(this.name + arg);
}
foo.apply(a, [" is coding."]);
foo.call(a, " is coding.");
var foo1 = foo.bind(a, " is coding.");
foo1();

var obj = {
    birth: 1996,
    getAge: function () {
        var b = this.birth; // 1996
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 21

export var m = 1
export function f() {}

/*--------------div--------------*/

// or
var m = 1
export {m}
function f() {}
export {f}

/*--------------div--------------*/

var a = 1
var b = 2
export {a, b}

var m = 1
export {m as n}

export default function foo() {
  console.log('foo');
}

// or
function foo() {
  console.log('foo');
}
export default foo;

/*--------------div--------------*/

// right
var a = 1;
export default a;

// wrong
export default var a = 1;

// a.js
var str = 'hello'
export default str

// b.js
// import 命令可以为 default 变量指定任意名字
import hello from './a'
console.log(hello)

// a.js
var m = 1
var n = 2
export {m, n}
function f() { console.log('hello') }
export {f}

// b.js
import {m, n as num, f} from './a'
console.log(m, num)
f()

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
}

// main.js
var mod = require('./lib');

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

// lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

var obj = {
  name: "Kitty",
  age: 22
}

var obj1 = new Object()
obj1.name = "Kitty";
obj1.age = 22

function createCat(name, sex) {
  var o  = new Object();
  o.name = name;
  o.sex = sex;
  o.sayName = function() {
    console.log(this.name);
  }
  return o;
}

var cat1 = createCat("Tom", "b");
var cat2 = createCat("kate", "g");

function Cat(name, sex) {
  this.name = name;
  this.sex = sex;
  this.sayName = function() {
    console.log(this.name);
  }
}

// new 关键字将 this 指针绑定到对象实例
var cat1 = new Cat("Tom", "b");
var cat2 = new Cat("kate", "g");

// 直接调用构造函数，this 就指向 global，一般情况是 window 对象
Cat("kitty", "g");

function Cat() {}
Cat.prototype.name = "Tom";
Cat.prototype.sayName = function() {
  alert(this.name);
}
var cat1 = new Cat();
cat1.sayName();  //  "Tom"
var cat2 = new Cat();
cat2.sayName();  //  "Tom"
cat1.sayName === cat2.sayName  //  "true"

function Cat(name) {
  this.name = name
}
Cat.prototype.sayName = function() {
  console.log("My name is " + this.name)
}

var cat1 = new Cat("Tom");
cat1.sayName();  //  "My name is Tom"
var cat2 = new Cat("Kate");
cat2.sayName();  //  "My name is Kate"

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  if (typeof this.sayName !== "function") {
    Person.prototype.sayName = function() {
      console.log(this.name);
    };
  }
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

function Person(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function() {
    console.log(this.name)
  }
  return o;
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

function Person(name, age, job) {
  var o = new Object();
  o.sayName = function() {
    console.log(name);
  }
  return o;
}

var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName();  //  "Nicholas"

//定义类
class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

function SuperType() {
  this.property = true;
}

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

function SubType() {
  this.subproperty = false;
}

// 通过 new 关键字
//   1）继承了实例属性
//   2）使得 SubType.prototype.__proto__ === SuperType.prototype，即继承了原型属性和方法
// 即 SuperType 是 SubType.prototype 的构造函数，SuperType.prototype 是 SubType.prototype 的原型
// 而 SubType.prototype 就是 SuperType 的实例了
SubType.prototype = new SuperType();

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

// instance 的 constructor 指向 SuperType，因为 SubType 的 prototype 被重写了
var instance = new SubType();
console.log(instance.getSubValue())  //  false
console.log(instance.getSuperValue());  //  true

function SuperType() {
  this.colors = ["red", "blue", "green"];
}

function SubType() {
}

SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);   // ["red", "blue", "green", "black"]

var instance2 = new SubType();
console.log(instance2.colors);  // ["red", "blue", "green", "black"];

function SuperType() {
  this.colors = ["red", "blue", "green"];
}

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

var ins1 = new SubType();
ins1.colors.push("black");
console.log(ins1.colors);  // ["red", "blue", "green", "black"]

var ins2 = new SubType();
console.log(ins2.colors);  // ["red", "blue", "green"]

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

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

function SubType(name, age) {
  // 继承属性
  SuperType.call(this, name);
  this.age = age;
}

// 继承方法
SubType.prototype = new SuperType();

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

var ins1 = new SubType("Nicholas", 29); // ["red", "blue", "green", "black"]
ins1.colors.push("black"); // Nicholas
console.log(ins1.colors); // 29
ins1.sayName();
ins1.sayAge();

var ins2 = new SubType("Greg", 27); // ["red", "blue", "green"]
console.log(ins2.colors); // Greg
ins2.sayName(); // 27
ins2.sayAge();

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

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"];
}

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

console.log(person.friends);  // ["Shelby", "Court", "Van", "Rob", "Barbie"]

function createAnother(original) {
  function F() {};
  F.prototype = o;
  var clone = new F();  //  创建一个新对象
  clone.sayHi = function() {  //  以某种方式增强这个对象
    console.log("hi");
  }
  return clone;  //  返回这个对象
}

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

function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype);  // 以 superType.prototype 为原型创建对象
  prototype.constructor = subType;  // 增强对象
  subType.prototype = prototype;  // 指定对象
}

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

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

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

inheritPrototype(SubType, SuperType);

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

// 创建超类型原型的对象副本
function object(o) {
  function F() { };
  F.prototype = o;
  return new F();
}

const inheritPrototype = (function () {
  let createObject = Object.create || object;
  return function (Son, Father) {
    let prototype = createObject(Father.prototype);
    prototype.constructor = Son;
    Son.prototype = prototype;
  }
})()

function Father(name) {
  this.name = name;
}

Father.prototype.showName = function () {
  console.log(this.name);
}

function Son(name, age) {
  Father.call(this, name);
  this.age = age;
}

inheritPrototype(Son, Father);
Son.prototype.showAge = function () {
  console.log(this.age)
}

let ins = new Son("kitty", 21);
console.log("实例属性", ins.name, ins.age);
ins.showName();
ins.showAge();

class A {}
class B extends A {
  constructor() {
    super();
  }
}

B.__proto__ === A  //  true

B.prototype.__proto__ === A.prototype  //  true

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

class A {
  constructor() {
    this.x = 1;
  }
  print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}

let b = new B();
b.m() // 2

class A {
  constructor() {
    this.x = 1;
  }
  static print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  static m() {
    super.print();
  }
}

B.x = 3;
B.m() // 3

var person = {};
Object.defineProperty(person, "name", {
  writable: false,
  value: "Nicholas"
});
console.log(person.name);  //  Nicholas
person.name = "Greg";
console.log(person.name);  //  Nicholas

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

var reg = /a/;
Object.getPrototypeOf(reg) === RegExp.prototype; // true

//不可枚举属性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  } 
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// 输出
// obj.color = red
// obj.a = 1
// obj.b = 2
// obj.c = 3

//不可枚举属性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(my_obj.hasOwnProperty('getFoo')); // true

function Foo() {}
function Bar() {}
function Baz() {}

Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);

var baz = new Baz();

console.log(Baz.prototype.isPrototypeOf(baz)); // true
console.log(Bar.prototype.isPrototypeOf(baz)); // true
console.log(Foo.prototype.isPrototypeOf(baz)); // true
console.log(Object.prototype.isPrototypeOf(baz)); // true

let promise = new Promise((resolve, reject) => {
  let ok = true
  if (ok) resolve('yes')
  else reject('no')
})
promise.then(data => console.log(data))
  .catch(err => console.log(data))

Promise.resolve()
  .then(_ => new Promise(resolve => resolve('Hi')))
  .then(data => console.log(data))

Promise.resolve('Hello')
  .then(data => data)
  .then(data => console.log(data))

//等价于
Promise.resolve('Hello')
  .then(data => Promise.resolve(data))
  .then(data => console.log(data))


//使用 await 关键字直接获取到返回的同步值
let a = await Promise.resolve(1)
  .then(data => data)
console.log(a)

//bad
new Promise((resolve, reject) => { resolve() })
.then(data => { throw new Error('Something wrong!') }, err => { console.log(err) })
//Uncaught (in promise) Error: Something wrong!
//  at Promise.then.data

// good
new Promise((resolve, reject) => { resolve() })
.then(data => { throw new Error('Something wrong!') })
.catch(err => { console.log(err) });
//Error: Something wrong!
//  at Promise.then.data

// good
new Promise((resolve, reject) => { throw new Error('reject') })
.then(data => { throw new Error('Something wrong!') })
.catch(err => { console.log(err) });
//Error: reject
//  at Promise (<anonymous>:1:42)
//  at new Promise (<anonymous>)
//  at <anonymous>:1:1

Promise.resolve()
  .then(_ => {
    setTimeout(() => {
      throw new Error('the err can not catch');
    }, 1000);
  })
  .catch(err => console.log(err))

// Uncaught Error: the err can not catch
//    at setTimeout (<anonymous>:4:13)

let images = [
  'http://os5w1n6kc.bkt.clouddn.com/01.jpg',
  'http://os5w1n6kc.bkt.clouddn.com/11.jpg',
  'http://os5w1n6kc.bkt.clouddn.com/10.jpg',
]

let load = src => {
  return new Promise((resolve, reject) => {
    let image = new Image()
    image.onload = _ => {
      //为了测试看效果而加的同步阻塞
      let sum = 0
      for(let i=0; i<9999999; i++) { sum ++ }
      console.log('finish', src)
      return resolve({ src })
    }
    image.onerror = err => {
      console.log('error', src, err)
      return resolve({ src, err })
    }
    image.src = src
  })
}

let loadImages = images => {
  images.reduce(
    (promise, src) => {
      return promise.then(() => load(src))
    }, 
    Promise.resolve()
  ).then(() => {})
  .catch(err => console.log(err))
}

loadImages(images)

Promise.resolve()
  .then(() => load(images[0]))
  .then(() => load(images[1]))
  .then(() => load(images[2]))
  .then(() => {})
  .catch(err => console.log(err))

const promises = [1, 2, 3].map(function(el) {
  return new Promise(resolve => {
    //为了测试看效果而加的同步阻塞
    let sum = 0
    for(let i=0; i<9999999; i++) { sum ++ }
    return resolve(el)
  })
});

Promise.all(promises)
  .then(data => {
    // data = [1,2,3]
    console.log(data)
  })
  .catch(err => console.log(err))

console.log('script start');

setTimeout(_ => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(_ => {
  console.log('promise1');
}).then(_ => {
  console.log('promise2');
});

console.log('script end');

console.log('start')

new Promise(resolve => {
  console.log('promise1')

  setTimeout(_ => {
    console.log('setTimeout')
    resolve('I promise u')
    console.log('promise2')
  }, 3000)

  console.log('promise3')
}).then(data => console.log(data))

console.log('end')

(_ => {
  const f = async _ => {
    console.log('async')

    await new Promise(resolve => {
      console.log('await1')
      resolve('hello')
    }).then(data => console.log(data))

    console.log('await2')
    return 'haha'
  }

  console.log('start')

  setTimeout(_ => {
    console.log('setTimeout')
  }, 0)

  f().then(data => console.log(data))

  console.log('end')
})()

(_ => {
  const f = async _ => {
    console.log('async')

    await new Promise(resolve => {
      console.log('await1')
      setTimeout(_ => { 
        console.log('setTimeout1')
        resolve('hello') 
      }, 0)
    }).then(data => console.log(data))

    console.log('await2')
    return 'haha'
  }

  console.log('start')

  setTimeout(_ => {
    console.log('setTimeout2')
  }, 0)

  f().then(data => console.log(data))

  console.log('end')
})()

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}

async function async2() {
  console.log('async2')
}

console.log('script start')

setTimeout(function () {
  console.log('setTimeout')
}, 0)

async1();

new Promise(function (resolve) {
  console.log('promise1')
  resolve();
}).then(function () {
  console.log('promise2')
})

console.log('script end')

var alist = document.getElementById("list");
var ali = alist.getElementsByTagName("li");
for (var i = 0; i < ali.length-1; i++) {
  fnl(ali[i]);
}

function fnl(aliItem) {
  var aBtn = aliItem.getElementsByTagName("input");
  var astrong = aliItem.getElementsByTagName("strong")[0];
  var aem = aliItem.getElementsByTagName("em")[0];     //em里面放的是单价
  var span = aliItem.getElementsByTagName("span")[0];  //span是总价
  var num = Number(astrong.innerHTML);
  var price = parseFloat(aem.innerHTML);           //将单价字符串变成浮点数
  /*......*/
}