摘要：在裝逼成本越來越高的圈，是時候充值一下了題記開發(fā)是標配，美其名曰提高開發(fā)體驗什么你還在用趕緊給我換編輯器，三選一雖然很想用，但一定要忍住，并且與人解釋道啟動速度慢，消耗資源多，不適合我這種完美主義者如果不是為了美觀，我寧愿使用命令行二逼

在裝逼成本越來越高的 JS 圈，是時候充值一下了 ———— 題記

§ 開發(fā)

Macbook Pro 是標配，美其名曰“提高開發(fā)體驗” 什么？你還在用 Spotlight？趕緊給我換 Alfred！
編輯器，Sublime / Atom / VS Code 三選一 雖然很想用IDE，但一定要忍住，并且與人解釋道：
“啟動速度慢，消耗資源多，不適合我這種完美主義者 如果不是為了美觀，我寧愿使用 Vim / Emacs”
命令行 iTerm2 + Oh-my-zsh 二逼青年用 bash，普通青年用 zsh 我們也只是想做一名普通人罷了
查資料雖然都是百度 但一定要稱都是用 Google 且要說英文而不是中文的“谷歌” 使用美式發(fā)音，當自己是灣區(qū)老司機
盡管四級飄過，六級沒過 在 Stack Overflow 上點數(shù)也低 但也要說每天都與各國程序員談笑風生

§ 語言

這年頭如果還不用 Babel + ES6 都不好意思說自己是 JSer 當然還有 TypeScript / CoffeeScript /
Dart ... 沒學過沒關系 對外人說自己“略懂”即可 反正最后都是編譯為 ES5，你懂的
為了避免對方深入問 此時你應該繼續(xù)發(fā)表高見： “JS 是基于原型的函數(shù)式弱類語言 引入類與強類真的是不倫不類”
說到此，頓一下，表現(xiàn)出百感交集 隨后繼續(xù)徐徐道： “可大勢所趨，吾等小輩惟隨波逐流” 說罷，即可揮揮衣袖轉身離去
在這里不得不提一下，雖然使用 Babel 轉碼可以盡情裝逼 但其對某些新特性的轉換相當二逼（詳情請看這篇文章） 一句話：Babel
雖好，但別貪杯哦（推薦Babel 在線實時編譯）

§ 代碼風格

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

一般新手是這樣寫的：

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

逼格稍微高一點的這樣寫：

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

實際上還能更進一步：

/* Bigger than bigger */
return a ? b : c // 不要寫分號，留白予人想象的空間
總而言之，代碼越短，可讀性越差，逼格越高
不能讓人隨便看懂，就像人不能輕易讓人看透

§ 奇技淫巧

罄竹難書

§ 常用庫

DOM庫

標配是 jQuery，手機端有 Zepto 作為替代品 想要裝逼且不怕坑，那就上 Mootools
Prototype？嗯，復古的逼格都是很高的
一定要說自己純粹為了優(yōu)雅簡潔，不得不用 jQuery （如何做到 jQuery-free，請看這篇文章）
當然，就算是寫 jQuery 也能體現(xiàn)出逼格 我們來看看新手一般是怎么寫的：

/* Low */
var value = $(".container .myInput1").val();
$(".container .myInput2").val(value);
$(".container .myInput3").attr("disabled", "disabled");
用雙引號，以及對選擇器性能認知不足，是新手的特征
一般直接使用類選擇器的，都是對用戶體驗很有自信的

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

$myDiv
  .find(".myInput2").val(v)
  .end() // 堅持鏈式調用
  .find(".myInput3").attr("disabled", "disabled");
（有關 jQuery 選擇器的性能以及最佳實踐，請看這篇文章）

UI

BootStrap 爛大街 不是我們的菜 我們選擇的標準是門檻要高 于是 Foundation6 / Ant Design 映入眼簾
請謹慎使用 Semantic UI / UIkit / Amaze UI ... 避免不能自拔

工具庫

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

/* Low */
import _ from "lodash" // 把整個lodash打包進去了
/* Bigger */
import isEmpty from "lodash/isEmpty" // 僅把個別函數(shù)打包

模板引擎

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

異步編程

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

有些新手會寫出這種代碼：

/* Low */
// 找出與用戶1同市的所有用戶
User.findById(1).then((user) => {
  User.find({ city: user.city }).then((users) => {
    res.json(users.toJSON())
  })
})
這屬于 Promise反模式，與回調函數(shù)無異

/* 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 ... 坑過 請回到 npm 的懷抱 什么？jspm？有完沒完...

§ 構建工具

想當年我不懂什么是自動構建工具 他們說：生命苦短，我們用 Grunt
好不容易用上 Grunt 的時候 他們又說：Gulp 基于流，符合 Unix 哲學
之后我虔誠地換上了 Gulp 他們雙說：Webpack 最好用
最后終于用上了 Webpack 他們叒說：FIS3 約不約？。。。

§ 模塊化方案

無論是
RequireJS (AMD) SeaJS (CMD) KMD.js (KMD) Browserify (CommonJS) ...
最后都慶幸回歸到 npm + Webpack 什么？SystemJS？有完沒完...

§ MV*框架 / 技術棧 / 大型框架

Backbone

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

Angular

一定要邊吐槽邊用，不然就一點都不 ng 了 “學習曲線陡峭”不應從你口中說出 “學習過程趣味盎然”才是你的菜

Vue

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

React技術棧

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

其他

還有國內相對小眾的 Ember / Knockout / Avalon （請別再把 YUI / Dojo / Ext / KISSY
扯進來了好伐）

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

自從 PhoneGap 出來后 貌似我們也能搶 安卓/iOS 的飯碗了 Ionic 更是將 Hybrid APP 推向高潮
不過混合始終比不上原生 于是 React Native 應運而生 最近多了一個新的選擇：Weex
別忘了還有桌面的 nw.js 以及 Electron
JSer從一入門開始，就掌握了改變世界的能力 也比其他程序員更容易走向人生的巔峰

§ 后端框架

我們一直標榜自己是全棧 不玩幾下后端框架怎么行
快遞員用 Express 風濕患者用 Koa 哲學家用 ThinkJS 水手用 Sails
還有全棧的 Meteor 上述都用一遍 相信也快轉行了

§ 服務器進程管理

既然都玩上了后端框架 不懂部署服務器怎么行
二逼青年用 supervisor / nodemon 文藝青年用 forever 普通青年用 pm2 裝逼青年用 Tmux + node

§ 結語

import you, { isGoodPost, star } from "you" import me, { thank } from
"me"
const url = "https://github.com/kenberkele..."  
isGoodPost(url) && star(me) thank(you)

原文