優(yōu)雅的代碼：符合規(guī)范，代碼合理、易于閱讀和維護(hù)。
一、備注
1.文檔注釋：
簡單描述當(dāng)前js文件作用。是頁面js邏輯處理，還是公共的方法等。
2.變量注釋：
注明變量是用來做什么的。
3.函數(shù)注釋：
參數(shù)注釋，返回參數(shù)注釋。
// utils.js
// 公共方法js
/**
* @func
* @desc 數(shù)組求和
* @param {array} arr - 數(shù)字?jǐn)?shù)組
* @return {number} 返回?cái)?shù)組合
*/
const arraySum = (arr) =>{
return arr.reduce(function(prev,cur,index,array){
return prev + cur
});
}
...
export default {arraySum}
二、塊級(jí)作用域
1. let 取代 var
let var 語義相同，let 可以取代var，而且let沒有副作用。
if (true) {
let x = 'hello';
}
上面代碼如果用var替代let，實(shí)際上就聲明了x全局變量，這顯然不是本意。變量應(yīng)該只在其聲明的代碼塊內(nèi)有效，var命令做不到這一點(diǎn)。
if (true) {
console.log(x); // ReferenceError
let x = 'hello';
}
上面代碼如果使用var替代let，console.log那一行就不會(huì)報(bào)錯(cuò)，而是會(huì)輸出undefined，因?yàn)樽兞柯暶魈嵘酱a塊的頭部。這違反了變量先聲明后使用的原則。
2.全局常量和線程安全
在let和const之間，建議優(yōu)先使用const，尤其是在全局環(huán)境，不應(yīng)該設(shè)置變量，只應(yīng)設(shè)置常量。
const優(yōu)于let有幾個(gè)原因。一個(gè)是const可以提醒閱讀程序的人，這個(gè)變量不應(yīng)該改變；另一個(gè)是const比較符合函數(shù)式編程思想，運(yùn)算不改變值，只是新建值，而且這樣也有利于將來的分布式運(yùn)算；最后一個(gè)原因是 JavaScript 編譯器會(huì)對const進(jìn)行優(yōu)化，所以多使用const，有利于提高程序的運(yùn)行效率，也就是說let和const的本質(zhì)區(qū)別，其實(shí)是編譯器內(nèi)部的處理不同。
// bad
var a = 1, b = 2, c = 3;
// good
const a = 1;
const b = 2;
const c = 3;
// best
const [a, b, c] = [1, 2, 3];
const聲明常量還有兩個(gè)好處，一是閱讀代碼的人立刻會(huì)意識(shí)到不應(yīng)該修改這個(gè)值，二是防止了無意間修改變量值所導(dǎo)致的錯(cuò)誤。
所有的函數(shù)都應(yīng)該設(shè)置為常量。
長遠(yuǎn)來看，JavaScript 可能會(huì)有多線程的實(shí)現(xiàn)（比如 Intel 公司的 River Trail 那一類的項(xiàng)目），這時(shí)let表示的變量，只應(yīng)出現(xiàn)在單線程運(yùn)行的代碼中，不能是多線程共享的，這樣有利于保證線程安全。
三、字符串
靜態(tài)字符串一律使用單引號(hào)或反引號(hào)，不使用雙引號(hào)。動(dòng)態(tài)字符串使用反引號(hào)。
// bad
const a = "foobar";
const b = 'foo' + a + 'bar';
// acceptable
const c = `foobar`;
// good
const a = 'foobar';
const b = `foo${a}bar`;
四、解構(gòu)賦值
使用數(shù)組成員對變量賦值時(shí)，優(yōu)先使用解構(gòu)賦值。
const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;
函數(shù)的參數(shù)如果是對象的成員，優(yōu)先使用解構(gòu)賦值。
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
}
// good
function getFullName(obj) {
const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {
}
如果函數(shù)返回多個(gè)值，優(yōu)先使用對象的解構(gòu)賦值，而不是數(shù)組的解構(gòu)賦值。這樣便于以后添加返回值，以及更改返回值的順序。
// bad
function processInput(input) {
return [left, right, top, bottom];
}
// good
function processInput(input) {
return { left, right, top, bottom };
}
const { left, right } = processInput(input);
五、對象
單行定義的對象，最后一個(gè)成員不以逗號(hào)結(jié)尾。多行定義的對象，最后一個(gè)成員以逗號(hào)結(jié)尾。
// bad
const a = { k1: v1, k2: v2, };
const b = {
k1: v1,
k2: v2
};
// good
const a = { k1: v1, k2: v2 };
const b = {
k1: v1,
k2: v2,
};
對象盡量靜態(tài)化，一旦定義，就不得隨意添加新的屬性。如果添加屬性不可避免，要使用Object.assign方法。
// bad
const a = {};
a.x = 3;
// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });
// good
const a = { x: null };
a.x = 3;
如果對象的屬性名是動(dòng)態(tài)的，可以在創(chuàng)造對象的時(shí)候，使用屬性表達(dá)式定義。
// bad
const obj = {
id: 5,
name: 'San Francisco',
};
obj[getKey('enabled')] = true;
// good
const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true,
};
上面代碼中，對象obj的最后一個(gè)屬性名，需要計(jì)算得到。這時(shí)最好采用屬性表達(dá)式，在新建obj的時(shí)候，將該屬性與其他屬性定義在一起。這樣一來，所有屬性就在一個(gè)地方定義了。
另外，對象的屬性和方法，盡量采用簡潔表達(dá)法，這樣易于描述和書寫。
var ref = 'some value';
// bad
const atom = {
ref: ref,
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
ref,
value: 1,
addValue(value) {
return atom.value + value;
},
};
六、數(shù)組
使用擴(kuò)展運(yùn)算符（...）拷貝數(shù)組。
// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];
使用 Array.from 方法，將類似數(shù)組的對象轉(zhuǎn)為數(shù)組。
const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);
七、函數(shù)
立即執(zhí)行函數(shù)可以寫成箭頭函數(shù)的形式。
(() => {
console.log('Welcome to the Internet.');
})();
那些使用匿名函數(shù)當(dāng)作參數(shù)的場合，盡量用箭頭函數(shù)代替。因?yàn)檫@樣更簡潔，而且綁定了 this。
// bad
[1, 2, 3].map(function (x) {
return x * x;
});
// good
[1, 2, 3].map((x) => {
return x * x;
});
// best
[1, 2, 3].map(x => x * x);
箭頭函數(shù)取代Function.prototype.bind，不應(yīng)再用 self/_this/that 綁定 this。
// bad
const self = this;
const boundMethod = function(...params) {
return method.apply(self, params);
}
// acceptable
const boundMethod = method.bind(this);
// best
const boundMethod = (...params) => method.apply(this, params);
簡單的、單行的、不會(huì)復(fù)用的函數(shù)，建議采用箭頭函數(shù)。如果函數(shù)體較為復(fù)雜，行數(shù)較多，還是應(yīng)該采用傳統(tǒng)的函數(shù)寫法。
所有配置項(xiàng)都應(yīng)該集中在一個(gè)對象，放在最后一個(gè)參數(shù)，布爾值不可以直接作為參數(shù)。
// bad
function divide(a, b, option = false ) {
}
// good
function divide(a, b, { option = false } = {}) {
}
不要在函數(shù)體內(nèi)使用 arguments 變量，使用 rest 運(yùn)算符（...）代替。因?yàn)?rest 運(yùn)算符顯式表明你想要獲取參數(shù)，而且 arguments 是一個(gè)類似數(shù)組的對象，而 rest 運(yùn)算符可以提供一個(gè)真正的數(shù)組。
// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}
使用默認(rèn)值語法設(shè)置函數(shù)參數(shù)的默認(rèn)值。
// bad
function handleThings(opts) {
opts = opts || {};
}
// good
function handleThings(opts = {}) {
// ...
}
八、map 結(jié)構(gòu)
注意區(qū)分 Object 和 Map，只有模擬現(xiàn)實(shí)世界的實(shí)體對象時(shí)，才使用 Object。如果只是需要key: value的數(shù)據(jù)結(jié)構(gòu)，使用 Map 結(jié)構(gòu)。因?yàn)?Map 有內(nèi)建的遍歷機(jī)制。
let map = new Map(arr);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
九、Class
總是用 Class，取代需要 prototype 的操作。因?yàn)?Class 的寫法更簡潔，更易于理解。
// bad
function Queue(contents = []) {
this._queue = [...contents];
}
Queue.prototype.pop = function() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
// good
class Queue {
constructor(contents = []) {
this._queue = [...contents];
}
pop() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}
使用extends實(shí)現(xiàn)繼承，因?yàn)檫@樣更簡單，不會(huì)有破壞instanceof運(yùn)算的危險(xiǎn)。
// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
return this._queue[0];
}
// good
class PeekableQueue extends Queue {
peek() {
return this._queue[0];
}
}
十、模塊
首先，Module 語法是 JavaScript 模塊的標(biāo)準(zhǔn)寫法，堅(jiān)持使用這種寫法。使用import取代require。
// bad
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// good
import { func1, func2 } from 'moduleA';
使用export取代module.exports。
// commonJS的寫法
var React = require('react');
var Breadcrumbs = React.createClass({
render() {
return <nav />;
}
});
module.exports = Breadcrumbs;
// ES6的寫法
import React from 'react';
class Breadcrumbs extends React.Component {
render() {
return <nav />;
}
};
export default Breadcrumbs;
如果模塊只有一個(gè)輸出值，就使用export default，如果模塊有多個(gè)輸出值，就不使用export default，export default與普通的export不要同時(shí)使用。
不要在模塊輸入中使用通配符。因?yàn)檫@樣可以確保你的模塊之中，有一個(gè)默認(rèn)輸出（export default）。
// bad
import * as myObject from './importModule';
// good
import myObject from './importModule';
如果模塊默認(rèn)輸出一個(gè)函數(shù)，函數(shù)名的首字母應(yīng)該小寫。
function makeStyleGuide() {
}
export default makeStyleGuide;
如果模塊默認(rèn)輸出一個(gè)對象，對象名的首字母應(yīng)該大寫。
const StyleGuide = {
es6: {
}
};
export default StyleGuide;
十一、變量相關(guān)
語義化命名
// bad
let fName = 'jackie'; // 雖然用了駝峰，但是簡寫嚴(yán)重。無法直觀看出變量的含義
let lName = 'willen'; // 這個(gè)問題和上面的一樣
// good
let firstName = 'jackie'; // 語義化命名，不能過于縮寫
let lastName = 'willen';
不使用的變量及時(shí)刪除掉
// bad
let kpi = 4; // 定義好了之后再也沒用過
function example() {
var a = 1;
var b = 2;
var c = a+b;
var d = c+1;
var e = d+a;
return e;
}
// good
let kpi = 4; // 不使用的變量及時(shí)刪除掉
function example() { // 數(shù)據(jù)只使用一次或不使用就無需裝到變量中
var a = 1;
var b = 2;
return 2*a+b+1;
}
特定的變量
// bad
if (value.length < 8) { // 8 是啥。不易閱讀理解，除非有明確的注釋
....
}
// good
const MAX_INPUT_LENGTH = 8;
if (value.length < MAX_INPUT_LENGTH) { // 一目了然，不能超過最大輸入長度
....
}
避免使用太多的全局變量
// bad
name.js
window.name = 'a';
hello.js
window.name = 'b';
time.js
window.name = 'c'; // 容易污染全局環(huán)境，多人協(xié)作開發(fā)，可能會(huì)沖突
// good 命名空間少用或使用替代方案 你可以選擇只用局部變量。通過(){}的方法。
// 如果你確實(shí)用很多的全局變量需要共享，你可以使用vuex,redux或者你自己參考flux模式寫一個(gè)也行。
變量的賦值 兜底
// bad
const MIN_NAME_LENGTH = 8;
let lastName = fullName[1];
if(lastName.length > MIN_NAME_LENGTH) { // 這樣你就給你的代碼成功的埋了一個(gè)坑，你有考慮過如果fullName = ['jackie']這樣的情況嗎？這樣程序一跑起來就爆炸。要不你試試。
....
}
// good
const MIN_NAME_LENGTH = 8;
let lastName = fullName[1] || ''; // 做好兜底，fullName[1]中取不到的時(shí)候，不至于賦值個(gè)undefined,至少還有個(gè)空字符，從根本上講，lastName的變量類型還是String，String原型鏈上的特性都能使用，不會(huì)報(bào)錯(cuò)。不會(huì)變成undefined。
if(lastName.length > MIN_NAME_LENGTH) {
....
}
// 其實(shí)在項(xiàng)目中有很多求值變量，對于每個(gè)求值變量都需要做好兜底。
let propertyValue = Object.attr || 0; // 因?yàn)镺bject.attr有可能為空，所以需要兜底。
// 但是，賦值變量就不需要兜底了。
let a = 2; // 因?yàn)橛械琢耍圆灰抵?let myName = 'Tiny'; // 因?yàn)橛械琢?，所以不要兜著?
十二、函數(shù)相關(guān)
語義化 功能性命名
返回布爾值函數(shù)應(yīng)以should/is/can/has開頭
function shouldShowFriendsList() {...}
function isEmpty() {...}
function canCreateDocuments() {...}
function hasLicense() {...}
動(dòng)作函數(shù)要以動(dòng)詞開頭
function sendEmailToUser(user) {
....
}
function geUserInfo(user) {
....
}
function setUserInfo(user) {
....
}
功能函數(shù)最好為純函數(shù)
// bad 不要讓功能函數(shù)的輸出變化無常。
function plusAbc(a, b, c) {
var c = fetch('../api');
return a+b+c;
}
// 這個(gè)函數(shù)的輸出將變化無常，因?yàn)閍pi返回的值一旦改變，同樣輸入函數(shù)的a，b,c的值，但函數(shù)返回的結(jié)果卻不一定相同。
// good
function plusAbc(a, b, c) { // 同樣輸入函數(shù)的a，b,c的值，但函數(shù)返回的結(jié)果永遠(yuǎn)相同。
return a+b+c;
}
傳參無說明
// bad
page.getSVG(api, true, false); // true和false啥意思，一目不了然
// good
page.getSVG({
imageApi: api,
includePageBackground: true, // 一目了然，知道這些true和false是啥意思
compress: false,
})
一個(gè)函數(shù)完成一個(gè)獨(dú)立的功能，不要一個(gè)函數(shù)混雜多個(gè)功能
這是軟件工程中最重要的一條規(guī)則，當(dāng)函數(shù)需要做更多的事情時(shí)，它們將會(huì)更難進(jìn)行編寫、測試、理解和組合。當(dāng)你能將一個(gè)函數(shù)抽離出只完成一個(gè)動(dòng)作，他們將能夠很容易的進(jìn)行重構(gòu)并且你的代碼將會(huì)更容易閱讀。如果你嚴(yán)格遵守本條規(guī)則，你將會(huì)領(lǐng)先于許多開發(fā)者。
// bad 函數(shù)功能混亂，一個(gè)函數(shù)包含多個(gè)功能。最后就像能以一當(dāng)百的老師傅一樣，被亂拳打死（亂拳（功能復(fù)雜函數(shù)）打死老師傅（老程序員））
function sendEmailToClients(clients) {
clients.forEach(client => {
const clientRecord = database.lookup(client)
if (clientRecord.isActive()) {
email(client)
}
})
}
// good
function sendEmailToActiveClients(clients) { //各個(gè)擊破，易于維護(hù)和復(fù)用
clients.filter(isActiveClient).forEach(email)
}
function isActiveClient(client) {
const clientRecord = database.lookup(client)
return clientRecord.isActive()
}
優(yōu)先使用函數(shù)式編程
// bad
for(i = 1; i <= 10; i++) { // 一看到for循環(huán)讓人頓生不想看的情愫
a[i] = a[i] +1;
}
// good
let b = a.map(item => ++item)
// 怎么樣，是不是很好理解，就是把a(bǔ)的值每項(xiàng)加一賦值給b就可以了?，F(xiàn)在在javascript中幾乎所有的for循環(huán)都可以被map,filter,find,some,any,forEach等函數(shù)式編程取代。
函數(shù)中過多的采用if else ..
// bad
if (a === 1) {
...
} else if (a ===2) {
...
} else if (a === 3) {
...
} else {
...
}
// good
switch(a) {
case 1:
....
case 2:
....
case 3:
....
default:
....
}
let handler = {
1: () => {....},
2: () => {....}.
3: () => {....},
default: () => {....}
}
十三、數(shù)據(jù)交互封裝
統(tǒng)一處理后端返回的 code 狀態(tài)及l(fā)oading。不需要在每次接口請求后，判斷 code 狀態(tài)。數(shù)據(jù)交互時(shí)只有在 200 成功的時(shí)候，執(zhí)行成功回調(diào)。非成功狀態(tài)，統(tǒng)一提示錯(cuò)誤信息，如果傳遞了失敗的回調(diào)，則執(zhí)行失敗的回調(diào)函數(shù)。
組件庫 element-ui axios 封裝的數(shù)據(jù)交互
import {Message, Loading } from 'element-ui'
import axios from 'axios' // axios 中文說明 https://www.kancloud.cn/yunye/axios/234845
import store from '@/store'
import router from '@/router'
let loading = null; // 請求 loading
// token 過期 清除 vuex 用戶信息 清除本地緩存
let invalidToken = () => {
Message({
message:"登錄過期，請重新登錄",
type:'error',
duration:3000,
showClose: true,
})
//清空 token 和 用戶信息
store.dispatch('setUserInfo', {})
// 清空所有緩存
window.localStorage.clear();
// 跳轉(zhuǎn)登錄頁面
router.push({
name: 'login'
})
}
// 動(dòng)態(tài)配置 axios baseURL 根據(jù)當(dāng)前url地址,配置 api 接口。 生產(chǎn)或測試
let baseURL = window.location.href.indexOf('生產(chǎn)環(huán)境域名') !== -1 ? '生產(chǎn)api地址' : '測試地址';
// 創(chuàng)建實(shí)例
const service = axios.create({
baseURL: baseURL, // 請求api地址
timeout: 30000, // 超時(shí)時(shí)間 毫秒
withCredentials: true // 表示跨域請求時(shí)是否需要使用憑證
})
// 添加請求攔截器
service.interceptors.request.use(
config => {
// loading open
loading = Loading.service({
lock: true,
text: '努力加載中...',
background: 'rgba(0,0,0,0.7)',
target: document.querySelector('.loading-area') // 設(shè)置加載動(dòng)畫區(qū)域
});
// vuex 用戶信息 token
let token = store.state.common.userInfo.token;
// 添加請求頭
if (token) {
config.headers.Authorization = token;
}
return config
},
error => {
loading.close();
Message({
message:'請求超時(shí)',
type:'error',
duration:3000,
showClose: true,
})
return Promise.reject(error)
}
)
//添加響應(yīng)攔截器
service.interceptors.response.use(
response => {
// loading close
loading.close();
return response
},
error => {
// loading close
loading.close();
Message({
message:error.message,
type:'error',
duration:3000,
showClose: true,
})
return Promise.reject(error)
}
)
/*
@func
@desc 后端返回?cái)?shù)據(jù) 統(tǒng)一處理返回狀態(tài)碼，不同的狀態(tài)碼 執(zhí)行不同的操作。
@param {object} a.data 后端返回的數(shù)據(jù)
@param {object} a.msg 后端返回的消息
@param {object} a.code 后端返回的狀態(tài)碼
@param {func} b Promise 成功回調(diào)
@param {func} c Promise 失敗回調(diào)
*/
let responseCode = ({data, msg, code}, resolve ,reject) => {
// data 返回參數(shù) msg 返回消息 code 返回狀態(tài)
switch(code) {
// 請求成功
case 200:
// 成功回調(diào)
resolve(data);
break;
// 請求被攔截 需要重新登錄賬號(hào)
case 403:
invalidToken();
break;
// 其他狀態(tài)
default:
Message({
message:msg,
type:'error',
duration:3000,
showClose: true,
})
// 失敗回調(diào)
reject({
data,
msg,
code,
});
}
}
export default {
/*
@func
@desc axios get 請求
@param {string} a 接口地址
@param {object} b = {} 請求參數(shù)
*/
get(url, params = {}) {
return new Promise((resolve, reject) => {
service({
method: 'get',
url,
params,
}).then(({data}) => {
responseCode(data, resolve, reject);
}).catch(err => {
reject(err);
console.log(err, '異常')
})
})
},
/*
@func
@desc axios post 請求
@param {string} a 接口地址
@param {object} b = {} 請求參數(shù)
*/
post(url, data = {}) {
return new Promise((resolve, reject) => {
service({
method: 'post',
url,
data,
}).then(({data}) => {
responseCode(data, resolve, reject);
}).catch(err => {
reject(err);
console.log(err, '異常')
})
})
}
}
// 使用
this.$axios.post('api',{
...params
}).then((data) => {
this.accessoriesTable = data;
this.accessoriesKeywordShow = false;
});
十四、其他&&技巧
遍歷對象少用for in,因?yàn)閒or in 會(huì)遍歷原型上所有能枚舉的屬性
let obj2 = {
name:'fei',
age:20
}
Object.keys( obj2 ).forEach( ( key )=>{
console.log( obj2[ key ] )
} )
對象深拷貝
let copyObj = JSON.parse(JSON.stringify(obj));
數(shù)組去重
uniq = function(array){ return filter.call(array, function(item, idx){ return array.indexOf(item) == idx }) }
reduce的使用
//求下列數(shù)組總和
var sumArr = [1,2,6,7,3,2,45,6,4]
var s = sumArr.reduce( ( pre, cur )=> pre + cur )
console.log( s )
如何求數(shù)組對象某個(gè)值得總和
//如下數(shù)組想得出數(shù)組對象的cpu使用總和
var addArr = [
{id:1,cpu:2},
{id:2,cpu:1},
{id:3,cpu:5},
{id:4,cpu:4}
]
//傳統(tǒng)的方式
function getCpuTotal(arr){
var sum = 0;
arr.forEach( (v)=>{
sum += v.cpu
} )
return sum;
}
console.log( getCpuTotal(addArr))
//使用reduce
function getCpuTotal2(pre,cur){
return pre + cur.cpu;
}
var t = addArr.reduce( getCpuTotal2, 0 )
console.log( t )
優(yōu)雅的for循環(huán)
let arr = [1,2,3,4];
let i = arr.length;
while( i-- ){
console.log( arr[ i ] )
}
日期格式轉(zhuǎn)化
/**
* 對Date的擴(kuò)展，將 Date 轉(zhuǎn)化為指定格式的String
* 月(M)、日(d)、12小時(shí)(h)、24小時(shí)(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 個(gè)占位符
* 年(y)可以用 1-4 個(gè)占位符，毫秒(S)只能用 1 個(gè)占位符(是 1-3 位的數(shù)字)
* eg:
* (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
* (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
* (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
* (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
* (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
*/
Date.prototype.pattern=function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小時(shí)
"H+" : this.getHours(), //小時(shí)
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
var week = {
"0" : "\u65e5",
"1" : "\u4e00",
"2" : "\u4e8c",
"3" : "\u4e09",
"4" : "\u56db",
"5" : "\u4e94",
"6" : "\u516d"
};
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
if(/(E+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "\u661f\u671f" : "\u5468") : "")+week[this.getDay()+""]);
}
for(var k in o){
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
var date = new Date();
console.log(date.pattern("yyyy-MM-dd EEE hh:mm:ss"));
邏輯運(yùn)算符
if (a == 1) {
b()
}
//可以寫成
a == 1 && b()
三元運(yùn)算符：
var a = b % 2 == 0 ? 'even' : 'odd'
HTML CSS JS 代碼縮進(jìn)換行要規(guī)范。
相關(guān)文章
阮一峰ES6編程風(fēng)格
前端規(guī)范
