前端JSer裝逼手冊

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

 

　§ 開發

　　Macbook Pro是標配，美其名曰“提高開發體驗”

　　什麼？你還在用Spotlight？趕緊給我換Alfred！

 

　　編輯器，Sublime / Atom / VS Code 三選一

　　雖然很想用IDE，但一定要忍住，並且與人解釋道：

　　“啟動速度慢，消耗資源多，不適合我這種完美主義者

　　如果不是為了美觀，我寧願使用 Vim / Emacs”

 

　　命令列iTerm2 + Oh-my-zsh

　　二逼青年用bash，普通青年用zsh

　　我們也只是想做一名普通人罷了

 

　　查資料雖然都是百度

　　但一定要稱都是用Google

　　且要說英文而不是中文的“谷歌”

　　使用美式發音，當自己是灣區老司機

 

　　儘管四級飄過，六級沒過

　　在Stack Overflow上點數也低

　　但也要說每天都與各國程式設計師談笑風生

 

　§ 語言

　　這年頭如果還不用Babel + ES6

　　都不好意思說自己是JSer

　　當然還有 TypeScript / CoffeeScript / Dart ...

　　沒學過沒關係

　　對外人說自己“略懂”即可

　　反正最後都是編譯為ES5，你懂的

 

　　為了避免對方深入問

　　此時你應該繼續發表高見：

　　“JS是基於原型的函式式弱類語言

　　引入類與強類真的是不倫不類”

　　說到此，頓一下，表現出百感交集

　　隨後繼續徐徐道：

　　“可大勢所趨，吾等小輩惟隨波逐流”

　　說罷，即可揮揮衣袖轉身離去

在這裡不得不提一下，雖然使用Bable轉碼可以盡情裝逼
但其對某些新特性的轉換相當二逼（詳情請看這篇文章）
一句話：Babel雖好，但別貪杯哦（推薦Babel線上實時編譯）

 

　§ 程式碼風格

　　摒棄JSLint / JSHint / JSCS，擁抱ESLint

　　儘管平時只是個搬磚的

　　但時刻以世界頂級企業的規範約束自己

　　於是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 // 不要寫分號，留白予人想象的空間
② return a && b || c

　　總而言之，程式碼越短，可讀性越差，逼格越高

　　不能讓人隨便看懂，就像人不能輕易讓人看透

 

　§ 奇技淫巧

罄竹難書

 

　§ 常用庫

　　DOM庫

　　標配是jQuery，手機端有Zepto作為替代品

　　想要裝逼且不怕坑，那就上Mootools

　　Prototype？嗯，復古的逼格都是很高的

 

　　一定要說自己純粹為了優雅簡潔，不得不用jQuery

　　 （如何做到jQuery-free，請看這篇文章）

 

　　當然，就算是寫jQuery

　　也能體現出逼格

　　我們來看看新手一般是怎麼寫的：

/* 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' // 僅把個別函式打包

 

　　模板引擎

　　逼格最高顯然是Jade

　　但改名為Pug（哈巴狗）後

　　就像是小龍女被尹志平不可描述後

　　再也無愛了

　　從此以後

　　留了鬍子（Mustache）

　　扶著把手（Handlebars）

　　默默耕耘

 

　　非同步程式設計

　　這裡不談 Q / Bluebird / Async / co / then 等庫

　　皆因Babel已經支援所有的非同步程式設計解決方案

　　當前最常用的還是Promise

 

　　有些新手會寫出這種程式碼：

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

　　這屬於Promise反模式，與回撥函式無異

/* 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

　　每個人都有一段不堪回首的經歷

　　就像當年在QQ空間發“你若安好便是晴天”的說說

　　Backbone就是這樣子的存在

 

　　Angular

　　一定要邊吐槽邊用，不然就一點都不ng了

　　“學習曲線陡峭”不應從你口中說出

　　“學習過程趣味盎然”才是你的菜

　　Vue

　　一定要用“優雅”來形容

　　就像用ES6一定要“大膽”

 

　　React技術棧

　　React已經是前端高逼格的代名詞

　　所以無論懂不懂都要喊：

　　“React大法好”

　　因為這是一種信仰

　　稱讚JSX的標新立異

　　談談 Flux / Redux

　　扯扯 Elm / RxJS

　　每到深入則戛然而止：

　　“太深入的太抽象，你們未必能理解”

　　由此，聽者只會更加崇拜你

 

　　其他

　　還有國內相對小眾的 Ember / Knockout / Avalon

  （請別再把 YUI / Dojo / Ext / KISSY 扯進來了好伐）

 

　§ 混合 / 原生開發

　　自從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/kenberkeley/bigger-jser' 

isGoodPost(url) && star(me) 
thank(you)