在裝逼成本越來(lái)越高的 JS 圈，是時(shí)候充值一下了 ———— 題記

§ 開(kāi)發(fā)

Macbook Pro 是標(biāo)配，美其名曰“提高開(kāi)發(fā)體驗(yàn)”
什么？你還在用 Spotlight？趕緊給我換 Alfred！

編輯器，Sublime / Atom / VS Code 三選一
雖然很想用IDE，但一定要忍住，并且與人解釋道：
“啟動(dòng)速度慢，消耗資源多，不適合我這種完美主義者
如果不是為了美觀，我寧愿使用 Vim / Emacs”

命令行 iTerm2 + Oh-my-zsh
二逼青年用 bash，普通青年用 zsh
我們也只是想做一名普通人罷了

查資料雖然都是百度
但一定要稱(chēng)都是用 Google
且要說(shuō)英文而不是中文的“谷歌”
使用美式發(fā)音，當(dāng)自己是灣區(qū)老司機(jī)

盡管四級(jí)飄過(guò)，六級(jí)沒(méi)過(guò)
在 Stack Overflow 上點(diǎn)數(shù)也低
但也要說(shuō)每天都與各國(guó)程序員談笑風(fēng)生

§ 語(yǔ)言

這年頭如果還不用 Babel + ES6
都不好意思說(shuō)自己是 JSer
當(dāng)然還有 TypeScript / CoffeeScript / Dart ...
沒(méi)學(xué)過(guò)沒(méi)關(guān)系
對(duì)外人說(shuō)自己“略懂”即可
反正最后都是編譯為 ES5，你懂的

為了避免對(duì)方深入問(wèn)
此時(shí)你應(yīng)該繼續(xù)發(fā)表高見(jiàn)：
“JS 是基于原型的函數(shù)式弱類(lèi)語(yǔ)言
引入類(lèi)與強(qiáng)類(lèi)真的是不倫不類(lèi)”
說(shuō)到此，頓一下，表現(xiàn)出百感交集
隨后繼續(xù)徐徐道：
“可大勢(shì)所趨，吾等小輩惟隨波逐流”
說(shuō)罷，即可揮揮衣袖轉(zhuǎn)身離去

在這里不得不提一下，雖然使用 Babel 轉(zhuǎn)碼可以盡情裝逼
但其對(duì)某些新特性的轉(zhuǎn)換相當(dāng)二逼（詳情請(qǐng)看這篇文章）
一句話：Babel 雖好，但別貪杯哦（推薦Babel 在線實(shí)時(shí)編譯）

§ 代碼風(fēng)格

摒 棄JSLint / JSHint / JSCS，擁抱 ESLint
盡管平時(shí)只是個(gè)搬磚的
但時(shí)刻以世界頂級(jí)企業(yè)的規(guī)范約束自己
于是 eslint-config-airbnb 成了我們的標(biāo)配

一般新手是這樣寫(xiě)的：

/* Low */
if (a) {
  return b;
} else {
  return c;
}

逼格稍微高一點(diǎn)的這樣寫(xiě)：

/* Bigger */
if (a) return b; // 提前結(jié)束，免用大括號(hào)與else
return c;

實(shí)際上還能更進(jìn)一步：

/* Bigger than bigger */
return a ? b : c // 不要寫(xiě)分號(hào)，留白予人想象的空間

總而言之，代碼越短，可讀性越差，逼格越高
不能讓人隨便看懂，就像人不能輕易讓人看透

§ 奇技淫巧

罄竹難書(shū)

§ 常用庫(kù)

DOM庫(kù)

標(biāo)配是 jQuery，手機(jī)端有 Zepto 作為替代品
想要裝逼且不怕坑，那就上 Mootools
Prototype？嗯，復(fù)古的逼格都是很高的

一定要說(shuō)自己純粹為了優(yōu)雅簡(jiǎn)潔，不得不用 jQuery
（如何做到 jQuery-free，請(qǐng)看這篇文章）

當(dāng)然，就算是寫(xiě) jQuery
也能體現(xiàn)出逼格
我們來(lái)看看新手一般是怎么寫(xiě)的：

/* Low */
var value = $(".container .myInput1").val();
$(".container .myInput2").val(value);
$(".container .myInput3").attr("disabled", "disabled");

用雙引號(hào)，以及對(duì)選擇器性能認(rèn)知不足，是新手的特征
一般直接使用類(lèi)選擇器的，都是對(duì)用戶(hù)體驗(yàn)很有自信的

/* Bigger */
// 把div.container命名為myDiv
var $myDiv = $('#myDiv'), // 緩存DOM
  v = $myDiv.find('.myInput1').val();

$myDiv
  .find('.myInput2').val(v)
  .end() // 堅(jiān)持鏈?zhǔn)秸{(diào)用
  .find('.myInput3').attr('disabled', 'disabled');

（有關(guān) jQuery 選擇器的性能以及最佳實(shí)踐，請(qǐng)看這篇文章）

UI

BootStrap 爛大街
不是我們的菜
我們選擇的標(biāo)準(zhǔn)是門(mén)檻要高
于是
Foundation6 / Ant Design
映入眼簾

請(qǐng)謹(jǐn)慎使用
Semantic UI / UIkit / Amaze UI ...
避免不能自拔

