JavaScript basic coding patterns

1. Variable definition
//General writing method
var a = 0;
var b = 1;
var c = 'xxx';

//Recommended writing method
var a = 0,
b = 1,
c = 'xxx';

2. Try to use literals

//General writing
var obj = new Object();
      obj.a = 'aa';
        obj.b = 'bb';
      obj.c = 'cc';

var arr = new Array();

// Recommended writing method
var obj = {
            a: 'aa',
              b: 'bb'
    };

var arr = [];

function getXX(index){
Return ['aa', 'bb', 'xx', 55, 'xxb'](index);
}

function getMessage(code){
return {
404: 'xxx ',
500: 'xxx'
}[code];
}
　
3. Regular literal

var regex = new RegExp('someting');

// Only use the constructor when the regular expression may change Function
var cls = 'someclass',
regex = new RegExp(cls + '\s*', 'ig'); // only for dynamic regexs

// Use literals in other cases
var regex = /someting /ig;
　
4. Set default values ​​(personal feeling typeof)

// Default values
var arg = arg || 'default'; // fallback

document.getElementById('test').onclick = function( event){
var event = event || window.event;
};

function getX(a){
return a+1 || 'default';
}

function getY(b ){
Return typeof b !== "undefined" ? b : 'default';
}

5. Conditional judgment

// Conditions
answer = obj && obj.xx && obj.xx ... if(!obj){
// do something
}

// Use congruent judgment
if(a === b){
// do something
}

// Try not to detect the browser, only detect Does the feature to be used support
if(document.getElementById){
// ability detect
}
　
6. Ternary operator

// Ternary
check ? value1 : value2;

// Ternary operator update Simplevar Foo = (Condition)? Value1: Value2;
Function xx () {
IF (Condition) {
Return value1;
} Else {
Return value2; unction xx () {
return (condition) ? value1 : value2;

}

// Formatting ternary operator
foo = predicate ? "one" :
                                    "default"; Iteration value

// Insert iteration
var name = value[i];
i++;

// Directly insert the iteration value
var name = value[i++];
　
8. DOM operation

// DOM Operation
el.style.display = 'none'; // offline
// operation
el.style.display = 'block';

// It is better to use document fragmentation www.2cto.com
var fragment = document. createDocumentFragment(); // better

el.innerHTML = ''; // fast remove all children, but may leaks memory
el.innerHTML = 'xxx'; // ok, use it!

// Handle NodeList with care
var images = document.getElementsByTagName('img'); // be careful! dynamic list
　
9. Event proxy

// Use event proxy to listen for events on outer elements
document.getElementById('list ').onclick = function(evt){
var evt = evt || window.event,

target = evt.target || evt.srcElement;

if(target.id === 'btn1'){
/ / do something
}
}
　
10. Namespace

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

MYAPP.namespace ('event');
　
11. Chaining operation

// 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

// Function
(function(){
var _private = 'cant see me';

})();

(function($){
$('#xxb').click(function (){ });
})(jQuery);
　
13. Configure Object

// Configure Object
function foo(id, conf, null, null){
// do somethin
}

foo(' bar', {
key1 : 1,
key2 : 2
});
　
14. Type Conversion

// Type Conversion
+'010' === 10;
Number('010') === 10 ;
parseInt('010', 10) === 10;
10 + '' === '10';

+new Date() // timestamp
+new Date;
　
15. Extended prototype

// Only used 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. Loop optimization

// 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 new features as much as possible

Array.forEach();
getElementsByClassName();
querySlectorAll();

// First check whether the new feature is supported and it can be used Just use
if(document.getElementsByClassName){
// use
}else{
// your implementations
}
　
18. Lazy loading

// Only judge once, no need to judge when calling the function again
function lazyDef () {
If (Condition1) {
lazydef = function () {};
} else if (condition2) {
lazyDef = Function () {};
}



19. Private ownership Functions and public methods

var MYAPP = {};

MYAPP.dom = (function(){
var _setStyle = function(el, prop, value){
        console.log('setStyle');
  };
Return {
SetStyle: _SetStyle
};
});

// When myApp.DOM.SETSTYLE is accidentally written, _SetStyle can still use
200. Debug Pass in multiple parameters and finally output the spliced ​​string
console.log('xx','xx','...');
console.dir(someObj);

console.dirxml(someDom);

console.time('timer');
console.warn('xxx');

// Encapsulation can ensure that accidental release will not cause problems, but there may be problems with the line number when reporting an error
function msg(msg) {
if(console && console.log){
console.log(msg); // wrong line number
}
}