This is the 20th day of my participation in the August More Text Challenge

Is still how to continue to write good JS topics, this article is mainly about [process abstraction] [high order function] and [programming].

preface

“Early review”

How heavy learn front-end | follow the shadow of JavaScript packaging components

Procedural abstraction

  • Methods used to handle local detail control

  • Basic application of functional programming ideas

The sample

If there is a list below, when the task is completed, check it and the task will disappear, with an animation effect when it disappears

Implementation scheme (Counter Example)

Maybe some people will do that

  • So I get the list list

  • Listen for each button click event

  • Add a timer, 2s after the removal is complete

  • Implement a transition animation effect by changing the class

Problems with this version

  • If you click the check box many times in a row, the check box has been removed, followed by an error indicating that the Dom node does not exist

why

  • Multiple clicks will execute multiple setTimeout. When the same DOM is removed once, subsequent remove will not find the DOM

To improve the

  • You should only fire the click event once

extension

  • Some asynchronous interactions
  • A one-time HTTP request
  • Submit a form, or some other task

Should limit the number of operations

Once

To enable the “only once” requirement to cover different event handling, we can separate this requirement out. This process is called process abstraction.

Higher-order functions

  • Take functions as arguments
  • Take a function as the return value
  • Often used as a function decorator

Higher-order functions are commonly used

  • Once
  • You’re Throttle.

Usage scenario: Control the event trigger frequency, such that no matter how fast the button is clicked, the event is executed every 500 milliseconds

  • Debounce (Anti-shock function)

Usage scenarios: call, but it is also used to restrict events is not only a limit on the number of calls, such as user in frequent editing a paragraph of text, this text will automatically save, if the user changes quickly, and we have been submitted, the server pressure is very big, this time we can wait until the user to edit stop again after a few hundred milliseconds commit operation

  • Consumer (asynchronous)
  • Iterative functions are iterative.

Why use higher-order functions?

Functions can be divided into

  • Pure functions
  • Impure functions:

In theory, the more pure functions a project, system, or library has, the better its maintainability. (Storing functions is also convenient for writing unit tests.)

By Jyothsna Patnam

What is a pure function?

A function is pure when its input value is determined and its output value is uniquely determined

Two principles of pure functions

  • This function has no side effects
  • It is idempotent, and when called at any time and in any order, its result is unique and cannot be changed

For example, the following simple function is a pure function. When the parameter is 1,2, the result must be 3

The pure functions

As the example shows, this is not a pure function because it changes the external context

If you call it multiple times, you get different results. If we add a bar function, the results of the left order and the results of the right order will be different

Programming paradigm

Imperative and declarative

Some languages are purely imperative, some are purely declarative, but JavaScript has both

To implement an array element *2 operation, you can use either imperative or declarative, as shown below

The sample

  • Imperative (emphasis is placed on what we are going to do, is How)

  • Declarative (emphasizing What we are going to do, i.e., What, more extensible)

Such as implementing a switch

  • Imperative writing

  • Declarative writing

When there are only two states, there seems to be no difference, but what if the switch has three states: [on] [off] [warning]

The imperative requires an additional if judgment, but the declarative requires only one more argument.

conclusion

This paper may only play a role in the introduction of a brick, each of the above modules are worth a good study.

keywords

  • Process abstraction/HOF/decorator
  • Imperative/declarative

conclusion

I attended the byte youth training camp, so I prepared a re-learning front-end series. Due to the time, I may only be able to learn notes.

Update time: one essay will be published each day in the order of the course

Instructor: Byte front-end/Nuggets development lead – Moon Shadow

If any of the above is wrong, please point out in the comments section!

Xiao Ke love to finish click a “like” before leaving! 😗