The last century in 1989, CERN physicist Tim Berners-Lee's invention of HTML (HyperText Markup Language), referred to as HTML
The first page is fully static HTML pages, they are good pre-written html files stored on the Web server.
When a browser requests a URL, Web server the corresponding html file throw browser, you can display the contents of the html file.
If you want to display different pages for different users, obviously not ready to thousands of thousands of different html files, so 服务器就需要针对不同的用户，动态生成不同的html文件.
One of the most straightforward idea is to use C, C ++ these programming languages 直接向浏览器输出拼接后的字符串. This technique is called CGI: Common Gateway Interface
Obviously, such as Sina home complex HTML is not possible to get through the fight strings. As a result, it has been found, 其实拼字符串的时候，大多数字符串都是HTML片段，是不变的，变化的只有少数和用户相关的数据so, there was a new way to create dynamic HTML: ASP, JSP and PHP - respectively by Microsoft, SUN and open source community development.
Before:
in ASP, a document is a HTML asp, however, the variable needs to be replaced with a special <% = var%> tag out, together with the cycle, condition judgment, creating dynamic HTML CGI it is much easier than .
However, once the browser displays an HTML page, to update the page content, the only way is to re-acquire a new HTML content to the server.
If 浏览器想要自己修改HTML页面的内容, how do? It would need to wait until the end of 1995, JavaScript was introduced to the browser.
Once you have JavaScript, the browser can run JavaScript, then make some changes to the page. JavaScript还可以通过修改HTML的DOM结构和CSS来实现一些动画效果，而这些功能没法通过服务器完成，必须在浏览器实现.
Above page history, taken from the Liao Xuefeng summary, we are interested can go search
MVC pattern
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存
Communication with each other
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈
What are the drawbacks of this model is it?
One drawback: it is 必须等待服务器端的指示, but if it is an asynchronous mode (asynchronous process explanation see below), then all nodes html, the data structure is the page request over the rear end.
As analytical browser only displays a container, Model role is almost spent x, Model level rarely do almost no control over the front end, the front end of your work is almost done cutting plans and Aberdeen carousel figure / cry
Two disadvantages: Because you render the front page structure, almost back-end server bandage over a pile of data sent with the front end you只需要用拼接字符串 或者字符串拼接引擎
For example Mustache, Jade, artTemplate, tmpl, kissyTemplate, ejs like to do things, it plainly pure hard labor and rework majority, which led to, a lot of people think that if the front end is not important, is only responsible for art and experience the action just fine.
Shortcoming three: affect the whole body. 数据、显示不分离!
Why do you say, because if you want to change the business logic, such as a very simple needs, you come out with stitching ajax php or jsp page data, the age of the field I do not need to separate gender field area, the men shown separately, woman separate display, is a former table together to a
So, back end first to sql query to separate male and female data, and then render the string to the age when the field is removed and then separated men and women into two table, and then pushed to the front-end receiver.
He received a front-end, and then re-rendering again, even in the processing of one page is to show the effect of the action. . . Really hard to force ah (front and rear end cried out together: work overtime to make me happy, ohh)
Principle asynchronous requests
principle of synchronization requests. When the browser sends a synchronization request to the server, the service processing procedure in the synchronization request, the browser is in a wait state, the data server processes the request and the response to the browser memory covers any original browser, which the browser to reload page and display the data server response.
So, there is no technology that allows the browser sends a request to the server, the process of processing the request, the browser does not wait state, and the browser receives the response data is not simultaneously reloading the entire page, both the request before the data is not lost, but also to achieve partial page refresh it? Then use the ajax request - asynchronous request model, then what is it the principle of asynchronous request?
We know that, in the model synchronization request, the browser request is sent directly to the server, and directly receive, in response to the data processing server. This leads to the browser sends a request after the finish, it can only dry waiting for the server side to process the request, respond to the request, during which other things can not be done. It's like you go to the city to look for a new house to live in, you can find yourself, on a website or advertisements on the street up to know availability of information, to find a suitable own it, then talk to the landlord about the price. During this period most of your energy and time are used on house hunting, you may not have time to go to work or do other things. Another way is that you find a rental agency, you find an agent, you need to tell him to let him help you find, in the intermediary to give you looking for an apartment at the same time you can also go to work or do other things.
Asynchronous request is based on the above-described mode, the request to browser proxy object -XMLHttpRequest (most browsers are built object), by the proxy server sends a request to the object, receiving, in response to the data analysis server, and to update the data to the browser specified control. In order to achieve a partial page refresh data. Asynchronous request so that the browser without waiting for the server to process the request without reloading the entire page to display data of the server response, but also for other operations in the course of an asynchronous transmission request in the browser.
"What is mvvm mode"
MVVM first proposed by Microsoft to, it draws on the idea of MVC desktop applications, in the front page, with the pure JavaScript Object Model, View is responsible for displaying, both done to maximize the separation. That is, we often say, before and after separation, really be achieved here
It uses two-way binding (data-binding): View the changes are automatically reflected in the ViewModel, and vice versa, the data model changes, automatically presented to the page display
the associated Model and View together is the ViewModel.ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model.
We look at MVVM 数据绑定how to achieve.
Since the essence of the data-driven model is that [data] and [View separation, so first of all we do not care about DOM structure, but about showing data.
What is the easiest way of storing data is it? Obviously not mysql, database objects using JavaScript but
as long as we change the content of JavaScript object, it will lead to a corresponding change (DOM structure example point link )
which makes us focus from how to operate the DOM becomes how to change a JavaScript object state, while the operating ratio JavaScript objects and DOM get a simple operation from Earth!
This is the core idea of MVVM: 关注Model的变化，让MVVM框架利用自己的机制去自动更新DOM，从而把开发者从操作DOM的繁琐中解脱出来!
Also known as data - view separation, data-driven view, it does not affect the data, no longer have the tedious DOM structure tube operation, the world suddenly clean, perfect!
Author: North mom and little brother North
Original: https://blog.csdn.net/xllily_11/article/details/69527396
javaScript in the browser is how to run
https://blog.csdn.net/u010998803/article/details/81382500