Read the summary of chapter fifth, "Writing maintainable JavaScript"

the fifth chapter of the UI layer loosely coupled5.1 What is loose coupling

In web development, the user interface is defined by three layers that are isolated from each other and interacting:

• HTML is used to define the data and semantics of a page
• CSS is used to add styles to a page

• JavaScript is used to add behavior to a page

Our goal: to ensure that changes to one component do not affect the rest of the way frequently.

Results:

1. Encountering text or structure-related problems, locating by finding HTML
2. When a style-related problem occurs, you know that the problem appears in CSS
3. For those behavioral-related issues, you go directly to JavaScript to find the problem

5.2 pulling JavaScript away from CSS

IE8 and earlier browsers have one feature: CSS expressions (CSS expression). (The reader himself read the book only to Know-)

It features: Allows you to insert JavaScript directly into the CSS. However, there are dross in history.

Word: No use .

5.3 Pulling CSS away from JavaScript

The reader himself has often met. Some of the only back-end people who think of JS as a scripting language will write this frequently.

        //  bad wording        element.style.color = "Red";         = "10px";         = "100px";         = "visibility";

However, the best way to do this is to manipulate the CSS classname

 //                 good notation-native method  Element.classname + = "reveal"  //  good notation-HTML5  elemen                T.classlist.add ("Reveal" );  //  good notation-YUI  y.one (Element). ADDC                Lass ("Reveal" );  //  good notation-jQuery  $ (element). ADDCL                ("Reveal"  //  good notation-Dojo  dojo.addclass (elem ENT, "reveal");  

Reason: Because CSS classname can become a bridge between CSS and JavaScript, in the life cycle of the page, JS can add and delete elements of the classname without having to manipulate the style directly, in order to maintain the loose coupling with CSS.

5.4 Pulling JavaScript away from HTML

① This part is also a cliché. It is estimated that very few people are writing this now.

<   onclick = "dosomething ()" id = "ACTION-BTN" > Click me</button>

The author's recommendation is also written in a number of books:

        function  dosomething () {            //  code          }        var btn = document.getElementById ("action-btn");        Btn.addlistener (dosomething);

IE8 and previous versions of browsers do not support the AddEventListener () function, so you need a standard function to encapsulate these differences.

  function   AddListener (target, type, handler) { if   (Target.addeventlistener) {Target.addeventlistener (type, Handler,             false  );  else  if   (target.attachevent) {target.attachevent (" on "+ type, handler);  else   {target[ "on" + Typ            E] = handler; }        }

If you use a JavaScript class library, you can use the methods provided by the class library to attach an event handler to an element. Here is a sample code for some popular class libraries.

        //  YUI        Y.one ("#action-btn"). On ("Click", dosomething);         // jQuery        $ ("#action-btn"). On ("Click", dosomething);         // Dojo        var btn = Dojo.byid ("action-btn");        " Click ", dosomething);

② In addition, the author does not recommend the use of <script> tags to include JavaScript code (but in the emergency debugging is still a good way, the formal environment of course isolated!) )

5.5 Pulling HTML away from JavaScript

The author puts the play to the end, and I take the spelling of the HTML when I do the previous project. This way needless to say, very low. This is similar to the following:

You will find that you need to escape, HTML and JS mixed together, if you want to modify the need to modify many places, so, the author recommended three ways to extract HTML from javascript:

5.5.1Method 1: Load from the server

This approach is to place the template on a remote server and then use AJAX technology to fetch it, similar to the following:

 //  YUIfunction  loaddialog (name, oncomplete) {    y.one ("#dlg-holder"). Load ("Js/dialog" + name, oncomplete);} // JQuery function Loaddialog (name, oncomplete) {    $.one ("#dlg-holder"). Load ("Js/dialog" +  name, oncomplete);} 

This is helpful when you need to inject a large section of HTML code that is not constantly changing to the page. For a small number of label segments, you might consider using a client-side template.

PS: I feel this method is also low--because the author added a sentence: for performance reasons, it is bad practice to put a lot of useless tags into memory or dom . This is a direct indication that this approach is not suitable for dynamic templates.

5.5.2Method Two: Simple client templates

Client templates are tag fragments with "slots" that are replaced by JavaScript programs with data to ensure the full availability of the template.

This template contains the%s placeholder, where the text is replaced by the program
<Li><href= "%s">%s</A  ></li>

In essence, we don't want to embed template text in JavaScript, where do we put it? The authors provide two methods.

• Include the template text in the HTML comment.

        <ulID= "MyList">            <%--<Li><a href="%s">%s</a></Li>--%>        </ul>

• or a <script> element with a custom type attribute, the browser will default to the contents of the <script> element as JavaScript code, but you can assign the type to a value that the browser does not recognize. To tell the browser that this is not a JavaScript script.

      <script type= "Text/x-my-template" id= "List-item" >        <li><a href= "%s" >%s</a></li>    </script>

Once the template is removed, the rest is done, with JS to replace each%s into data OK ~.

PS: This method and the above methods are for the simple format, and not too many escapes, I prefer the fool-style author recommended method Three (third-party plug-ins), it provides a mature solution greatly facilitates the programmer.

5.5.3 method Three: Complex client templates

If you want to use some more robust templates, consider the solutions provided by handlebars.

You can go to its official website to see the details. It's very powerful and versatile.

PS: I also wood has contact about the front-end frame of the dongdong. Just listen to the micro-rain dust The teacher said, the front-end framework to solve the problem of the function, I hope that they can contact as soon as possible ~

Read the summary of chapter fifth, "Writing maintainable JavaScript"