Inadvertently see a Web front-end recruitment requirements: performance and data separation
This noun is very strange to me, I went to Baidu.
Because there are all kinds of inexplicable needs, so will appear in front of our front-end MVC this inexplicable thing ...
Our HTML is model, our CSS is view, our JS is controller.
Say not much, first on a piece of code (the original code, copied over):
2 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 = ';
Ten var p = $ (this). Val ();
One if (p = = ' leaf Chai ') {
name = ' Sword crazy ';
13}
if (p = = ' one page book ') {
Name = ' fullness ';
16}
if (p = = ' element is True ') {
Name = ' Fragrance White Lotus ';
19}
20
end.html (name + p);
22});
23});
</script>
Num <body>
<select id= "Pili" >
<option value= "Ye chai" > Leaves Chai </option>
<option value= "one page book" > one page </option>
<option value= "Vegetarian also true" > Vegetarian </option>
</select>
<div id= "End" ></div>
</body>
This column more highlights: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/aspx/
Let's take a look at the code above, very simple logic, select change after the value of the end, OK now the need to change:
①select into using input simulation select
② on the phone or use a select to forget
③ always have inexplicable needs, this is
Okay, now what do you write about the code? Do you write a few code, or do you not know how to write it??? So look at the implementation of our MVC.
PS: The code is my shameful copy .... But I am proud of a word a word of the knock Oh, stealing knowledge is not stolen ...
2 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//Define a controller
8 var Pilicontroller = {
9//Select View
Ten start:function () {
One this.view.start ();
12},
13//mapping user actions to model updates
Set:function (name) {
This.model.setPerson (name);
16}
17};
Pilicontroller.model = {
PILIKV: {
20 ' Ye Chai ': ' The sword is mad with folly ',
21 ' one page book ': ' Fullness ',
22 ' Vegetarian also true ': ' Fragrance White Lotus '
23},
Curperson:null,
25//Data model is responsible for business logic and data storage
Num setperson:function (name) {
This.curperson = This.pilikv[name]? Name:null;
This.onchange ();
29},
30//Notification Data Synchronization Update
Onchange:function () {
PiliController.view.update ();
33},
34//Corresponding view of the current state of the query
Getpiliaction:function () {
Return This.curperson? This.pilikv[this.curperson] + This.curperson: '??? ';
37}
38};
Pilicontroller.view = {
40//USER Triggers Change event
Start:function () {
$ (' #pili '). Change (This.onchange);
43},
Onchange:function () {
Pilicontroller.set ($ (' #pili '). Val ());
46},
Update:function () {
$ (' #end '). HTML (piliController.model.getPiliAction ());
49}
50};
Wuyi Pilicontroller.start ();
52});
</script>
<body>
<select id= "Pili" >
<option value= "Ye chai" > Leaves Chai </option>
<option value= "A page book" > a page </option>
<option value= "Vegetarian also true" > Vegetarian </option>
</select>
<div id= "End" ></div>
</body>
Let's take a look at this god-like code .... At first we would think he had these problems:
① code maintenance Difficult, at least I think it's difficult
② complexity, performance problems
③ I can not convince myself that I understand ....
So we gave up MVC, but we turned around and looked at him, and we found something different:
① we seem to be using a selector in the view to get DOM, where the DOM is not known anywhere else.
② Our data seems to be in model, we can change it at will, but it doesn't affect our DOM.
③view and model are completely independent, and our controller just connected them.
Look at this magical magic, I indefinitely nodded, your sister's MVC is really a damn good!!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
