Home >Web Front-end >JS Tutorial >How to use javascript correctly for our program development_javascript skills
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
object(object)
Use object literals to create objects (literal)
//bad var item = new Object(); //good var item = {};
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 };
array(array)
Also use literal methods to create arrays
//bad var items = new Array(); //good var items = [];
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');
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(); //这里要注意了.这个我还真不知道...
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;
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.';
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>'; }
Functions
//匿名函数表达式.. var anonymous = function(){ return true; }; // 命名函数表达式. var named = function named(){ return true; }; //即时引用函数 (function(){ console.log('Welcome to the Internet. Please follow me.'); })();
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. }
Properties
Use dot syntax to access properties.
var luke = { jedi: true, age: 28 }; //bad var isJedi = luke['jedi']; //good var isJedi = luck.jedi;
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');