Talking about several programming styles of function functions in JavaScript programming process

Author source: https://ost.51cto.com/user/posts/16066420

statement

Functions in JavaScript programming are a very interesting point. JavaScript functions are very different from other languages ​​such as C and Java. For students who transfer from other programming languages, there may be certain "pitfalls", such as the difference between function function and => function. The occupancy of the function function this keyword, etc.

This knowledge may be used in the following cases, but I will not discuss these grammars due to space limitations, only discussing the style issues of different encoding methods.

Test environment statement

Test tool: DevEco Studio 3.1.1 Release Build version: 3.1.0.501
Test platform: HarmonyOS Api9 x86 virtual machine
Test language: ArkTS (only test JavaScript grammar part)

Introduction

Because of the flexibility of the JavaScript programming style. A simple sum function can be expressed in many different styles in JavaScript.
The editor will express it in many different ways such as functional programming, object-oriented programming, object-oriented chain programming, and declarative programming.
The following code is only for the effect of throwing a brick and attracting jade, and does not represent the actual development code, nor does it represent all the current coding styles. I only talk about a few that I know. In the actual development process, each coding style will also have more subdivided styles.

procedural programming

the code

// 过程式编程
function add(...is: number[]) {
  // 总和
  let sum = 0;
  // 求和
  for (let index = 0; index < is.length; index++) 
    sum += is[index];
  // 返回总和
  return sum;
}

/**
 * 使用样例
 * console.log(add(11, 22, 33));
 */

interpret

Procedural programming is the simplest, crude and direct programming method, and procedural programming is supported in all mainstream programming languages.

Procedural programming often requires programmers to have excellent programming literacy and a deep understanding of the business to ensure the continuous maintainability and scalability of the code.

It is not recommended to use this coding style in parts where the business is uncertain, the implementation logic changes frequently, and the implementation solution is unstable, because it can easily cause the code to get out of control.

However, in terms of algorithm implementation, the author strongly recommends that you use this coding style. It's simple, reliable, and saves a lot of brains on the programmer.

curried programming

the code

// 自动柯里化机，可以自动把函数转化为柯里化风格。
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function (...nextArgs) {
        return curried.apply(this, args.concat(nextArgs));
      }
    }
  }
}
// 获得转化后的函数
export const curriedAdd = curry(add2);

/**
 * 使用样例
 * console.log(curriedAdd(1)(2)); // 3
 * console.log(curriedAdd(1, 2)); // 3
 * console.log(curriedAdd(1)(2, 3)); // 3
 */

interpret

A distinctive feature of curried programming is the continuous nesting of functions, which is a very popular programming method for front-end development. However, the editor strongly opposes this programming method for the following reasons:

• Although curry programming does improve the flexibility of development, it also reduces the modifiability of functions, which may affect the whole body in subsequent refactorings.
• A great feature of currying is function nesting, which does not conform to the "never nester" programming philosophy. Nesting can drastically reduce readability.

If you really intend to use the curried programming style. The editor recommends that you write a full comment! ! !
I keep writing until I don’t need to read your function to know what your function wants to do, how many parameters it has, what it wants to return, and under what circumstances it will end currying. .

Object-Oriented Programming Style Functions

the code

// 面向对象风格函数
export function count() {
  // 总和属性
  this._sum = 0;
  // 添加方法方法
  this.add = (i) => this._sum += i;
  // 返回总和方法
  this.get = () => this._sum;
  // 返回构造对象
  return this;
}
/*
// 使用样例
* a = count();
* console.log(a.add(10));
* console.log(a.add(20));
* a.add(30);
* console.log(a.get());
*/

interpret

Compared with the chain programming mentioned below, a more orthodox object-oriented style. The result of each operation is clear and the type is clear. With the help of modern programming tools, the programming efficiency is very high.

Object-oriented style function, chain programming

the code

//面向对象链式编程风格
// 构造函数
export function count2() {
  // 总和属性
  this._sum = 0;
  // 添加方法
  this.add = (is) => ((this._sum += is), this);
  // 求和方法
  this.get = () => this._sum
  // 返回构造对象
  return this;
}
/*使用样例
console.log(count().add(10).add(20).add(30).get());
*/

interpret

The reason why I separate it from object-oriented is because object-oriented chain style programming can basically replace curry programming.

Compared with currying, this programming style is flatter, more readable, and has certain scalability.

So, why use currying when you can choose it?

Declarative style functions

the code

// 声明式风格函数
export function sum3(is, get) {
  let ans = 0;
  // 这里可以使用任何实现方式，可以使用异步等方式实现
  is.forEach(element => {
    ans += element;
  });
  // 无论用任何方式实现，最后所有运算结束后都使用get函数作为回调。
  get(ans)
}

interpret

The characteristic of a declarative style function is not what its code looks like, but what parameters it provides for developers to call. Developers no longer care about the order of implementation, how to implement, because how to implement is not important at all, and the order of implementation is not important. All you want are answers, and getting answers. The implementation can be implemented in any way, and it can be implemented internally by using multi-threaded, asynchronous, or other methods.

Summarize

The evolution of modern coding styles is nothing more than a change in focus as the problems that need to be dealt with change. To change the attention of developers, let developers put more energy on their own business. It's not that the more advanced the coding style is, the easier it is to use. The most important thing is to choose the right coding style in the right place.

Related extension - low code development

Low-code development is a trend that has received much attention in the web development field in recent years. Low-code development refers to developing applications or business logic using minimal programming codes, which allows even beginners with no IT or programming experience to quickly create the required functionality.

While low-code development has not yet threatened the role of traditional developers, there is no denying that the trend is moving towards low-code (or no-code) development. According to the forecast of the American research company Gartner, by 2024, about 65% of application development projects will be developed through low-code platforms. This trend cannot be ignored for developers, and it is expected that the way developers work will gradually change in the next few years.

In the past few years, I have vaguely encountered low-code, and it is relatively popular at present, and many major manufacturers have joined in one after another.

What is low-code, in my opinion, is dragging, whirring, and one-pass operation to create a system that can run, front-end, back-end, and database, all in one go. Of course this may be the end goal.

Link: www.jnpfsoft.com/?csdn , if you are interested, also experience it.

The advantage of JNPF is that it can generate front-end and back-end codes, which provides great flexibility and can create more complex and customized applications. Its architectural design also allows developers to focus on the development of application logic and user experience without worrying about the underlying technical details.