JavaScript DOM Programming Art Learning Notes (i)

Well, after a week, today finally will be "JavaScript DOM Programming Art (2nd edition)" This book finished, feel benefited, I and the author and publishers and so do not know, do not want to advertise for them, but this book is really worth a look, it is worth recommending to understand the relevant personnel hdom! First of all, thank you very much for writing such a good book. The content of the book is more, I just write down what I think is helpful to myself and others!

Well, first of all, let the code speak!

Here are two classic pieces of code that are repeated and common in this book

1: Quite classic and practical, especially when you need to bind multiple functions for a page load function

/** *function  addloadevent (func    ) {var oldonload=  window.onload;     if (typeof window.onload! = ' function ') {        window.onload=func;    } Else {        window.onload=function() {            oldonload ();            Func ();     }}}

2: Also quite classic and practical, especially when inserting new tag elements

/* * [InsertAfter inserts a new tag element after the target element] * @param  {[DomElement]} newelement    [new tag element to insert] * @param  */function  InsertAfter ( newelement,targetelement) {    var parent = Targetelement.parentnode;     if (Parent.lastchild = = targetelement) {        parent.appendchild (newelement);    } Else {        parent.insertbefore (newelement,targetelement.nextsibling);    }}

The author of the second book is constantly stressing things

1) for the Web page in the browser is essentially a trinity of the community, the structure layer, presentation layer, the behavior layer, the structure layer is responsible for Hypertext Markup language, such as: HTML, the presentation layer is responsible for the CSS, the behavior layer by JavaScript and DOM, writing code must be as far as three separate accountability.

2) Write code, note that there are many, for the page code, the author emphasizes the progressive enhancement, smooth degradation, three-layer separation, concise and easy to read, abstract universal. Three layers of separation, concise and easy to read without much explanation, it is easy to understand. Abstract purpose is to general reuse, usually the invariant factor with a variable factor to replace, such as: The method of the parameters passed, the original is not passed may be hard-coded written in the method body, the function becomes the parameter, the function is more flexible!

Progressive enhancement: is a very important code writing principle, meaning that, for the Web page, we should always write code from the most central part, that is, from the content, in other words, the structure of the Web Page Three layer is the most important layer, CSS is mainly used to enhance the page display style, JavaScript and Dom are primarily used to implement user-and web-page interactions. Of course, I think it's possible to do anything, to prioritize, to grasp the big picture and to focus on anything that matters.

Smooth degradation: Also a very important code writing principle, the focus of smooth degradation is to emphasize on the adherence to the progressive enhancement of the principle of writing code, to ensure that our programs are more robust, better compatibility, for some lack of necessary CSS and DOM support for visitors, Our site can still provide some of the most core content, not the page completely lost value. The embodiment of the code is primarily to determine the browser's ability to support certain methods, attributes, and so on, then decide the next step in the process!

3) Look at the Web page to be able to view graphically, in our eyes, the DOM is a tree, is a tree upside down, each element of the document corresponds to each node in the tree, in this view to write code will be much easier, for the document elements in the search, modify, delete, replace, The addition of the operation is very visualized! Like we play a fun toy like, everything is very clear, in front of the eyes, CSS programming pens, JavaScript into a sensor, DOM is the raw material processing field.

4) Analysis of the problem and the key to solve the problem, is to simplify, divide and conquer, gradually step to the point, first will solve the problem of the idea of the next step to the list, at least the most important to be very clear and clear, and then to achieve a simple core function, and then slowly expand its ability, let him achieve smooth degradation, Then abstraction makes it reusable for common use.

5) In addition to thinking about the question of whether it can be, you should also think about it should not be the problem, such as: Now the CSS has to deal with some of the functions of the event, but the best thing to do is to the JavaScript DOM to do!

JavaScript DOM Programming Art Learning Notes (i)