工具庫(kù)

后浪 lodash 把前浪 underscore 拍死在沙灘上
于是它成了唯一的選擇
不過(guò)為了保持逼格
我們要盡量使用原汁原味的 ES6
就算要用也一定要注意素質(zhì)：

/* Low */
import _ from 'lodash' // 把整個(gè)lodash打包進(jìn)去了

/* Bigger */
import isEmpty from 'lodash/isEmpty' // 僅把個(gè)別函數(shù)打包

模板引擎

逼格最高顯然是 Jade
但改名為 Pug（哈巴狗）后
就像是小龍女被尹志平不可描述后
再也無(wú)愛(ài)了
從此以后
留了胡子（Mustache）
扶著把手（Handlebars）
默默耕耘

異步編程

這里不談 Q / Bluebird / Async / co / then 等庫(kù)
皆因Babel已經(jīng)支持所有的異步編程解決方案
當(dāng)前最常用的還是Promise

有些新手會(huì)寫(xiě)出這種代碼：

/* Low */
// 找出與用戶(hù)1同市的所有用戶(hù)
User.findById(1).then((user) => {
  User.find({ city: user.city }).then((users) => {
    res.json(users.toJSON())
  })
})

這屬于 Promise反模式，與回調(diào)函數(shù)無(wú)異

/* Bigger */
User.findById(1).then((user) => {
  return User.find({ city: user.city }) // 返回Promise
}).then((users) => {
  res.json(users.toJSON())
}).catch(next)

§ 包管理工具

如果你被
Bower / spm / Component / Duo ...
坑過(guò)
請(qǐng)回到 npm 的懷抱
什么？jspm？有完沒(méi)完...

§ 構(gòu)建工具

想當(dāng)年我不懂什么是自動(dòng)構(gòu)建工具
他們說(shuō)：生命苦短，我們用 Grunt

好不容易用上 Grunt 的時(shí)候
他們又說(shuō)：Gulp 基于流，符合 Unix 哲學(xué)

之后我虔誠(chéng)地?fù)Q上了 Gulp
他們雙說(shuō)：Webpack 最好用

最后終于用上了 Webpack
他們叒說(shuō)：FIS3 約不約？。。。

§ 模塊化方案

無(wú)論是

• RequireJS (AMD)
• SeaJS (CMD)
• KMD.js (KMD)
• Browserify (CommonJS)
• ...

最后都慶幸回歸到 npm + Webpack
什么？SystemJS？有完沒(méi)完...

§ MV*框架 / 技術(shù)棧 / 大型框架

Backbone

每個(gè)人都有一段不堪回首的經(jīng)歷
就像當(dāng)年在 QQ 空間發(fā)“你若安好便是晴天”的說(shuō)說(shuō)
Backbone就是這樣子的存在

Angular

一定要邊吐槽邊用，不然就一點(diǎn)都不 ng 了
“學(xué)習(xí)曲線陡峭”不應(yīng)從你口中說(shuō)出
“學(xué)習(xí)過(guò)程趣味盎然”才是你的菜

Vue

一定要用“優(yōu)雅”來(lái)形容
就像用 ES6 一定要“大膽”

React技術(shù)棧

React 已經(jīng)是前端高逼格的代名詞
所以無(wú)論懂不懂都要喊：
“React 大法好”
因?yàn)檫@是一種信仰
稱(chēng)贊 JSX 的標(biāo)新立異
談?wù)?Flux / Redux
扯扯 Elm / RxJS
每到深入則戛然而止：
“太深入的太抽象，你們未必能理解”
由此，聽(tīng)者只會(huì)更加崇拜你

其他

還有國(guó)內(nèi)相對(duì)小眾的 Ember / Knockout / Avalon
（請(qǐng)別再把 YUI / Dojo / Ext / KISSY 扯進(jìn)來(lái)了好伐）

§ 混合 / 原生開(kāi)發(fā)

自從 PhoneGap 出來(lái)后
貌似我們也能搶 安卓/iOS 的飯碗了
Ionic 更是將 Hybrid APP 推向高潮

不過(guò)混合始終比不上原生
于是 React Native 應(yīng)運(yùn)而生
最近多了一個(gè)新的選擇：Weex

別忘了還有桌面的 nw.js 以及 Electron

JSer從一入門(mén)開(kāi)始，就掌握了改變世界的能力
也比其他程序員更容易走向人生的巔峰

§ 后端框架

我們一直標(biāo)榜自己是全棧
不玩幾下后端框架怎么行

快遞員用 Express
風(fēng)濕患者用 Koa
哲學(xué)家用 ThinkJS
水手用 Sails

還有全棧的 Meteor
上述都用一遍
相信也快轉(zhuǎn)行了

§ 服務(wù)器進(jìn)程管理

既然都玩上了后端框架
不懂部署服務(wù)器怎么行

二逼青年用 supervisor / nodemon
文藝青年用 forever
普通青年用 pm2
裝逼青年用 Tmux + node

§ 結(jié)語(yǔ)

import you, { isGoodPost, star } from 'you'
import me, { thank } from 'me'
  
const url = 'https://github.com/kenberkeley/bigger-jser'  
  
isGoodPost(url) && star(me)
thank(you)