[web front-end interview questions collected 07] I don't understand the separati

His legend

Today the old master, I have been fortunate enough to know a JS master, then recommended the blog, quietly tell you, I worship him as a teacher, he promised that I only take me a male disciples. . . . .

The teacher just registered account, now also not much amount of blog, but after the point will be dry cargo Oh, it is worth looking forward to.

Preface

Last week returned to Chengdu, this week, ready to find a job, on the Chengdu Jumei Youpin actually more interesting, so yesterday on the first go to the interview, the interview feeling technology had good time, finally HR said the manager was not in, so the manager feedback.

I believed then, but came back to think about feeling may fail, but I don't know where is the problem.

Front end the interview now encountered are similar, specific topics will not listed, because the release of confidential information is not very good, some of the things I talk about their impression quite profound.

There was a telephone interview today, the afternoon to participate in an interview, more reliable feel the company still has great development potential,, if there is the should be choice.

At home, there are two things that have been put in the heart, the first is why fails, another is my copy of resume. . .

Resume copying words

I resume copied a few words: have a certain understanding of the separation of presentation and data!

So the morning was asked for, and the eldest brother had a problem encountered in the work and I exchanged a (problems under the proposed), at that time my understanding of this is fuzzy, and then to the round.

So the morning has been felt something suffocated, the afternoon after the end of the interview, really can not help, we are going to have a look this problem.!


What is the separation of presentation and data

I will read an article, point a look into the results mean separation performance and structure, the effect:

The performance should be controlled by CSS, the structure should be controlled by HTML, such as our great Zen Garden.

So I think, is it right? Be my resume, performance and the separation structure. . .

But I feel separation performance and data or there is some truth to it, so we are back to the performance and the data of our separation.

- Gorgeous split line -

Half an hour later, I went to query the data also consult the predecessors, and finally obtained two things:

MVC

MVVM

Apparently, they said this is probably my search for answers, but my heart seemed to not buy it, so I find later cut a figure:

This is a make the back end of the brother's blog, we see the main purpose of MVC development is the presentation and data separation.

It seems really is MVC. .

Okay, this place to temporarily stop, we have a look at that time.

The mock interview

The interviewer asked me, said resume writing on the separation performance and data have a certain understanding, can describe.

I'm very calm and said, let me think, then began to search my brain like hard disk, press a root not the word, so he found a is it right? HTML and CSS should be separated?

Of course the answer is negative, then the interview brother take a problem he encountered in the project out:

He has a list of countries, now to the list of countries in A, then B can be selected by the A, can also have a total list selection
But B added after the A, if not to increase this to A. 

In order to facilitate your understanding, I on a map

Do not know you heard the question what effect, I was actually there is one way to achieve (the most simple, most soil), didn't thought of this question and “ and data separation between ”.

But since you asked, still should have contact you, you do not know how to look at it?

So we return to the problem itself.

Separation on the behavior and data

May encounter this kind of situation in our work of art, every time things to get the feeling is a little different, you can't say there is a big different, anyway have different.

Then used the guy after all finished, JS wrong, why wrong you know, here I am to speak, a real example.

When I was young in Sobey, our design, but design colleagues CSS is very poor, to our html+css often unclosed tags, often be rather baffling double quotation marks.

But I CSS is not good, other colleagues have is get back, so in this case we hard to make our first product, and design consistent (or modified in the design code.).

All leaders looked forward a little advice, so design colleagues changed again below, believe me he simply to change things up a bit, and then formed the HTML gave us. . . .

The fetched after I saw the HTML structure and the last is completely different, and our products is a single page application, a lot of places is generated by JavaScript, or HTML tags and data form template, now want to change... Modification of wool. .

In order to describe our difficulties here I describe in detail:

① We made according to the first page layout design

② There are many application pages, is similar to the JS template of something (small package, a stamp)

③ Page according to the database design, front end using JS to control the page load, the final render our page

The code and a little complex, finished design now brother to a completely different structure, was not inside the CSS master, even without a CSS proficient.

I am responsible for the change in this job, I vaguely remember me to change out of xiang.... Finally finished!

Then according to the instructions of the leaders, design colleagues gives us third sets of HTML code, this and the original gap is relatively big, but still the main module, so I see the air was full of flying. . .

I don't know what I described earlier you encountered no, but I wasn't able to solve this problem, we can mend the reform, every time something new is a tragedy.

Back to reality

In fact, I encountered this problem I can feel the importance of good description of performance data separation, but what is the performance of data separation, we still need to make it clear.

PS: In fact, my problem is more complex, I feel is not completely is the representation and data separation......

I don't know what is the separation of presentation and data, then we give some counterexamples.:

① The server (php/.net/java), an HTML tag and data print

Response.Write("<div>......</div>");

This code you have seen, can imagine, a system for one year after revision, the place code modifications may be a little pain (especially the original developers not here)

This is the server, so our client. (well, let me think, think. . )

② I think of an example, do not know is not appropriate, out.

Some time ago, we have an area control front end things, he might look like this:

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

