Enhanfe

function debounce(fn, wait) {
  let timeout = null; // 存放定时器返回值
  return function() {
    clearTimeout(timeout); // 每当用户输入时将前一个定时器清除掉
    timeout = setTimeout(() => {
      // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
      fn.apply(this, arguments);
    }, wait);
  };
}

function debounce(func, wait, immediate) {
  var timeout, result;

  return function() {
    var context = this;
    var args = arguments;

    if (timeout) clearTimeout(timeout);
    if (immediate) {
      // 如果已经执行过，不再执行
      var callNow = !timeout;
      timeout = setTimeout(function() {
        timeout = null;
      }, wait);
      if (callNow) result = func.apply(context, args);
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args);
      }, wait);
    }
    return result;
  };
}

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

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

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

  return function() {
    context = this;
    args = arguments;
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}

function throttle(func, wait, options) {
  var timeout, context, args, result;
  var previous = 0;
  if (!options) options = {};

  var later = function() {
    previous = options.leading === false ? 0 : new Date().getTime();
    timeout = null;
    func.apply(context, args);
    if (!timeout) context = args = null;
  };

  var throttled = function() {
    var now = new Date().getTime();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
  };
  return throttled;
}

throttled.cancel = function() {
  clearTimeout(timeout);
  previous = 0;
  timeout = null;
};

Graph.prototype.dfs = function() {
  var marked = [];
  for (var i = 0; i < this.vertices.length; i++) {
    if (!marked[this.vertices[i]]) {
      dfsVisit(this.vertices[i]);
    }
  }

  function dfsVisit(u) {
    let edges = this.edges;
    marked[u] = true;
    console.log(u);
    var neighbors = edges.get(u);
    for (var i = 0; i < neighbors.length; i++) {
      var w = neighbors[i];
      if (!marked[w]) {
        dfsVisit(w);
      }
    }
  }
};

Graph.prototype.bfs = function(v) {
  var queue = [],
    marked = [];
  marked[v] = true;
  queue.push(v); // 添加到队尾
  while (queue.length > 0) {
    var s = queue.shift(); // 从队首移除
    if (this.edges.has(s)) {
      console.log('visited vertex: ', s);
    }
    let neighbors = this.edges.get(s);
    for (let i = 0; i < neighbors.length; i++) {
      var w = neighbors[i];
      if (!marked[w]) {
        marked[w] = true;
        queue.push(w);
      }
    }
  }
};

const p = new People(); // it's ok
function People() {
  this.bar = 1;
}

const m = new Man(); // ReferenceError: Foo is not defined
class Man {
  constructor() {
    this.foo = 1;
  }
}

function People() {
  baz = 1; // it's ok
}
const p = new People();

class Man {
  constructor() {
    fol = 1; // ReferenceError: fol is not defined
  }
}
const m = new Man();

// 引用一个未声明的变量
function People() {
  this.bar = 1;
}
People.say = function() {
  return 1;
};
People.prototype.eat = function() {
  // ...
};
const pKeys = Object.keys(Bar); // ['say']
const pProtoKeys = Object.keys(Bar.prototype); // ['eat']

class Man {
  constructor() {
    this.foo = 1;
  }
  static say() {
    return 1;
  }
  eat() {
    // ...
  }
}
const mKeys = Object.keys(Man); // []
const mProtoKeys = Object.keys(Man.prototype); // []

function People() {
  this.bar = 1;
}
People.prototype.print = function() {
  console.log(this.bar);
};

const p = new People();
const pPrint = new bar.print(); // it's ok

class Man {
  constructor() {
    this.foo = 42;
  }
  print() {
    console.log(this.foo);
  }
}
const m = new Man();
const mPrint = new m.print(); // TypeError: foo.print is not a constructor

function People() {
  this.bar = 1;
}
const p = People(); // it's ok

class Man {
  constructor() {
    this.foo = 1;
  }
}
const m = Man(); // TypeError: Class constructor Foo cannot be invoked without 'new'

