One, foreword

Recently, in the process of development and design, I pondered the need of adding new functions to existing functions. In the past, function superposition on existing requirements would add or integrate part of the condition judgment, so there would be a problem that the integration operation would affect the existing functions. In most cases, I will specify the scope of influence in the reference test, and in some cases, the reference test will miss. This is not only bad for the correctness of the online code, but also convenient for the extension and maintenance of the code.

Therefore, in the development and design stage of new requirements, I jumped out of the original thinking pattern and designed the following functions.

The shared code is based on the RECAT framework.

2. Functional analysis

2.1 the UI

2.2 Function Analysis

Among the existing functions, the display types of shoe kanban and hat kanban are completely the same, with only different specific data under different types.

New requirements, the original shoes kanban paid today and paid this month to paid last month and paid last year.

Iii. Development and design

3.1 Previous Thinking

In the past, it was natural to reorganize the list before displaying it, and differentiate the content according to the kanban type.

if (type === 'shoses' && (item.key === 'Paid last month' || item.key === 'Paid last year')) {// Add two items to the shoe kanban
} 
if (type === 'hat' && (item.key === 'Paid today' || item.key === 'Paid this month')) {// Add two entries to the hat kanban
}
Copy the code

If other types of kanban are added later, or other items are added to shoe kanban or other items are added to hat kanban, the conditional statement needs to be added, which is not convenient to maintain and easily affects existing functions.

3.2 Transformation of thinking

For content display, there is only one of the two situations: display and no display, similar to the light on and off, which is controlled by the power switch. Here, display switches of different types under different kanban can also be controlled, which does not affect the original function and is convenient for subsequent expansion.

Fourth, concrete implementation

4.1 Setting Kanban variables

/ * *@name Kanban class object */
const boardObj = {
    1 : {
        key: 'shoes'./ / the only key
        name: 'shoes'.// Kanban displays the title
        class: 1.// The value corresponding to the backend data
    },
    2 : {
        key: 'hat'.name: 'hat'.class: 2,}};Copy the code

4.2 Setting kanban display objects

Contains all items involved in the display, items that need to be distinguished by kanban type, and values for the control switch.

/ * *@name Kanban displays the object */ of a specific item
const boardOption = {
	name: 'kanban'.list: [{
		key: 'allPay'./ / the only key
		name: 'All due'.// Display the name
		selfStyle: {
			color: '#d9041b',},// Font color
		sumNum: ' './ / display values
		sumKey: 'allPay'.// Display the key of the value
	},
	{
		key: 'today'.name: 'Paid today'.selfStyle: {
			color: '#2eaaaa',},sumNum: ' '.sumKey: 'today'.moduleShowType: 'hat'.// The module displays the control switch
	},
	{
		key: 'month'.name: 'Paid this month'.selfStyle: {
			color: '#2eaaaa',},sumNum: ' '.sumKey: 'month'.moduleShowType: 'hat'}, {key: 'lastMonth'.name: 'Paid last month'.search: ' '.selfStyle: {
			color: '#F59A23',},sumNum: ' '.sumKey: 'lastMonth'.moduleShowType: 'shoes'}, {key: 'lastYear'.name: 'Paid last year'.search: ' '.selfStyle: {
			color: '#F59A23',},sumNum: ' '.sumKey: 'lastYear'.moduleShowType: 'shoes'}, {key: 'year'.name: 'Paid this year'.selfStyle: {
			color: '#2eaaaa',},sumNum: ' '.sumKey: 'year',}]};Copy the code

4.3 Data Initialization

Initialize the page request data and convert it to the data we need to display on the page.

/ * *@name The page displays the kanban list array */
const[boardList, setBoardList] = useState([]);

useEffect(() = >{
	let dataList = [{
		allPay: 1100.class: 1.month: 10.lastMonth: 10.lastYear: 100.today: 2.year: 200}, {allPay: 2200.class: 2.month: 20.lastMonth: 30.lastYear: 400.today: 2.year: 299,},];const list = [];
	dataList.forEach(item= >{
		let boardItem = boardObj[item.class];
		boardItem.board = _.cloneDeep(boardOption);
		boardItem.board.list.forEach(board= >{ board.sumNum = item[board.sumKey]; }); list.push(boardItem); }); setBoardList(list); } []);Copy the code

The data structure is finally obtained as shown in the figure below, where the structures of shoes and HAT are basically the same.

4.4 How to set kanban switch

The specific logic of switch is as follows:

1) Display items directly without setting the switch field;

2) Set the item of the switch field and display it according to the specific kanban type in the content

/** * Kanban switch setting method *@param {Object} Board Kanban item data *@param {Object} Item Kanban data *@return {boolean} The Kanban TAB displays a Boolean value */
const moduleShowFlag = (board, item) = >{
	let flag = false;
	// =>true: Displays the items without setting the switch field
	if(! board.moduleShowType) { flag =true;
	} else {
		// =>true: sets the item of the switch field, which is displayed according to the specific kanban type in the content
		if (board.moduleShowType.includes(item.key)) {
			flag = true; }}return flag;
};
Copy the code

4.5 Page Rendering

The initialization of the list data loop rendering, different kanban types to show the specific item add switch setting method, according to the returned Boolean value display. Note: the code copy is not complete, so directly paste the picture

Five, the end

A simple change can open up the road ahead.

The end of this sharing, the new just try to write, welcome everyone to comment in the comments section, give valuable advice, help me grow.