He in the string will all area all written out (including the area code (hidden)), it will have a problem:

If the day I want to change the structure to adapt to the new layout (response to layout what you are), then we will find no way to start

③ I met the problem (or go back to the key.)

It is mainly used in the JS ID I met the problem, or class or tag child selectors are not, the new code up a mistake.

This problem is very sharp, I used a html+css page, we according to the writing of a large set of JavaScript things, time-consuming 3 months. 
Then we put on a page, but the function is the set of JS
Then we can put on a page, the JS or the JS
Finally, the metamorphosis of the requirements out (because the product will give different TV stations use), our products in different people look page is not the same, but the function is the same!!!

Gigantic loser, take that, dear brother, how you will solve this problem.?

It is because of that be rather baffling demand, so there will be our front end MVC this be rather baffling. .

Because logically front-end should not appear MVC, our html is model, our CSS is view, our JS is controller.

Now the results of single JavaScript is out of a set of MVC, this is not cheating.?

At this point, you do not know the separation of presentation and data have a new understanding of the no? ? ?

MVC——Separation of presentation and data

The word does not say more, take a piece of code (the original code, copy):

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             var end = $('#end');
 8             $('#pili').change(function () {
 9                 var name = '';
10                 var p = $(this).val();
11                 if (p == 'Ye Xiaochai') {
12                     name = 'Knife crazy sword Chi';
13                 }
14                 if (p == 'A page of a Book') {
15                     name == 'Forever learning';
16                 }
17                 if (p == 'Su also really') {
18                     name = 'Lotus scent';
19                 }
20 
21                 end.html(name + p);
22             });
23         });
24     </script>
25 </head>
26 <body>
27     <select id="pili">
28         <option value="Ye Xiaochai">Ye Xiaochai</option>
29         <option value="A page of a Book">A page of a Book</option>
30         <option value="Su also really">Su also really</option>
31     </select>
32     <div id="end"></div>
33 </body>
34 </html>

We to have a look the above code, very simple logic, the value of end changes after select change, now needs to change:

① The select into input simulation using Select

② Or use select on a mobile phone.

③ There will be rather baffling demand, this is

Okay, now what do you write code? Is it right? Can write some code, or you don't know how to write??? So have a look our implementation of MVC.

PS: Code is a copy of the.... But I'm proud of a word by word knock Oh, knowledge is not stealing......

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             //The definition of a controller
 8             var piliController = {
 9                 //Select the view
10                 start: function () {
11                     this.view.start();
12                 },
13                 //The user is mapped to the model updating.
14                 set: function (name) {
15                     this.model.setPerson(name);
16                 }
17             };
18             piliController.model = {
19                 piliKV: {
20                     'Ye Xiaochai': 'Knife crazy sword Chi',
21                     'A page of a Book': 'Forever learning',
22                     'Su also really': 'Lotus scent'
23                 },
24                 curPerson: null,
25                 //The data model for business logic and data storage
26                 setPerson: function (name) {
27                     this.curPerson = this.piliKV[name] ? name : null;
28                     this.onchange();
29                 },
30                 //Synchronous update notification data
31                 onchange: function () {
32                     piliController.view.update();
33                 },
34                 //Query the corresponding view on the current state of
35                 getPiliAction: function () {
36                     return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
37                 }
38             };
39             piliController.view = {
40                 //The user triggers the change event
41                 start: function () {
42                     $('#pili').change(this.onchange);
43                 },
44                 onchange: function () {
45                     piliController.set($('#pili').val());
46                 },
47                 update: function () {
48                     $('#end').html(piliController.model.getPiliAction());
49                 }
50             };
51             piliController.start();
52         });
53     </script>
54 </head>
55 <body>
56     <select id="pili">
57      <option value="Ye Xiaochai">Ye Xiaochai</option>
58         <option value="A page of a Book">A page of a Book</option>
59         <option value="Su also really">Su also really</option>
60     </select>
61     <div id="end"></div>
62 </body>
63 </html>

Let us have a look the God like code.... We will begin to think he has these problems:

① The code maintenance difficulties, at least I think very difficult

② Increase the complexity, performance will have a problem

③ I could not persuade themselves that they understand. . . .

So we gave up to MVC, but we come back to look at him, we will find something different:

① We seemed to be used in the view selector to obtain DOM, others don't know DOM this.

② Our data seem to be in model, we can randomly change, but will not affect our DOM

③ View and model are completely independent, our controller just put them together

Look at the magic, I am not fully understand nodded, your sister MVC also really fucking good!!!

Conclusion

Hear me shouting said so much, you do not know to understand the separation of presentation and data no, I feel I have income, so write out to share with you.

This is just a very shallow understanding, I will ask you what, then write an article, hoping to be able to solve this problem, also answer the questions above interview them, today temporarily to the.

Hope this blog will be helpful to you, of course, the most important is:

Brother, what idea to say oh, don't hide.!!!


Posted by Uriah at November 21, 2013 - 2:34 PM