function People() {
  People = 'Pap'; // it's ok
  this.bar = 1;
}
const p = new People();
// People: 'Pap'
// bar: People {bar: 1}

class Man {
  constructor() {
    this.foo = 42;
    Man = 'Woman'; // TypeError: Assignment to constant variable
  }
}
const m = new Man();
Man = 'Fol'; // it's ok

console.log('start');
setTimeout(function() {
  console.log('settimeout');
});
console.log('end');
// 输出顺序：start->end->settimeout

console.log('script start');
let promise1 = new Promise(function(resolve) {
  console.log('promise1');
  resolve();
  console.log('promise1 end');
}).then(function() {
  console.log('promise2');
});
setTimeout(function() {
  console.log('settimeout');
});
console.log('script end');
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

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

console.log('script start');
async1();
console.log('script end');

// 输出顺序：script start->async1 start->async2->script end->async1 end

async function asyncTest() {
  const ret = await asyncFunction();
}

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {
    var info = gen[key](arg);
    var value = info.value;
  } catch (error) {
    reject(error);
    return;
  }
  if (info.done) {
    resolve(value);
  } else {
    Promise.resolve(value).then(_next, _throw);
  }
}

function _asyncToGenerator(fn) {
  return function() {
    var self = this,
      args = arguments;
    return new Promise(function(resolve, reject) {
      var gen = fn.apply(self, args);
      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'next', value);
      }
      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'throw', err);
      }
      _next(undefined);
    });
  };
}

function asyncTest() {
  return _asyncTest.apply(this, arguments);
}

function _asyncTest() {
  _asyncTest = _asyncToGenerator(function*() {
    const ret = yield asyncFunction();
  });
  return _asyncTest.apply(this, arguments);
}

LazyMan('Tony');
// Hi I am Tony

LazyMan('Tony')
  .sleep(10)
  .eat('lunch');
// Hi I am Tony
// 等待了10秒...
// I am eating lunch

LazyMan('Tony')
  .eat('lunch')
  .sleep(10)
  .eat('dinner');
// Hi I am Tony
// I am eating lunch
// 等待了10秒...
// I am eating diner

LazyMan('Tony')
  .eat('lunch')
  .eat('dinner')
  .sleepFirst(5)
  .sleep(10)
  .eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food

class LazyManClass {
  constructor(name) {
    this.name = name;
    this.queue = [];
    console.log(`Hi I am ${name}`);
    setTimeout(() => {
      this.next();
    }, 0);
  }

  sleepFirst(time) {
    const fn = () => {
      setTimeout(() => {
        console.log(`等待了${time}秒...`);
        this.next();
      }, time);
    };
    this.queue.unshift(fn);
    return this;
  }

  sleep(time) {
    const fn = () => {
      setTimeout(() => {
        console.log(`等待了${time}秒...`);
        this.next();
      }, time);
    };
    this.queue.push(fn);
    return this;
  }

  eat(food) {
    const fn = () => {
      console.log(`I am eating ${food}`);
      this.next();
    };
    this.queue.push(fn);
    return this;
  }

  next() {
    const fn = this.queue.shift();
    fn && fn();
  }
}

function LazyMan(name) {
  return new LazyManClass(name);
}

add(1); 	// 1
add(1)(2);  	// 3
add(1)(2)(3)；  // 6
add(1)(2, 3);   // 6
add(1, 2)(3);   // 6
add(1, 2, 3);   // 6

const currying = (
  fn, // 1
) =>
  (judge = (
    ...args // 2
  ) =>
    args.length >= fn.length // 3
      ? fn(...args) // 4
      : (...arg) => judge(...args, ...arg)); // 5

Number.prototype.add = function(n) {
  return this.valueOf() + n;
};
Number.prototype.minus = function(n) {
  return this.valueOf() - n;
};

