Basic JavaScript coding mode summary _ basic knowledge

The patterns I have compiled in this article include some common methods or tips when writing JavaScript code. They can help beginners in JavaScript to quickly improve the code quality. No matter how programs are written, they will be exposed to the encoding style, design Patterns and other concepts. The coding style generally focuses on writing standards, while the design pattern tends to be in the program architecture design. The "Patterns" I have compiled in this article include some common methods or tips for writing JavaScript code, which can help beginners who are new to JavaScript to quickly improve the code quality. Of course, before that, we must first ensure the standard writing habits. On this basis, we can apply the knowledge points introduced in this article to code writing, which can greatly improve the code quality.
The following are some of my points. There is no logic order, and I want to write where I want to go. I would like to add some points to my point.
1. variable definition

The Code is as follows:

// General statement
Var a = 0;
Var B = 1;
Var c = 'xxx ';
// Recommended statement
Var a = 0,
B = 1,
C = 'xxx ';

2. Try to use the literal

The Code is as follows:

// General statement
Var obj = new Object ();
Obj. a = 'a ';
Obj. B = 'bb ';
Obj. c = 'cc ';
Var arr = new Array ();
// Recommended statement
Var obj = {
A: 'A ',
B: 'bb'
};
Var arr = [];
Function getXX (index ){
Return ['A', 'bb ', 'XX', 55, 'xxb'] (index );
}
Function getMessage (code ){
Return {
404: 'xxx ',
500: 'xxx'
} [Code];
}

3. Regular Expressions

The Code is as follows:

Var regex = new RegExp ('someting ');
// Use the constructor only when the regular expression may change
Var cls = 'someclass ',
Regex = new RegExp (cls + '\ s *', 'ig '); // only for dynamic regexs
// Use the literal in other cases
Var regex =/someting/ig;

4. Set the default value

The Code is as follows:

// Default values
Var arg = arg | 'default'; // fallback
Document. getElementById ('test'). onclick = function (event ){
Var event = event | window. event;
};
Function getX (){
Return a + 1 | 'default ';
}

5. Condition judgment

The Code is as follows:

// Conditions
Answer = obj & obj. xx & obj. xx. xxx;
// Continuous judgment
If (obj & obj. xx & obj. xx. xxx ){
// Do something
}
If (obj. xx ){
// Do something
}
If (! Obj ){
// Do something
}
// Use full-level judgment
If (a = B ){
// Do something
}
// Try not to check the browser. Only check whether the features to be used are supported.
If (document. getElementById ){
// Ability detect
}

6. Ternary Operators

The Code is as follows:

// Ternary
Check? Value1: value2;
// The ternary operators are more concise.
Var foo = (condition )? Value1: value2;
Function xx (){
If (condition ){
Return value1;
} Else {
Return value2;
}
}
Function xx (){
Return (condition )? Value1: value2;
}
// Format the ternary Operator
Foo = predicate? "One ":
Predicate? "Two ":
"Default"; // format

7. Insert iteration values

The Code is as follows:

// Insert iteration
Var name = value [I];
I ++;
// Insert the iteration value directly
Var name = value [I ++];

8. DOM operations

The Code is as follows:

// DOM Operation
El. style. display = 'none'; // offline
// Operation
El. style. display = 'block ';
// Use document fragments for better operations
Var fragment = document. createDocumentFragment (); // better
El. innerHTML = ''; // fast remove all children, but may leaks memory
El. innerHTML = 'xxx'; // OK, use it!
// Handle NodeList with caution
Var images = document. getElementsByTagName ('img '); // be careful! Dynamic list

9. Event proxy

The Code is as follows:

// Use event proxy to listen for events on the outer Element
Document. getElementById ('LIST'). onclick = function (evt ){
Var evt = evt | window. event,
Target = evt.tar get | evt. srcElement;
If (target. id = 'dn1 '){
// Do something
}
}

10. namespace

The Code is as follows:

// An Object as a Namespace
Var MYAPP = {};
MYAPP. dom. get = function (id ){};
MYAPP.style.css = function (el, style ){};
MYAPP. namespace ('event ');

11. Chain Operations

The Code is as follows:

// Chaining operation: return this
Function setValue (el, value ){
El. value = value;
Return this;
}
Var obj = new MYAPP. dom. Element ('span ');
Obj. setText ('hello ')
. SetStyle ('color', 'red ')
. SetStyle ('font', 'verdana ');

12. Private Scope

The Code is as follows:

// Function
(Function (){
Var _ private = 'cant see Me ';
})();
(Function ($ ){
$ ('# Xxb'). click (function (){});
}) (JQuery );

13. Configuration object

The Code is as follows:

// Configure Object
Function foo (id, conf, null, null ){
// Do somethin
}
Foo ('bar ',{
Key1: 1,
Key2: 2
});

14. type conversion

The Code is as follows:

// Type Conversion
+ '010 '= 10;
Number ('010 ') = 10;
ParseInt ('010 ', 10) = 10;
10 + ''= '10 ';
+ New Date () // timestamp
+ New Date;

15. Extended prototype

The Code is as follows:

// It is used only when forward compatibility is required. In other cases, it is not recommended to extend the prototype object.
Array. prototype. forEach = function (){
// Only for forward compatible
};

16. Cyclic Optimization

The Code is as follows:

// Cache
For (var I = 0, j = document. getElementsByTagName ('A'). length; i0; I --){
// Maybe faster
}
// It is said to be the fastest
While (I --){
// Maybe fastest
}

17. Try to use the new feature

The Code is as follows:

Array. forEach ();
GetElementsByClassName ();
QuerySlectorAll ();
// First, check whether new features are supported.
If (document. getElementsByClassName ){
// Use
} Else {
// Your implementations
}

18. inert Loading

The Code is as follows:

// Only judge once. You do not need to judge if you call this function again
Function lazyDef (){
If (condition1 ){
LazyDef = function (){};
} Else if (condition2 ){
LazyDef = function (){};
}
Return lazyDef ();
}

19. Private functions and public methods

The Code is as follows:

Var MYAPP = {};
MYAPP. dom = (function (){
Var _ setStyle = function (el, prop, value ){
Console. log ('setstyle ');
};
Return {
SetStyle: _ setStyle
};
})();
// When MYAPP. dom. setStyle is accidentally overwritten, _ setStyle is still available internally

20. debugging

The Code is as follows:

// Try to use it. You can input multiple parameters and output the concatenated string.
Console. log ('XX', 'XX ','...');
Console. dir (someObj );
Console. dirxml (someDom );
Console. time ('timer ');
Console. warn ('xxx ');
// Encapsulation ensures that accidental release will not cause problems, but the row number may be faulty when an error is reported.
Function msg (msg ){
If (console & console. log ){
Console. log (msg); // wrong line number
}
}

This is basically the only thing that comes to mind at the moment. You are welcome to discuss it further :)