Loosely coupled UI layer
This chapter presents a concept that is coupled
Suppose a modification component to modify the time a lot of other components, then it indicates the presence of tight coupling between components
If you modify a component without modifying other components when he did loose coupling
Page is composed of three parts HTML, CSS, javascript composition, the first to achieve loose coupling between the three
1, the JavaScript detached from the css
Can be inserted in the beginning of the css, JavaScript error when the judgment is not good js error or mistake in the css js appear, but do not support css expression after IE9
2, the css detached from JavaScript
Often operate in the js pattern, e.g.
Element.style.color=’red’
When problems arise in the future increase styles such code or js problem of bad judgment is css styles in the style of operating problems arise
A better approach is the class name of the operation, loose coupling is achieved by addition of the js and css method class name,
Of course, the further element to reposition the element or the entire page can not like the css operation can be done in the js
3, will be pulled from html in JavaScript
<button onclick=”dosomething()”>submit</button>
This wording is coupled to two deep layers UI (HTML and js) of
Problems: 1, click the button when the function must exist, when clicked when js file if no error will be loaded. 2, while the time to maintain and modify HTML js code, which is a typical deep-coupled code
Js to be used in the form of outreach introduction, because when js problem first thought was to find js file js file or need to decide whether or html files
4, pulled from JavaScript in the HTML
When you need to debug text or structural problem, but also want to start from HTML, if buried in HTML code js bad position to pinpoint where the problem lies,
Js used in the case of HTML often to innerHTML property assignment, if the label can be inserted or modified by using the following method to reduce the coupling to the page js
The template is placed on a remote server, to obtain external label via ajax request