div.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.parent {
  position: relative;
}
div.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 或者 */
div.child {
  width: 50px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -5px;
}
/* 或 */
div.child {
  width: 50px;
  height: 10px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

div.parent {
  display: grid;
}
div.child {
  justify-self: center;
  align-self: center;
}

div.parent {
  font-size: 0;
  text-align: center;
  &::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
}
div.child {
  display: inline-block;
  vertical-align: middle;
}

div.parent {
  display: table;
}
div.child {
  display: table-cell
  vertical-align: middle;
  text-align: center;
}

currentState = currentReducer(currentState, action)

<img src="1.jpg" style="width:480px!important;”>

max-width: 300px;

transform: scale(0.625, 0.625);

box-sizing: border-box;
padding: 0 90px;

width: 300px !important;

for (var i = 0; i < 10; i++) {
  setTimeout(
    i => {
      console.log(i);
    },
    1000,
    i,
  );
}

for (var i = 0; i < 10; i++) {
  setTimeout(
    i => {
      console.log(i);
    },
    1000,
    i,
  );
}

for (var i = 0; i < 10; i++) {
  setTimeout(console.log, 1000, i);
}

for (var i = 0; i < 10; i++) {
  setTimeout(console.log.bind(null, i), 1000);
}

for (let i = 0; i < 10; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

for (var i = 0; i < 10; i++) {
  (i => {
    setTimeout(() => {
      console.log(i);
    }, 1000);
  })(i);
}

for (var i = 0; i < 10; i++) {
  setTimeout(new Function('console.log(i)')(), 1000);
}

node_modules
-- foo
---- lodash@version1

node_modules
-- foo

-- bar

-- lodash（保留的版本为兼容版本）

node_modules
-- foo
-- lodash@version1

-- bar
---- lodash@version2

var worker = new Worker('work.js');

worker.postMessage('calculate');
worker.postMessage({ method: 'echo', args: ['Work'] });

worker.onmessage = function(event) {
  console.log('Received' + event.data);
  // doSomething...
};

worker.terminate();

self.addEventListener(
  'message',
  function(e) {
    self.postMessage('You said: ' + e.data);
  },
  false,
);
// 或者
this.addEventListener(
  'message',
  function(e) {
    self.postMessage('You said: ' + e.data);
  },
  false,
);
// 或者
addEventListener(
  'message',
  function(e) {
    self.postMessage('You said: ' + e.data);
  },
  false,
);

self.close();

importScripts('script1.js');

worker.addEventListener('error', function(event) {
  // ...
});

Function.prototype.bind2 = function(context) {
  if (typeof this !== 'function') {
    throw new Error(
      'Function.prototype.bind - what is trying to be bound is not callable',
    );
  }

  const self = this;
  const args = Array.prototype.slice.call(arguments, 1);
  const fNOP = function() {};

  const fbound = function() {
    self.apply(
      this instanceof self ? this : context,
      args.concat(Array.prototype.slice.call(arguments)),
    );
  };

  fNOP.prototype = this.prototype;
  fbound.prototype = new fNOP();

  return fbound;
};

Function.prototype.apply2 = function(context, arr) {
  var context = Object(context) || window;
  context.fn = this;

  var result;
  if (!arr) {
    result = context.fn();
  } else {
    var args = [];
    for (var i = 0, len = arr.length; i < len; i++) {
      args.push('arr[' + i + ']');
    }
    result = eval('context.fn(' + args + ')');
  }

  delete context.fn;
  return result;
};

// A JavaScript class.
class MyExampleWebpackPlugin {
  // Define `apply` as its prototype method which is supplied with compiler as its argument
  apply(compiler) {
    // Specify the event hook to attach to
    compiler.hooks.emit.tapAsync(
      'MyExampleWebpackPlugin',
      (compilation, callback) => {
        console.log('This is an example plugin!');
        console.log(
          'Here’s the `compilation` object which represents a single build of assets:',
          compilation,
        );

        // Manipulate the build using the plugin API provided by webpack
        compilation.addModule(/* ... */);

        callback();
      },
    );
  }
}

class HelloWorldPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('Hello World Plugin', (
      stats /* stats is passed as an argument when done hook is tapped.  */,
    ) => {
      console.log('Hello World!');
    });
  }
}

