前端JSer装逼手册

§ 后端框架

作者们直接自诩本人是全栈
不玩几下后端框架怎么行

特快专递员用Express
风湿病人用Koa
思想家用ThinkJS
水手用Sails

再有全栈的Meteor
上述都用一次
深信不疑也快转行了


Angular

早晚要边吐槽边用,不然就一些都不ng了
“学习曲线陡峭”不应从您口中说出
“学习进度心潮澎湃”才是你的菜

§ 模块化方案

无论是

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

说到底都庆幸回归到npm + Webpack
什么样?SystemJS?有完没完…


§ 包管理工科具

倘使您被
Bower / spm / Component / Duo …
坑过
请回到npm的怀抱
怎么样?jspm?有完没完…


其他

还有国内相对小众的 Ember / Knockout / Avalon
(请别再把 YUI / Dojo / Ext / KISSY 扯进来了好伐)


Vue

一定要用“优雅”来描写
就像用ES6一定要“大胆”

§ 奇技淫巧

擢发难数


异步编制程序

那边不谈 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)

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选拔器的质量以及一流实践,请看那篇小说

§ 代码风格

摒弃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

简单来说,代码越短,可读性越差,逼格越高
不可能让人无论看懂,就像人不能够随意令人看透


§ 服务器进度管理

既然如此都玩上了后端框架
不懂安插服务器怎么行

二逼青年用supervisor / nodemon
文化艺术青年用forever
普通青年用pm2
装逼青年用Tmux + node


UI

BootStrap烂大街
不是我们的菜
咱俩挑选的标准是良方要高
于是
Foundation6 / Ant Design
瞧见

请小心使用
Semantic UI / UIkit / Amaze UI …
制止无法自拔

模板引擎

逼格最高显明是Jade
但更名为Pug(哈巴狗)后
就像小龙女被尹志平不可描述后
再也无爱了
今后之后
留了胡子(Mustache)
扶着把手(Handlebars)
无名耕耘

§ 结语

import you, { isGoodPost, star } from 'you'
import { thank } from 'i'

const me = 'https://github.com/kenberkeley/bigger-jser'

if ( isGoodPost(url) ) {
  star(me)
  thank(you)
}

§ MV*框架 / 技术栈 / 大型框架

前者JSer装逼手册

在装逼费用更是高的JS圈,是时候充值一下了 ———— 题记

工具库

后浪lodash把前浪underscore拍死在海滩上
于是它成了唯一的挑三拣四
而是为了保持逼格
小编们要尽恐怕选择原汁原味的ES6
即便要用也迟早要小心素质:

/* Low */
import _ from 'lodash' // 把整个lodash打包进去了

/* Bigger */
import isEmpty from 'lodash/isEmpty' // 仅把个别函数打包

§ 语言

那年头假诺还不用贝布el + ES6
都不佳意思说本人是JSer
本来还有 TypeScript / CoffeeScript / Dart …
没学过没关系
对外人说自身“略懂”即可
反正最终都是编写翻译为ES5,你懂的

为了防止对方深入问
那儿你应当继续公布高见:
“JS是依照原型的函数式弱类语言
引入类与强类真的是不正经”
说到此,顿一下,表现出百感交集
进而接二连三放缓道:
“可一定,吾等小辈惟随波逐流”
说罢,即可挥挥衣袖转身离开

在此间不得不提一下,固然使用Bable转码能够尽情装逼
但其对某个新特色的转移非凡二逼(详情请看那篇小说
一句话:Babel虽好,但别贪杯哦(推荐Babel在线实时编写翻译


§ 常用库

React技术栈

React已经是前者高逼格的代名词
为此不管懂不懂都要喊:
“React大法好”
因为那是一种信仰
赞扬JSX的独创
谈谈 Flux / Redux
扯扯 Elm / RxJS
每到长远则一曝十寒:
“太深入的太肤浅,你们未必能领略”
由此,听者只会越来越敬佩你

Backbone

各样人都有一段不堪回首的经验
就好像当年在QQ空间发“你若安好正是大雪”的说说
Backbone正是那样子的留存

§ 营造筑工程具

想当年自家不懂什么是机关营造筑工程具
她们说:生命苦短,我们用Grunt

好不简单用上Grunt的时候
她们又说:居尔p基于流,符合Unix管理学

然后小编虔诚地换上了居尔p
她们双说:Webpack最好用

说到底终于用上了Webpack
她们叒说:FIS3约不约?。。。


§ 混合 / 原生开发

自从PhoneGap出来后
貌似大家也能抢安卓/iOS的饭碗了
Ionic更是将Hybrid APP推向高潮

只是混合始终不及原生
于是乎React Native应运而生
近些年多了一个新的挑三拣四:Weex

别忘了还有桌面包车型地铁nw.js以及Electron

JSer从一入门开端,就控制了变动世界的力量
也比其它程序员更便于走向人生的终端


§ 开发

Macbook Pro是标配,美其名曰“提升费用体验”
如何?你还在用Spotlight?赶紧给小编换阿尔弗瑞德!

编辑器,Sublime / Atom / VS Code 三选一
虽说很想用IDE,但一定要忍住,并且与人释疑道:
“运转速度慢,消功耗源多,不相符作者那种完美主义者
一旦不是为着雅观,小编情愿使用 Vim / Emacs”

命令行iTerm2 + Oh-my-zsh
二逼青年用bash,普通青年用zsh
大家也只是想做一名普通人罢了

查资料即便都以百度
但必然要称都以用谷歌(Google)
且要说英文而不是华语的“谷歌(谷歌)”
应用美式发音,当本人是湾区老司机

纵然四级飘过,六级没过
在Stack Overflow上点数也低
但也要说每一日都与各国程序员谈笑风生