JavaScript, JQuery, HTML5, node. js instances Daquan-Reading notes 1

There are many technologies. Examples are very many, only good slowly learn, slowly practice. Now this book is "javascript Combat----javascript,J Query,HTM L 5 , Node.js instance full "

The 3rd chapter of the photo display using JavaScript

There are two ways to build a software design: one is to make the software so easy that it is not obvious to find a flaw. Another is to make it very complex to find no obvious flaws.

--C.a.r.hoare, 1980 Turing Award winner

in this time of self-portrait narcissism, photos are to be shown. The binding of events has been explained in the previous chapters. This chapter mainly uses the previous knowledge to do a photo demonstration function.

The main contents of this chapter:

• Photo Loading
• The mouse response
• The response of the keyboard

3.1 Functional Design

Functional design may need to repeat the change, what is the standard? Listen to the boss or listen to the user? Although this is a customer is the era of God. But after all, there are some design principles to follow, because sometimes "God" will also make mistakes. Many other times, "God" is fickle.

(1) Avoid the principle of repetition (Dry,don ' t repeat yourself). The most basic principle of programming is to avoid repetition, and there is a saying to improve the code reuse rate.

(2) Simple principle (Keep itsimple and Stupid). Simplicity is one of the user's best experiences, like an apple that simply beats everything. And the simple code takes less time, the flaw is few. and easy to change.

(3) The principle of low coupling (minimizecoupling), that is, the use of this part of the code and changes affecting the other parts of the code as little as possible, otherwise reaching tragedy no one would like to see.

(4) Don't Let me think (don ' t make me think), the code is not just written to the machine. Many others are written to people, so the code you write must be easy to read, easy to understand, and easy to maintain at last.

"Suppose a maintainer no longer continues to maintain your code,

It is very likely that he has the impulse to kill you. ”

(5) Single Responsibility Principle, a function of a code, should be guaranteed to have only a single clear running task, otherwise, once the change will add the complexity of the associated test.

(6) The principle of maximum cohesion (maximize Cohesion), as far as possible similar functions of the code in the same section.

The word "class", which is often heard in the program, is taken from "Birds of a Feather". A class is a code similar to "Clustering".

(7) Avoid premature optimization (avoidpremature optimization), now the Society everywhere has "perfectionist", if the code execution is not imagined slow. Don't go "perfect" it. Otherwise it takes a lot of other costs, or time or energy or money.

3.1.1 Hierarchical relationships of HTML, CSS, and JavaScript

Through the 1th chapter of Understanding, HTML is the earliest out. CSS and JavaScript appear later.

Their essentially relationship should be seen in 3-1.

Figure 3-1 UI Hierarchy Relationship Structure

It seems like you should think about whether there is a "refactoring" space in the previous paradigm? The answer is yes. When I write to the 2nd chapter, the editor of the book is very commented: "Why is this code so long?" Can you split it into pieces??? ". One of the reasons for refactoring is whether the code is easy to read. Assume that at the beginning of the design to consider, which will make later maintenance work relatively convenient, find HTML code directly to find HTML files, find JavaScript code directly find JS file, find CSS code directly to find CSS file.

Separating JavaScript from HTML is one of the things that the front end must do. JavaScript is born to make HTML richer, not more cluttered. Mixing together causes: the bug tracking tool is difficult to debug.

As the division of labor breaks down, people who write HTML are not necessarily responsible for writing JavaScript. CSS and HTML are generally separate, but this is mostly a web designer or a front-end refactoring Project division task.

It's also challenging to keep a clear separation between CSS and JavaScript. For example, the 2nd chapter of the example has control style.width. There is also the control of the style.display, whether it is necessary to completely separate this does require detailed analysis of the details, just assume that the total disregard of this point. Let it evolve. In the event of failure, we first go to find CSS, exhausted when you will go to JavaScript to find style problems, which will give maintenance staff dug a very big pit, a man must be kind!

3.1.2 Photo Display function design

163 is one of the earliest companies to provide a registration function, the user group is very large, the registration will find that the basic features of the photo display, such as the following:

• With large and thumbnail images
• There is a previous diagram and the next diagram switch
• There is a keyboard control to display the previous picture and the next picture
• There is a code 3 layer separation that shows the previous and next set of features in the code aspect.

In terms of code, consider code 3-layer separation.

Let's introduce here today, there are small white students studying together. Welcome powder me.

Most soldiers attack the actual type of JavaScript

The basics part of JavaScript's real-world book helps readers step into the JavaScript domain. The jquery section helps readers get to work as they please, HTML5 part of the time bus. node. JS allows readers to stand at the forefront of technology. The author's goal is to strive to write the most understanding of human nature of the most technical JavaScript book.

JavaScript, JQuery, HTML5, node. js instances Daquan-Reading notes 1