Home > Web Front-end > JS Tutorial > How to use javascript correctly for our program development_javascript skills

How to use javascript correctly for our program development_javascript skills

WBOY
Release: 2016-05-16 16:43:21
Original
1001 people have browsed it

Today I found an article on github about how to use javascript correctly to develop our programs. I shamelessly came up with an original one...it's a scam. Let's share it with everyone.
A mostly reasonable approach to Javascript.
Types //Type
Objects //Object
Arrays //Array
Strings //String
Functions //Function
Properties //Properties
Variables //Variables
Hoisting //Variable hoisting
Conditional Expressions & Equality //Conditional expressions and equations.
Blocks //Block code
Comments //Comments
Whitespace //space
Commas //comma
Semicolons //Semicolon
Type Casting & Coercion //Type conversion
Naming Conventions //Naming rules
Accessors //Access
Constructors //Constructor
Events //Time
Modules //Model
jQuery //
ECMAScript 5 Compatibility //ECMA 5 compatible
Testing //Testing
Performance //Performance
Resources //Resources
In the Wild
Translation
The JavaScript Style Guide Guide
Contributors
License

Types
Primitive type: When accessing a primitive type, the content of the primitive type is actually accessed directly.
string
number
boolean
null
undefined
var foo = 1,
bar = foo;
bar = 9;
console.log(foo,bar); //=> 1,9

Complex type: When you access a complex type data type, you actually access the value of the variable by reference.
object
array
function

var foo = [1,2];
bar = foo;
bar[0] = 9;
console.log(foo[0],bar[0]); // => 9,9
Copy after login

object(object)
Use object literals to create objects (literal)

//bad
var item = new Object();
//good
var item = {};
Copy after login

Do not use reserved keywords as object property names. This will not work under IE8.

//bad
var superman = {
default: {clark: 'kent'},
private: true
};
//good
var superman = {
defaults: {clark: 'kent'},
hidden: true
};
Copy after login

array(array)
Also use literal methods to create arrays

//bad
var items = new Array();
//good
var items = [];
Copy after login

If you don’t know the length of the array, use Array’s built-in method push to perform the insertion operation

var someStack = [];
//bad
someStack[someStack.length] = 'vein';
//good
someStack.push('vein');
Copy after login

When you want to copy an array, use array.slice

var len = items.length, //指的就是上面的内容...
itemCopy = [],
i;
//bad
for(i = 0; i < len ; ++i){
itemCopy[i] = items[i];
}
//good
itemCopy = items.slice(); //这里要注意了.这个我还真不知道...
Copy after login

Strings string
Use single quotes to surround the string...//I didn't find a suitable explanation about performance here. I personally like to use it this way, (wearing less is better than wearing more, right? ..you know..)

//bad
var name = "Bob Parr";
//good
var name = 'Bob Parr';
//bad
var fullName = "Bob " + this.lastName;
//good
var fullName = 'Bob ' + this.lastName;
Copy after login

When the string is longer than 80 characters, you need to use string concatenation to write on multiple lines. Note that if used excessively, concatenating strings will affect performance

// bad
var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
// bad
var errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';
// good
var errorMessage = 'This is a super long error that was thrown because ' +
'of Batman. When you stop to think about how Batman had anything to do ' +
'with this, you would get nowhere fast.';
Copy after login

If it is planned to create an array, as shown below. Using Array.join will have better results..

var items,
messages,
length,
i;
messages = [{
stat: 'success',
message: ' This one worked'
},{
stat: 'success',
message: ' This one worked'
},{
stat: 'success',
message: ' This one worked'
}
];
length = messages.length;
//bad
function inbox(messages){
items = '<ul>';
for (i = 0; i < length; i++) {
items += '<li>' + messages[i].message + '</li>';
}
return items + '</ul>';
}
//good
function inbox(messages){
items = [];
for( i = 0; i < length ; i++){
items[i] = messages[i].message;
}
return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
}
Copy after login

Functions

//匿名函数表达式..
var anonymous = function(){
return true;
};
// 命名函数表达式.
var named = function named(){
return true;
};
//即时引用函数
(function(){
console.log('Welcome to the Internet. Please follow me.');
})();
Copy after login

Never define functions in non-function block code (if, while). Correspondingly, assign functions to external variable names in the middle of the code block..

//bad
if(currentUser){
function test(){
console.log('Nope.');
}
}
//good
var test;
if(currentUser){
test = function(){
console.log('Yup'); 
}; //be careful with the semi-colon.
}
Copy after login

Properties
Use dot syntax to access properties.

var luke = {
jedi: true,
age: 28
};
//bad
var isJedi = luke['jedi'];
//good
var isJedi = luck.jedi;
Copy after login

When using variables to access object properties, use [] square brackets to access

var luke = {
jedi: true,
age: 28
};
function getProp(prop) {
return luke[prop];
}
var isJedi = getProp('jedi');
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template