前端JSer装逼手册

最新推荐文章于 2024-08-28 09:22:17 发布

kenberkeley

最新推荐文章于 2024-08-28 09:22:17 发布

阅读量1.5k

点赞数 2

分类专栏： JavaScript奇技淫巧与坑文章标签：前端 javascript 装逼逼格奇技淫巧

本文链接：https://blog.csdn.net/KenBerkeley/article/details/51931083

版权

JavaScript奇技淫巧与坑专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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