module.exports = HelloWorldPlugin;

// webpack.config.js
var HelloWorldPlugin = require('hello-world');

module.exports = {
  // ... configuration settings here ...
  plugins: [new HelloWorldPlugin({ options: true })],
};

class FileListPlugin {
  apply(compiler) {
    // emit is asynchronous hook, tapping into it using tapAsync, you can use tapPromise/tap(synchronous) as well
    compiler.hooks.emit.tapAsync('FileListPlugin', (compilation, callback) => {
      // Create a header string for the generated file:
      var filelist = 'In this build:\n\n';

      // Loop through all compiled assets,
      // adding a new line item for each filename.
      for (var filename in compilation.assets) {
        filelist += '- ' + filename + '\n';
      }

      // Insert this list into the webpack build as a new file asset:
      compilation.assets['filelist.md'] = {
        source: function() {
          return filelist;
        },
        size: function() {
          return filelist.length;
        },
      };

      callback();
    });
  }
}

module.exports = FileListPlugin;

// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: {
          loader: path.resolve(__dirname, './txt-loader.js'),
          options: {
            name: 'YOLO',
          },
        },
      },
    ],
  },
};

// txt-loader.js
var utils = require('loader-utils');

module.exports = function(source) {
  const options = utils.getOptions(this);

  source = source.replace(/\[name\]/g, options.name);
  return `export default ${JSON.stringify({
    content: source,
    filename: this.resourcePath,
  })}`;
};

const an = ['Hello', 'An'];
an.toString(); // "Hello,An"
Object.prototype.toString.call(an); // "[object Array]"

Object.prototype.toString.call('An'); // "[object String]"
Object.prototype.toString.call(1); // "[object Number]"
Object.prototype.toString.call(Symbol(1)); // "[object Symbol]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(function() {}); // "[object Function]"
Object.prototype.toString.call({ name: 'An' }); // "[object Object]"

[] instanceof Array; // true

[] instanceof Object; // true

var b = {
  a: function() {
    console.log(this);
  },
};
b.a();
// this is b

b.a.call(this); // this is window

function B() {
  (this.a = function() {
    console.log(this.b);
  }),
    (this.b = 1);
}
let b = new B();
b.a();
// this is b object;

var a = 1;
this.a;

![1, 2, 3].includes(+a);

!['1', '2', '3'].includes(a + '');

!{ 1: true, 2: true, 3: true }[a];

const obj = { name: 'walker', age: 10 };
function test() {
  const { name, age } = obj;
  console.log(name);
  console.log(age);
}

useEffect(() => {
  const requestAnimationFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame;
  const cancelAnimationFrame =
    window.cancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.mozCancelAnimationFrame;

  const scrollNode = noticeContentEl.current;
  const distance = scrollNode.clientWidth / 2;

  scrollNode.style.left = scrollNode.style.left || 0;
  window.__offset = window.__offset || 0;

  let requestId = null;
  const scrollLeft = () => {
    const speed = 0.5;
    window.__offset = window.__offset + speed;
    scrollNode.style.left = -window.__offset + 'px';
    // 关键行：当距离小于偏移量时，重置偏移量
    if (distance <= window.__offset) window.__offset = 0;
    requestId = requestAnimationFrame(scrollLeft);
  };
  requestId = requestAnimationFrame(scrollLeft);

  if (pause) cancelAnimationFrame(requestId);
  return () => cancelAnimationFrame(requestId);
}, [notice, pause]);

if (_this.props.onClick) _this.props.onClick(event);

if (
  !event.defaultPrevented && // onClick prevented default
  event.button === 0 && // ignore everything but left clicks
  !_this.props.target && // let browser handle "target=_blank" etc.
  !isModifiedEvent(event) // ignore clicks with modifier keys
) {
  event.preventDefault();

  var history = _this.context.router.history;
  var _this$props = _this.props,
    replace = _this$props.replace,
    to = _this$props.to;

  if (replace) {
    history.replace(to);
  } else {
    history.push(to);
  }
}