🔽🔽🔽🔽🔽🔽🔽 old nonsense code 🔽🔽🔽🔽🔽🔽

www.bilibili.com/video/BV1Tr…

⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫ ⏫

Are you afraid to ask me in an interview when I can build a wheel? Build a wheel a day and you’re done.

What to watch for

  • Written test for dachang, interview written questions
  • TDD development
  • With video explanation

Wheel building project

(Plan can not catch up with the change of iteration at any time welcome to leave a message at any time touch fish)

  • Framework based
    • A template engine
    • Anti-shake and throttling
    • Data response
    • Unified State Management
    • Time travel
    • Onion rings Compose
    • Flux model
    • Promise
    • Thunk
    • HTML compiler
    • Pipe line
    • Native Ajax
  • JS based
    • Promise.all/race
    • routing
    • new
    • call/apply/bind
    • Object.create
    • Deep copy, shallow copy
  • Algorithms, design patterns

    • Binary search

    • Fast row

    • Binary search

    • Bubble sort

    • Selection sort

    • Subscribe to the published

    • Fibonacci algorithm

    • duplicate removal

Time travel

Time travel is the ability of an application to travel through its historical state. Think of Undo and Redo in Office and PS. And think about king of Honor’s video feature.

Time travel is really the memo pattern of design patterns. This will evolve when we can practice design patterns, rather than trying to take them by storm.

First of all, Redux did the basic work for time travel. First, all the components submitted their states, and the host had no surplus food. Then, pure function was used to process data, without secret recipe and small material, ensuring the predictability of processing results.

And then all you have to do is find a container we could call a history and a timeline to store the history of state changes. State is divided into three periods:

  • Past (Past state array)
  • Now (only one state)
  • Future (Future state array)
  • The gotoState function is used for time travel, redistributing past, present, and future

demand

1. UNDO

it("Forward undo", () = > {    const history = createHistory()

    history.push({num: 1})
    history.push({num: 2})
 history.push({num: 3})  history.undo()  expect(history.present.num).toBe(2)  }); Copy the code

2. REDO

it("Rewind redo", () = > {    const history = createHistory()

    history.push({num: 1})
    history.push({num: 2})
 history.push({num: 3})  history.push({num: 4})  history.undo()  history.undo()  history.undo()  history.redo()  expect(history.present.num).toBe(2)  }); Copy the code

3. Point drift

it("Fixed point rollback", () = > {    const history = createHistory()

    history.push({num: 1})
    history.push({num: 2})
 history.push({num: 3})  history.gotoState(1)  expect(history.present.num).toBe(2)  }); Copy the code

Function implementation

Super simple and I’m not going to explain it

module.exports = createHistory = (a)= > {
  const timeline = {};

  timeline.past = [];
  timeline.futrue = [];
  timeline.gotoState = (index) = > {  const allState = [...timeline.past, timeline.present, ...timeline.futrue];  timeline.present = allState[index];  timeline.past = allState.slice(0, index);  timeline.futrue = allState.slice(index + 1, allState.length);  };   timeline.getIndex = (a)= > {  // Get the current status index  return timeline.past.length;  };   // Save the current state  timeline.push = (currentState) = > {  // Save all the states and update the current state  if (timeline.present) {  timeline.past.push(timeline.present);  }  timeline.present = currentState;  };   / / back  timeline.undo = (a)= > {  if(timeline.past.length ! = =0) {  timeline.gotoState(timeline.getIndex() - 1);  }  };   / / to go forward  timeline.redo = (a)= > {  if(timeline.futrue.length ! = =0) {  timeline.gotoState(timeline.getIndex() + 1);  }  };   return timeline; };  Copy the code

test


OK task completed

Pay attention to the whole stack of running uncle take you to build wheels every day (weekend off refused 996)

The source address

>>>>>>>>>>>>>>> [source address] <<<<<<<<<<<<<<<<

This article is formatted using MDNICE