当前位置：网站首页>Review background management system practice: two packaging styles of request parameters

Review background management system practice: two packaging styles of request parameters

2022-07-22 09:24:00 【InfoQ】

Background

I always want to do a research , How many proportions are there web The work content of front-end workers is

Develop background management system

Mainly .

Although Ben Gua has done small program projects before 、H5 project , But the reality is still based on the development of background management system , It's a true “

Front end of rear pipe er

”. Most of the web Front end workers should be similar , This may be determined by market demand .

So many problems we encounter in the background management system project are also similar , The code is worth it review, This article brings an example （ real ）~

Idle time , Open punch ！！ヾ(◍°∇°◍)ﾉﾞ

as everyone knows , In the background management project , This color table Is the most common ：

This table in , Theme templates have many states , such as ：

draft

state 、

The published

state 、

To audit

Status and so on ;

Click these states to enter into different operation pages , such as ： Draft correspondence

newly build

Operation page , Published corresponding

modify

Operation page , The corresponding to be reviewed

to examine

Operation page, etc .

In different operation pages, it means to request different

Interface

、 Different interfaces mean different requests

Parameters

You'll be surprised new page 、 Modify page 、 Review page In fact, they all look the same ！

Probably in the color shown below （ Because they all list table Most fields of , Different fields have different presentations , Some are read-only 、 Some can be written 、 Some have related items, etc ）：

In the actual project form It will be much more complicated than the screenshot above . For example, in this melon project , Such an operation page , There are dozens of fields , Including view 、 edit 、 State correlation, etc . Only abstract schematic processing is done here .

Based on the above background , We can imagine ： If each operation page is independent , The new page has dozens of table fields 、 The edit page has dozens of table fields 、 The approval page has dozens of table fields …… And most of these fields are similar , There are only different or customized expressions in some fields ,

That certainly won't ： There are several operation pages , Just copy a few pages ？！

In this way, there is no reuse thinking , Whenever you need to add, delete or modify fields , You have to operate in multiple pages , This is a “ Great intelligence ” practice .

So , We need to reuse ！！

（ Reuse ！ Reuse again ！ Writing business code is the best b The key is reuse . High coupling 、 Low cohesion means how to reuse . Design patterns are also for rational reuse ; When writing algorithms , Reuse is also the best b Of , How to reuse question stem conditions 、 Or reuse space in exchange for time, and so on ）

methods 、 Method 、 There are many ways , The single point of reuse mentioned here is ：

Encapsulation and reuse of request parameters .

Code abstraction

We try to abstract the background of the previous section into pseudo code （ It can also be debugged on the console with minor modifications ）：

If you don't do any packaging , It will be something like this ：

//  Set a global table object of the page 
const ruleForm = {
 type:&quot;fe&quot;,
 time:&quot;20200721&quot;,
 title:&quot;day day up&quot;,
 status:&quot;draft&quot;,
 weight:999,
 comment:&quot;great&quot;,
 balabala:&quot; I am redundant parameter 1&quot;,
 bilibilib:&quot; I am redundant parameter 2&quot;
 }

Create a new operation page parameter

const {type,time,.title,status.weight,comment} = ruleForm //  Deconstruct to get value 
const getCreateParam = function(){
 // ... Omit a series of operations 
 return {only: &quot;create&quot;}
}
const createParam = getCreateParam() //  Get special transmission parameters 

const param = {
 //  Public reference 
 type,
 time,
 title,
 status,
 weight,
 comment,
 //  Special biography 
 createParam
}

createRequest(param).then(res=> ... )

Modify operation page parameters

const {type,time,.title,status.weight,comment} = ruleForm
const getEditParam1= function(){
 // ...
 return {only1: &quot;edit1&quot;}
}
const editParam1 = getEditParam1()
const getEditParam2= function(){
 // ...
 return {only2: &quot;edit2&quot;}
}
const editParam2 = getEditParam2()

const param = {
 //  Public reference 
 type,
 time,
 title,
 status,
 weight,
 comment,
 //  Special biography 
 editParam1,
 editParam2
}

editRequest(param).then(res=> ... )

Audit operation page parameters

const {type,time,.title,status.weight,comment} = ruleForm
const getReviewParam1= function(){
 // ...
 return {only1: &quot;review1&quot;}
}
const reviewParam1= getReviewParam1()
const getReviewParam2= function(){
 // ...
 return {only2: &quot;review2&quot;}
}
const reviewParam2= getReviewParam2()
const getReviewParam3= function(){
 // ...
 return {only3: &quot;review3&quot;}
}
const reviewParam3= getReviewParam3()

const param = {
 //  Public reference 
 type,
 time,
 title,
 status,
 weight,
 comment,
 //  Special biography 
 reviewParam1,
 reviewParam2,
 reviewParam3
}

reviewRequest(param).then(res => ...)

Imagine that this parameter is 10 Or 20 individual , even to the extent that 30 A? ？

Variable assignment in actual business code 、 deformation , It will be much more complicated than this ！

1. Object oriented encapsulation

The first one is , We first use object-oriented thinking to encapsulate the above process ：

// Get public parameters

class CommonParam {
 constructor(){
 this.ruleForm = ruleForm
 }
 get(){
 const {type,time,title,status,weight,comment} = this.ruleForm
 return{type,time,title,status,weight,comment}
 }
}

// Get the parameters of the create operation

class CreateParam extends CommonParam {
 getCreateParam(){
 // ... Omit a series of operations 
 return {only: &quot;create&quot;}
 }
 get(){
 const para = super.get()
 return {...para,...this.getCreateParam()}
 }
}

let creatParam = new CreateParam().get()

