Examples of JavaScript, jQuery, HTML5, and Node. js-Reading Notes 1, jquerynode. js

Examples of JavaScript, jQuery, HTML5, and Node. js-Reading Notes 1, jquerynode. js

There are many technologies and many examples, so you have to learn and practice them slowly !! The book I learned now is 【JavaScriptPractice ---- JavaScript,JQuery,HTML5,Node. jsInstance Overview]

Chapter 2 photo display using JavaScript

There are two ways to build a software design: one is to make the software very simple so that it can obviously not find the defect; the other is to make it very complicated so that it can not find obvious defects.

--C. A. R. Hoare, Winner of the 1980 Turing Award

In this era of selfies and narcissism, photos are to be displayed. In the previous sections, we have explained how to bind events. This chapter mainly uses the previous knowledge to present photos.

Main content of this chapter:

• Photo Loading
• Mouse response
• Keyboard response

3.1 Function Design

 

It may need to be modified repeatedly during function design. What is the standard? Listen to the boss or the user? Although this is an era in which customers are God, there are still some design principles to follow, because sometimes "God" also makes mistakes, and more often "God" is changeable.

(1) Avoid duplication principle (DRY, Don't repeat yourself). The most basic principle of programming is to avoid duplication. Another sentence is to improve the code reuse rate.

(2) the simple principle (Keep ItSimple and Stupid) is one of the best user experiences. For example, Apple simply beats everything. In addition, simple code takes less time, has fewer vulnerabilities, and is easy to modify.

(3) The low coupling principle (MinimizeCoupling), that is, the use and modification of this part of the code affects the code of other parts as little as possible. Otherwise, no one would like to see the entire tragedy.

(4) Don't let me think (Don't make me think). The Code is not only written to machines, but also to people, therefore, the written code must be easy to read, easy to understand, and easy to maintain. "If a maintainer no longer maintains your code,

It is very likely that he has the urge to kill you ."

(5) Single Responsibility Principle (Single Responsibility). The function of a code should ensure that only a Single and clear task is executed. Otherwise, modification will increase the complexity of associated testing.

(6) Maximize Cohesion, and try to put code with similar functions in the same part.

The term "class" that is often heard in programs is called "Object-to-object aggregation". Classes are similar codes for "class aggregation.

(7) avoid premature Optimization (AvoidPremature Optimization). Now there are "perfectionists" everywhere in society. If the code is not as slow as imagined, don't "perfect" it, otherwise, it will take more cost, or time or energy or money.

 

3.1.1 layered relationship between HTML, CSS, and JavaScript

According to chapter 1, HTML was the first to come out, while CSS and JavaScript appeared later. The actual relationship between them is shown in 3-1.

 

Figure 3-1 UI Layered Link Structure

It seems that we should consider whether the previous example has a space for "Reconstruction? The answer is yes. When I wrote chapter 2nd, the editor of this book said with great comments: "Why is this code so long? Can it be split into several parts? „„". One of the reasons for refactoring is whether the code is easy to read. If you take it into consideration at the beginning of the design, it will make the maintenance work more convenient in the future. If you find the HTML code, you can directly find the html file, and if you find the JavaScript code, you can directly find the js file, if you find the CSS code, you can directly find the css file.

Separating JavaScript from HTML is a required task for the front-end. JavaScript was born to make HTML richer, not more messy. Mixing together causes the bug tracking tool to be difficult to debug. As the division of labor is further subdivided, HTML writers are not necessarily responsible for writing JavaScript. CSS and HTML are also separated, but most of them are tasks of web designers or front-end reconstruction engineers. In addition, it is very challenging to keep the clear separation between CSS and JavaScript. For example, the example in Chapter 2nd has a control style. width, and control style. whether or not to completely separate display requires specific analysis. However, if you do not pay attention to this, let it develop. If something goes wrong, you should first look for CSS, when I am exhausted, I will go to JavaScript to check for style issues. This will make a big pitfall for the maintenance staff and be honest!

 

3.1.2 Design of the photo display function

163 is one of the earliest companies in China that provided album functions. There are a large number of album users. You can refer to its album to find that the basic functions of photo display are as follows:

• Large image and thumbnail
• Switch between the previous graph and the next graph
• Display the previous and next images with a keyboard control
• There are functions that show the previous group and the next group. In terms of code, consider code Layer 3 separation.

For code, consider code layer-3 separation.

Let's introduce it to you today. I am welcome to join me for some tips.

The most combat JavaScript

The basic knowledge of JavaScript practice helps readers quickly step into the JavaScript field, jQuery helps readers to work freely, and HTML5 helps readers get on the bus of the times, Node. JS allows readers to stand at the forefront of technology. My goal is to write a JavaScript book that understands human nature and technology best.

Use nodejs to run html5

Html5 has nothing to do with node. html5 is supported by browsers.
 
Confused, I have learned javascript and css, followed by jQuery or HTML5 <canvas>. Daniel answers questions from younger brother.

Learn jQuery first. HTML5 currently has compatibility issues, and graphics are generally made using SVG or Flash.