[Original] Web Front-end development practices-JavaScript part of Reading Notes

The concept of JavaScript layering

In order to make the code clearer, reduce redundancy, and improve code reuse rate, it is the same as css layering:

Base Layer: the lowest-end interface provided for the common layer and page layer. Two Responsibilities: 1. provide unified interfaces for js differences between different browsers; 2: extends the interfaces provided by the underlying js language.

Common layer: Provides reusable components and has nothing to do with specific functions on the page. The common layer function is used for the page layer.

Page layer: The top layer that meets the functional requirements of each page.

Good Programming habits: namespace and anonymous Functions

Avoid JS conflicts, avoid global variables flooding, and divide modules.

Generating a namespace is a common function that can be encapsulated as a function.

Var GLOBAL ={}; GLOBAL. namespace = function (str) {var arr = str. split (". "), o = GLOBAL; for (var I = (arr [0] =" GLOBAL ")? 1: 0; I <arr. length; I ++) {o [arr [I] = o [arr [I] |{}; o = o [arr [I] ;}} // call GLOBAL. namespace (". DOG "); GLOABL. a. DOG. name = "wangcai ";

Give the program an entry

It is particularly important that the code is directly readable.

CSS is placed in the header, JS is placed at the end

As we all know, once again, when the browser loads a webpage and loads it to JS, the page will be blank because there are many scripts and html code has not been loaded, the script blocks html loading and is not easy to load. Sometimes you will find that these webpage elements do not have Styles, so a good habit is that CSS is placed in the page header, JS is placed at the end of the page (first loading css, then loading html, and then loading js .) in this way, the interface can be displayed to the user in a timely manner, reducing the page blank time.

Add Comment

Forming a regular code comment style can greatly help code maintenance and modification.

• Comments for public components and plug-ins, which must be added to the file header

/**

* File usage instructions

* Author date

* Production date

**/

• Large Module Comment Method

// ======================================

// Code usage

// ======================================

• Small comment

// Code Description

Comment exclusive line, do not add comment in the same line after code

Programming Skills

• Elasticity to adapt to changes
• Reusability to avoid side effects
• You can customize parameters by passing parameters. You can use hash objects to pass parameters.
• Control the point of this keyword
• Reserved callback excuse
• DRY principle: don't repeat yourself. The same code is only written once, and then referenced in multiple places to improve the reuse rate, reduce the amount of code, and improve the maintainability of the Code.
  

Series knowledge links

[Original] Web Front-end development practices-CSS part of Reading Notes

[Original] Web Front-end development practices-Reading Notes HTML section

[Original] JavaScript Knowledge series