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

A lot of technology, many examples, had to slowly learn, slowly practice!! Now the 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 simple that it is obvious that it cannot be found, and the other is to make it so complex that it cannot find 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, and this chapter mainly uses the knowledge of the previous section to do a photo presentation function.

The main contents of this chapter:

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

3.1 Functional Design

The function design may need to revise repeatedly, what is the standard? Listen to the boss or listen to the user? Although this is a customer is God's time, but there are still some design principles to follow, because sometimes "God" can also make mistakes, more Time "God" is fickle.

(1) Avoid duplication principle (Dry,don ' t repeat yourself), the most basic principle of programming is to avoid duplication, another word is called increase code reuse rate.

(2) Simple principle (Keep itsimple and Stupid), simple is one of the user's best experience, like Apple is simply defeated everything. And simple code takes less time, has fewer vulnerabilities, and is easy to modify.

(3) The principle of low coupling (minimizecoupling), that is, the use and modification of this part of the code to affect 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 written not just for machines, but for people, so the code you write must be easy to read and easy to understand, and ultimately easy to maintain. "If a maintainer no longer continues to maintain your code,

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

(5) Single Responsibility Principle, a function of a code, should ensure that only a single clear implementation of the task, or once modified will increase 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", which is similar to the code for "Clustering".

(7) Avoid premature optimization (avoidpremature optimization), now the Society everywhere has "perfectionist", if the code runs without imagination slow, do not go "perfect" it, otherwise it will cost more, or time or energy or money.

3.1.1 Hierarchical relationships of HTML, CSS, and JavaScript

In the 1th chapter, HTML is the earliest, and CSS and JavaScript appear later. They should essentially have a relationship of 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, I wrote to the 2nd chapter, the editor of the book is very commented: "Why this code so long?" Can you split it into pieces??? ". One reason for refactoring is that code is easy to read. If at the beginning of the design to consider, this will make later maintenance work relatively convenient, find HTML code directly find HTML file, find JavaScript code directly find JS file, find CSS code directly 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 task for web designers or front-end refactoring engineers. In addition to maintaining a clear separation between CSS and JavaScript is very challenging, such as the 2nd chapter of the example has control style.width, and control style.display, whether it is necessary to completely separate this does require specific analysis of the situation, but if you do not pay attention to this point, Let its development, once the problem, we first go to find CSS, exhausted when you will go to JavaScript to find style problems, this will give maintenance staff dug a big pit, a man must be kind!

3.1.2 Photo Display function design

163 is one of the earliest companies to provide photo album function, album user group is very large, reference to its album will find that the basic features of the photo show are as follows:

• 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.

Today to introduce here, there is a study of the small white, welcome powder me.

The most soldier assault combat type JavaScript

The basic knowledge part of the JavaScript Combat book helps readers quickly step into the JavaScript domain, and the jquery section helps readers to work as they please, HTML5 some of the time-based shuttles, and 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