The component of Web application

<span id="Label3"></p>Basic Idea 1. Why do you want to do the component?<p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Either the front end or the back end is part of the entire software System. Software products are also products, and its development process is bound to have its purpose. The vast majority of software products are chasing profit, in the case of the product target determination, the cost has two ways to optimize: reduce deployment costs, Improve development Efficiency.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">The industry has done a lot of research on reducing deployment costs, such as the popular "go to ioe" in recent years, which is typical of migrating from High-cost high-performance products to open-source, Easy-to-replace product clusters, such as using Linux + Mono to deploy. net apps, avoid windows The cost of the Server.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">To improve the efficiency of development, the industry has more research, the main way is two: speed up development, reduce the cost of change. How can we speed up development? If our development is not to reinvent the wheel, but every time we do new products can use the existing things, it will be much better. How can we reduce the cost of change? If we can clear the relationship between the modules, reasonable layering, each change only need to modify one of the parts, and even do not need to modify the code, just change the configuration, it is better.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Let's not look at the software industry and look at the manufacturing industry, like the auto industry, how do they build cars? Before making a car, it was designed to break down the entire car into different parts, such as wheels, engines, doors, seats, etc., produced separately, and then assembled, so it can be manufactured faster. If a car tire is punctured, needs to be sent to repair, the maintenance of the person did not repair in every place, but only the tyre removed to repair it, if the tyre is really bad, it would be a new one, the whole process does not need a lot of time.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Sid Mel has a very good game, called "civilization" (civilization), in the third generation, there is a scientific research success, will allow workers to double the efficiency, the name of the technology is called: replaceable parts (replacement Parts). therefore, The software industry should also introduce replaceable parts, commonly called components.</p></p>2. How did the early front end become modular?<p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">On the server side, we have a lot of modular approaches, like the beans of the Java ee. Once the components are built, mechanisms need to be introduced to allow them to be configured, for example, the workflow engine, the rule engine, which organizes the most basic components in a configured way and concatenates them into business processes. No matter what technology, what language, the component of the service side of the concept of basic differences, we have a consensus, there will be services, processes, rules, models and other Levels.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Early display layer basically static-oriented, the service side of the interface generated good, the browser to get to show, so this period, there is code control almost all in the service side, there are layered, there is no Division. If you do a layering, the approximate structure is this:</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"></p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">In this diagram, JSP (or whatever p, for example, the relevant Service-side technology in this article is represented by the Java System) in response to Browser-side requests, HTML generated, with the relevant JavaScript and CSS to SHOW. Note the key here, the browser side of the interface of the form and related business logic basically have no control, belong to what others show what, want to first mention the embarrassing situation of Application.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">This period of web development, the logic of the front-end is basically negligible, so the front-end component of the same way, whether it is ASP or JSP or any other p, you can customize the label, the HTML code and the line logic into a label, and then the user directly placed in the desired place, it can be.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">In this era, the so-called component, basically is taglib such a way of thinking, a piece of interface including its business logic into an end-to-end component, the whole very independent, direct a chunk from the interface to the logic has, and the logic is basically in the server control, the approximate structure as Shown.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"></p></p>3. New problems arise in the spa era<p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Since Web2.0 gradually popular, the web front end is no longer pure display, it gradually put in c/s in some things done in the b/s inside, such as Google and Microsoft's online office, This complexity of the Web application if the traditional way to do the component, obviously, it won't Work.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Let's take a look at this kind of modular way before, what is the essence? Is the separation between the presentation layer and the business logic layer, the backend is in the process of business logic, the front-end pure Display. If it is divided now, it becomes the front end has the interface and the logic, the back end also has the logic, this is quite disorderly. We know that the pure logic of layered components is still relatively easy, any logic if mixed with the presentation, it is more troublesome, so we have to push the layered point forward, push to also can separate the presentation layer stripping Out.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">As shown, because in fact html, CSS, JavaScript are gradually static, so it is no longer necessary to put them on the application server, we can put them on a dedicated high-performance static server, and further development, it can be a CDN (Content Delivery network, Content Distribution networks). Front-End and Back-end communication, basically through ajax, there will be some other such as websocket, in short, as little as possible to Refresh.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"></p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">In this image, you can see that the real front end has been formed, and it has formed a natural isolation from the application server, so it can also carry out some development evolution INDEPENDENTLY.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Many web programs are now in the direction of the spa (single page program, application), Such systems are usually similar to the traditional c/s program, the interaction process is more complex, so its development process will encounter some Difficulties.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Then why do we have to be a spa? It has a lot of obvious benefits, and the core advantage is Efficiency. This efficient embodiment in two aspects: first, for users, this way to make things better experience, similar to traditional desktop programs, for those who need frequent operation of industry users, has a great advantage. second, the efficiency of the operation is high, before the integration of some menu functions, may be introduced in the form of iframe, but each iframe to introduce some common files, server file transfer pressure, but also to initialize their own set of memory environment, compared to waste, not easy to communicate with each other, It is common to interact in a way such as Postmessage.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">With the spa, such as a piece of interface, it can be an HTML fragment, using AJAX to load over the processing and then put on the Interface. If you have logical JavaScript code, you can also use the asynchronous loading mechanism such as require to load, the overall idea is better.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Many people say that it is not enough to use jquery and add an asynchronous JS load frame with this kind of demand. These two things are good enough to solve some problems, but they do not deal with the most critical things. In the Web system, the presentation layer is very natural, because it is HTML and css, if only from the file isolation point of view, you can also make a division of the logic in a separate JS file, html inside as far as possible not to write js, this is the previous mainstream front-end code division METHOD.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">As we mentioned just now, there are some difficulties in the process of spa development, because the complexity is greatly improved, which leads to some problems, which are attributed to the complexity of the pure interface, for example, the control is more complex and so on, not so Simple. What is the problem? I make an analogy: we open two Explorer windows on the computer, browse to the same directory, in a directory to delete a file, you guess the other inside will not refresh?</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">No doubt, it will refresh, but you look at the Web pages you use, if you integrate the entire complex system into a single page, to ensure that the update of a data on the real-time feedback to all where it? How to do, is not a headache? The complexity of code organization is greatly improved, so some architectural improvements need to be made.</p></p>4. Changes to the architecture<p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">When it comes to architecture, we usually think about it in design Mode. In the famous "design pattern" book, I started with a typical scenario for dealing with client development, which is mvc.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">The traditional concept of MVC we are not unfamiliar, because there is struts, so there is a more classic MVC architecture in the Web domain, which v, is responsible for the entire front-end rendering, and is the service side of the rendering, that is, the output of html. As shown in the Following:</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"></p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">In the spa era, This is not appropriate, so the browser has formed its own MVC layer, where the V has become a client-side rendering, usually using some of the Client's HTML template to implement, and the model and controller, also formed in the browser side accordingly.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"></p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">We have a lot of this level of framework, such as backbone,knockout,avalon,angular, using different design ideas, some mvc, some mvp, some mvvm, each has its own characteristics.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">In angular, for example, it is recommended to use two-way binding to implement the correlation of views and models, so that if different views are bound to the same model, the problem mentioned earlier is Resolved. The model itself is also collaborating with other logical modules through some MECHANISM.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">This approach is dependent on Injection. The core idea of dependency injection is to instantiate the components that depend on it through Configuration. Using this model to design the software architecture will sacrifice some performance and also lose the convenience of tracking debugging, but in exchange for unmatched loose coupling and Substitution.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">For example, These components can be tested individually and then introduced at the time of use, without Pressure. For enterprises in a certain field, the light is enough to attract him to invest in the above, all the Non-volatile domain model of the business code in such a way to maintain, this is a wealth.</p></p>5. Fundamentals of the mv* framework<p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">If we are to design angular such a front-end framework, how should we start? obviously, logical control must use javascript, a framework, and the most essential thing is how it is handled logically.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Why can our interface be colorful? Because there are HTML and css, Notice that these two things are the configuration of the wording, referring to the back-end of dependency injection, if the two as a spring framework with some XML equivalent configuration file, the idea is Enlightened.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">Unlike the backend, javascript, which acts as a front-end logic tool, cannot be used as a portal and must be hung in the HTML to run, so there is a weird situation where logic hangs on the config file (HTML), and the configuration file is loaded by another container (browser or Hybird shell). The logic can then be executed from a portal. The good news is that, after this step, the logic layer begins to Shine.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">From this point on, the framework starts and what does it do?</p></p> <ul style="padding-left:2em; margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"> <ul style="padding-left:2em; margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"> <li style="">Initialize itself (bootstrap)</li> <li style="">Asynchronously loading JavaScript code that may not have been introduced (require)</li> <li style="">Parsing rules defined on HTML (template parser)</li> <li style="">Instantiation Model (scope)</li> <li style="">Create correlation between model and Dom (binding, Injection)</li> </ul> </ul><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">These are mainline processes, and there are a few spur lines, such as:</p></p> <ul style="padding-left:2em; margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"> <ul style="padding-left:2em; margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"> <li style="">Search string parsing url, recovery status (route)</li> <li style="">Loading HTML part templates (template Url)</li> <li style="">Association of part templates and models (binding)</li> </ul> </ul>6. How to Do component 6.1. The component of HTML<p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">A typical feature of the spa is the partial loading, which is one of the more important parts of the INTERFACE. After the dynamic request is obtained, the interface fragment is converted to the main interface by means of a technology like the template Engine. so, from this point of view, the component of HTML is very easy to understand, that is, the interface fragmentation and templating.</p></p>6.2. the component of JavaScript<p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">This part of JavaScript has several stages of development.</p></p> <ul style="padding-left:2em; margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"> <ul style="padding-left:2em; margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"> <li style="">Early sharing of files, the public function of the code to come out, multiple pages shared</li> <li style="">Dynamic referencing, eliminating global variables</li> <li style="">Further partitioning on certain frameworks, such as angular, is also divided into Provider,service,factory,controller</li> </ul> </ul><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">What is the goal of JavaScript component, it is clear responsibility, loosely coupled, easy to unit test and Re-use. The loose coupling here is not only reflected in the JS code, but also reflected in the relationship between JS and dom, so the framework like angular will have the concept of directive, the DOM operation is limited to such code, any other JS code does not manipulate the DOM.</p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"></p></p><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">As shown, the general principle is to divide the layers first, and then make the Segmentation. In this case, there is no longer the End-to-end component, the use of which is not so convenient, but in many other ways is Better.</p></p>6.3. component of CSS<p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto"><p style="margin-top:0px; margin-bottom:16px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto">In this regard, the industry also has a lot of exploration, such as Less,sass,stylus. Why do CSS also have to be modular? Traditional CSS is a flat text structure, the cost of change is higher, for example, want to change the structure from loose to compact, need to change a lot. This is much better if the actual CSS is used only as output, and there is another way of changing it as an intermediate process. For example, we define something as a variable, and each detail element uses these variables, and when the whole change is needed, simply modify the variables and regenerate Them.</p></p><p style="margin-top:0px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto; margin-bottom:0px!important"><p style="margin-top:0px; color:rgb(51,51,51); font-family:‘Helvetica Neue‘,Helvetica,‘Segoe UI‘,Arial,freesans,sans-serif,‘Apple Color Emoji‘,‘Segoe UI Emoji‘,‘Segoe UI Symbol‘; font-size:14px; line-height:22.4px; widows:auto; margin-bottom:0px!important">above, we discuss the general idea of the component of Web front-end development, and then we will explain the cooperative process and control mechanism after the Component.</p></p><p><p>The component of Web application</p></p></span>