前端 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)

    原文作者:kenberkeley
    原文地址: https://segmentfault.com/a/1190000005987011
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