The mental process and understanding of visual project code design

Preface ： This article contains my understanding of code and Reflection on design during this period , It's time to negate previous code attempts to do better design and ideas . Once proud , Consciously OK code now looks like , Although it still has its merits , But there are more areas that need to be refined . As the saying goes , Code can run without moving , And after all , The current structure is actually more acceptable than that of many front-end coders .

Business scenario

Code that breaks away from scenarios and problems has no value . What problems do you need to solve , And how you do it , This is the core thinking of writing code . Despite numerous iterations , Eventually the code will turn into a mountain of shit , But we still have to let the rule of this shit mountain shit , Maintain the whole as much as possible , Don't cause shit avalanche .

The business is as follows ：
1、 There are many kinds of effect grids 、 The particle 、 Warm and deep 、 Storm surge, etc
2、 Need to be able to switch at any time 4 A projection coordinate system 4326、3D (WGS84)、 Antarctic projection 、 North Pole projection .
3、 Yes 3 A particle switch that controls the representation of a map 、 Grid switch 、 And vector boundary switches .
4、 Access data type （ Such as GFS、EARTH etc. ）、 This business is related to windy It's like , We can draw an analogy , Although it means that , But there are many customized things in it .
5、 time axis 、 Altitude axis
6、 Data handover

This is the real graph for reference , But I believe it should be quite understandable . The structure of a tree is nothing more than the expression of many kinds .

I was just working 3 I have been here for more than months , I have no idea how to start the first step . At the prompt of the leader , With the first design of this visualization project .

Express the state as an object

In fact, the business code is mostly the representation of status , For example, the basic switch has two states , We only need one variable Such as ：

let a = Boolean(0)
// it means false 
a = Boolean(1)
// then true

But so complicated 、 A changeable state , We are obviously not suitable for maintaining every variable . Well, put it another way , Can we pass an array , This array is the representation of all these data state Set , It is simply an array package object , Each object is responsible for describing the set of states represented by the data . Take the business scenario above as an example ： We are right. 1、2、4 Do the processing

//  Maintain a  typeId  mapping  .  for example  1 =>  grid  2=>  The particle  3 =>  other   As a type identifier   Do the same thing 
let obj = {
    
	typeId: 1,
	//  Render projection 
	renderPlane: '3D',
	//  The type of data used ,
	dataMode: 'GFS'  
}

such , We just need to store an array , So many states mean that we only need to pass an array object Can be expressed , This completes the first step of processing .

At this time, with the continuous progress of the project , Increasingly complex state processing , You will gradually find , There is a deal with a , Although you have worked hard to write it out , Or from time to time BUG, The reason is that there is interaction , This is the impact of the business itself , such as ： Some data do not need vector boundaries , But the vector boundary is still active , You need to delete it or hide it , So complicated 、 Chaotic operation , Nature will continue to bring BUG. The system is now on the verge of collapse , As long as you leave the next day , The next person needs to spend a lot of time thinking about it before continuing to develop .

So if you haven't had similar experience before , It is here that you begin to realize , Program operation , At most, the representation of a single state can only be used as the basis for judgment , It doesn't help you achieve perfect realization

Design of implementation state （ Engineering of functions ）

For the engineering that is often mentioned now , I believe that for many new entrants 、 The training class just came out 、 Or what we call cv Engineers should have only heard of concepts , I can't understand the subtlety . Include vue Component subcontracting in , The encapsulation is purely for shortening the number of lines of code , In essence, it is due to the lack of understanding of engineering .（os: Because I went to maintain another project some time ago , That project is similar 2,3 year , Many people have gone back and forth , The scalp is numb , I don't even know why most of the same code needs to copy and create a component dedicated to adding new routes ）

image java Come on ,java Write the interface The usual design is controoler ,service,dao , Do the corresponding things separately , for example ：controller The layer is used to call service layer Call to DAO Layer access database The retrieved data is sent to the front end . The concept of these three layers is a complete and good design ： Each logical unit performs its own duties . Think about some of the processors at the bottom of the computer , There are also logical units and arithmetic units ..

For functional logic , We need to design as a whole at the beginning of the project , Whether it's you , Or the latecomers will benefit a lot .

Where to start with functional design ？ First , When we get here , So as not to let everyone go astray , We need to completely abandon the previous state , Tell the truth , State and function are not the focus of the relationship , The key is What do you want to achieve , To put it in the simplest sense, it is ： I said what you can do with this function or class , You can do anything . This is the design , It is not called implementation , We don't need to think about implementing , This is not the focus of this article .

In most scenes , Our design should be in the shape of a tree ,（ You get a total score for writing an article , This is the reason ）

My thoughts at that time were as follows , Generate the master controller inside the required component , By the main controller , Do some topic changes ： ** Mainly due to the switching of projection coordinates , We need to change the mount to dom Map instance on , therefore , Start from the whole business logic , It should be at the next level of the main controller .** Inside the main controller , We do some operations to initialize the instance , The reason is that each map needs to be processed differently , So we pass the corresponding parameters to the corresponding effect processor for processing during this initialization process . Empathy , The rendered view is also a parameter that corresponds to the content of the currently processed projection coordinate system , Call instance processing . Reset It means the initialization content that needs to be done again when the coordinate system changes , Garbage collection is to avoid residual memory not being released .

Above all , The structure has been as perfect as possible 、 Clear , I was satisfied when I just made it , All that remains is the implementation .

Code implementation

First of all, in terms of implementation , I write badly , Maybe he wasn't so bad in a way , What's the problem ？ The problem is that you don't think much about the implementation .

The following is my summary of a few points that are not in place ：
1、class Of Constructor function , It's better to use Object options In the form of . Look back after a few months , It is required to add click events to handle a certain business logic , When a new process is required , You should be able to read the obvious sense of fragmentation in the code , This is what I did on purpose . Remind yourself that you need to be careful when writing projects later .
2、 Should not be passed into a class vuex Of store object . I can use getter、mutation、action wait Introduce , control . It affects the purity of the entire class , Means that when this class is not running in this project , He is a worthless piece of shit .
3、 Inject attributes such as initialization into the instance , It can be written in the form of a function , It will be more harmonious .

Modify the active data function reference