[Web Front-end questions sorting 07] I don't understand performance and data separation...

Preface

I went back to Chengdu last week and was ready to look for a job this week. I had a crush on jumei.com in Chengdu. So I went to the interview yesterday and felt that the technical interview was good, in the end, HR told me that the manager was not there. Let me wait for the manager to give feedback.

I believe it at the time, but when I come back, I think it may fail, but I don't know what went wrong.

The front-end interviews I have encountered are similar. I will not list the specific questions, because the leakage of company secrets is not very good. I will talk about some of my impressive things.

I had a telephone interview today. I took an interview with a company in the afternoon. I feel that the company is still very promising and reliable. If there is any post, I should choose it.

When I got home, I kept two things in my mind. The first one was why I failed yesterday, and the other was my copy of my resume ....

Saying that your resume is plagiarized

I copied a paragraph on my resume :!

So I was asked in the morning, and the eldest brother talked to me about a problem at work (the problem was raised later ), at that time, I had a vague understanding of this piece, and then I went around.

In the morning, I felt that something had been stuck. After the interview in the afternoon, I really couldn't help it. Let's take a look at this question!

 

What is performance and data separation?

As a result, I read an article about the separation of performance and structure. The general idea is:

The performance should be controlled by CSS, and the structure should be controlled by html, such as our great Zen garden.

So I think, should I change my resume? The performance and structure are separated ....

However, I feel that performance and data separation are still a bit rational, so let's go back to our performance and data separation.

Half an hour later, I went to query the information and consulted my predecessors. Finally, I got two things:

MVC

MVVM

Obviously, they said this may be the answer I was looking for, but I thought I was not buying it, so I looked for it and cut a picture:

This is a blog written by a back-end big brother. We can see that the main purpose of MVC development is performance and data separation.

It seems like MVC...

Okay, this place is temporarily suspended. Let's take a look at what we said at the time.

Simulated interview

The interviewer asked me, saying that my resume has a certain understanding of performance and data separation. can I describe it?

I calmly said something to let me think about, and then began to search for my brain hard drive, it seems that there is no such word at all, so I am confused. Should html and css be separated?

The answer is no, of course. Then the interviewer threw out a problem he encountered in the project:

For your convenience, I will use the previous figure

I don't know how you feel when you hear this question. At that time, there was actually a way to achieve it (the simplest and most earthy ), I didn't even think that this question would be related to "performance and data separation.

But now I have asked you how to contact me. I don't know what you think?

So let's go back to the problem.

Further discussion on Behavior and data separation

We may encounter this situation in our work. Each time the artist picks up something, it feels a little different. You can't say that there is a big difference, but there is something different.

After that, the entire guy is finished and js reports an error. Why do you understand the error? Here I am going to talk about it. Let's look at a real example.

When I was still in sobei, we had a design, but the CSS of our design colleagues was very poor. The html + css provided to us often had unclosed tags and often had inexplicable double quotes.

However, at that time, CSS was not good for me, and other colleagues engaged in backend operations. In this case, we made the first version of our product, which is consistent with the design drawing ().

After reading the changes, the leaders gave us some suggestions, so the design colleagues changed it again. I believe that I just changed a little bit, and then the html was handed over to us ....

After this experiment, I saw that the html structure is exactly the same as the previous one. Our product is a single-page application, which is completely generated by javascript in many places, or the html Tag and data form a template. You need to modify it now... Change wool...

To describe the difficulties we have encountered, I will describe them in detail here:

① We completed the page according to the first diagram of the design.

② There are many applications on the page that use something similar to js templatification (small encapsulation, very stamp)

③ The page is designed based on the database. The front end uses js to control page loading and finally renders our page.

Well, the whole code is a little complicated. Now the design engineer has a completely different structure. At that time, there were no CSS experts, or even no CSS experts.

I am responsible for changing this job. I vaguely remember that I changed to Xiang .... Finally, the change is complete!

Then, according to the instructions of the leaders, the design colleagues gave us the third set of HTML code, which is a little different from the original one, but the main module is still there, so I see that the sky is everywhere ....

I don't know what you 've met before, but I didn't solve this problem very well at the time, so I had to fix it. Every time I came up with something new, it was a tragedy.

Back to reality

In fact, I feel that this problem is a good indication of the importance of data separation, but we still need to clarify what it means.

PS: Actually, the problem I encountered is complicated. I don't think it is completely because of the separation of performance and data ......

I don't know what is performance and data separation. Let's look at the opposite example:

① On the server side (php/. net/java), print the html Tag and data together.

Response.Write();

You must have seen this code. As you can imagine, if a system needs to be revised after one year, it may be a bit painful to modify the code in this place (especially if the original developer is no longer there)

This is the server, so what about our client? (cough, let me think about it, I can't think of it ...)

② I think of an example. I don't know if it is appropriate.

Some time ago, we had a regional control at the front end, which probably looked like this:

 area = '<table>......</table>';

In the string, he writes all the regions (including region numbers (hidden). In this case, there will be a problem:

Suppose that I want to change the structure to adapt to the new layout (responsive layout is just fun), then we will find it hard to get started.

③ Return to the problem I encountered ()

The problem I encountered was mainly because the id I used in js, or the class or tag sub-Selector were not there, and the new Code was definitely wrong.

Hey, you guys, what are you doing to solve this problem?

It is precisely because of the above inexplicable needs that we will see the inexplicable front-end MVC thing...

Because, in principle, the front end should not contain MVC. Our html is the model, our css is the view, and our js is the controller.

As a result, javascript alone produces a set of MVC. Isn't it difficult?

So far, do you have any new knowledge about performance and data separation ???

MVC-performance and data separation

Let's not talk much about it. First, the Code () is as follows ():

Ye xiaochai's one-page book is really

Let's take a look at the above Code. The logic is very simple. After the select statement changes, the end value is changed. Now the demand changes:

① Select to use input to simulate select

② Use select on the phone.

③ There will always be inexplicable demands. This is

Okay. How do you write the current code? Do you know how to write a few codes ??? So let's look at the implementation of MVC.

Ye xiaochai's one-page book is really

Let's take a look at this god-like code .... We initially thought that he had these problems:

① Code maintenance is difficult, at least I think

② Increasing complexity and performance problems

③ I cannot convince myself that I understand myself ....

So we gave up MVC, but let's look back and take a good look at it. We will find something different:

① We seem to have used a selector in the view to get the dom. We don't know the dom in other places.

② Our data seems to be in the model. We can change it at will, but it does not affect our dom.

③ View and model are completely independent. Our controller just concatenates them.

Looking at this magical magic, I nodded like I could not understand. Your sister's MVC is really fucking powerful !!!

Conclusion

I have told you so much that I don't know what it means to understand performance and data separation. I feel that I have something, so I will write it out and share it with you.

This is just a very simple understanding. I will ask you later, and then write another article. I hope you can solve this problem well at that time. I will also answer the above interview questions, we are here today.

I hope this blog will be helpful to you. Of course, the most important thing is:

What do you want to say? Don't hide it !!!