createRequest(creatParam).then(res=> ... )

// Get the parameters of editing operation

class EditParam extends CommonParam {
 getEditParam1(){
 return {only1: &quot;edit1&quot;}
 }
 getEditParam2(){
 return {only2: &quot;edit2&quot;}
 }
 get(){
 const para = super.get()
 return {...para,...this.getEditParam1(),...this.getEditParam2()}
 }
}

let editParam = new EditParam().get()

editRequest(editParam).then(res=> ... )

// Get the parameters of the audit operation

class ReviewParam extends CommonParam {
 getReviewParam1(){
 return {only1: &quot;review1&quot;}
 }
 getReviewParam2(){
 return {only2: &quot;review2&quot;}
 }
 getReviewParam3(){
 return {only3: &quot;review3&quot;}
 }
 get(){
 const para = super.get()
 return {...para,...this.getReviewParam1(),...this.getReviewParam2(),...this.getReviewParam3()}
 }
}

let reviewParam = new ReviewParam().get()

reviewRequest(reviewParam).then(res=> ... )

A worker asked , Here, inheritance only inherits public parameters , It is necessary to write class Class? ？

Ben Gua thought , If your code is process oriented , It's written here , Somewhat abrupt ; But if a large number of them are encapsulated with classes , It is also necessary to do encapsulation .

Code style is consistent ;

class One more benefit , The code presents a block ,
Declaration and invocation are separate
, This is important ;

Of course, it is also conducive to subsequent expansion 、 reform . Top down procedural code is written too much , It will be difficult to read and debugger.

2. Functional programming encapsulation

The second kind , We use the thinking of functional programming to encapsulate the above process ：

With the help of our old friends , compose Function for function combination ~

Easy version compose The function code is as follows ：

export const compose = function(...fns) {
 return function composed(result) {
 //  Copy an array of stored functions 
 var list = fns.slice()
 while (list.length > 0) {
 //  Take the last function from the end of the list and execute it 
 result = list.pop()(result)
 if (result === 'breakCompose') { // *  Any step  renturn &quot;breakCompose&quot;  You can end the process in advance ;
 break
 }
 }
 return result
 }
}

A worker asked compose How to improve the process break, The above code comes from the actual combat project of this melon , Can achieve ;compose Functions can be modified a lot , Try it yourself ~

Encapsulate the request parameters of this article ：

/****** Function declaration part ******/

/*
*  Common parameters 
*/
const step_getCommonParam = function(ruleForm){
 const {type,time,title,status,weight,comment} = ruleForm
 return{type,time,title,status,weight,comment}
}

/*
*  Create step function 
*/
const step_getCreateParam= function(args){
 // ... Omit a series of operations 
 return {...args,only: &quot;create&quot;}
}
const step_createRequest = function(creatParam){
 return createRequest(creatParam).then(res=> ... )
}

/*
*  Edit step function 
*/
const getEditParam1= function(args){
 // ...
 return {...args,only: &quot;edit1&quot;}
}
const getEditParam2= function(args){
 // ...
 return {...args,only: &quot;edit2&quot;}
}
const step_editRequest = function(editParam){
 return editRequest(editParam).then(res=> ... )
}

/*
*  Audit step function 
*/
const getReviewParam1= function(args){
 return {...args,only1: &quot;review1&quot;}
}
const getReviewParam2= function(args){
 return {...args,only1: &quot;review2&quot;}
}
const getReviewParam3= function(args){
 return {...args,only1: &quot;review3&quot;}
}
const step_reviewRequest = function(reviewParam){
 return reviewRequest(reviewParam).then(res=> ... )
}

/****** Function call part ******/

const handleCreate = (...args) => {//  Create operation 
 const steps = [step_createRequest, step_getCreateParam, step_getCommonParam] //  The steps are read from right to left 
 compose(...steps)(...args)
}

handleCreate(ruleForm)

const handleEdit = (...args) => {//  Edit operation 
 const steps = [step_editRequest, step_getEditParam2,step_getEditParam1, step_getCommonParam]
 compose(...steps)(...args)
}

handleEdit(ruleForm)

const handleReview = (...args) => {//  Audit operation 
 const steps = [step_reviewRequest,step_getReviewParam3,step_getReviewParam2,step_getReviewParam1,step_getCommonParam]
 compose(...steps)(...args)
}

handleReview(ruleForm)

how ？ Familiar taste ？ You can obviously feel the different style ？

Review Summary

This article brings the encapsulation of common interface parameters in the background management system 2 Styles .

The first code , Don't do any design , Make many copies of , From top to bottom 、

Process style

;

Optimize 1： With the help of es6 class,js You can simply write

Object oriented code style

;

Optimize 2： use compose The way of function combination , Realization

Functional programming style

You know the process 、 object-oriented 、 Functional expression , What is the scientific name of this code style ？

answer ： Programming paradigm .

The idea of programming paradigm is not only in the original js It can be used , stay jq Available in , stay vue 、react Framework and so on can be used . Feeling , In fact, some designs of some frameworks are biased towards different styles ,js Is a multi paradigm language ,jq Prefer operational process 、vue No obvious tendency 、 Process type 、 object-oriented 、 Any function is ok 、react A little biased towards functional ……

The above is one of the practical points of this melon project review experience .

Because part of the code in this article is pseudo code , Schematic reference , Or not perfect 、 Please correct .

OK, The above is the sharing of this article . Like, follow the comments , Help good writing
I'm Anthony nuggets 100 Ten thousand popular front-end technology bloggers INFP Writing personality persistence 1000 Japanese Geng Wen Pay attention to me , Anthony spent the long programming years with you

原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211752176372.html