阅读 8143收藏 2352016-7-18

SegmentFault 分享:吉祥物 @ SegmentFault
在装逼成本越来越高的 JS 圈,是时候充值一下了 -- 题记。

在装逼成本越来越高的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 { thank } from 'i'

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

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

JavaScriptNode.js

前端 JSer 装逼手册的更多相关文章

  1. Centos学习手册——装逼宝典之强制重置密码

    ---恢复内容开始--- Centos学习手册by RuffianFish; 痞子鱼 近日闲的无聊,而最近又在搞Centos决定写个Centos详细的学习手册,以便自己在长时间没摸Centos的情况下 ...

  2. 关于NGINX的502的装逼打怪之路

    写日志之前先copy一段nginx502的原因,从某网看到如下,然而这并不是重点,最重要还是看博主手敲的东西. 一.NGINX 502错误排查 NGINX 502 Bad Gateway错误是Fast ...

  3. WebApp简单制作(后端也可以装逼啦)

    前端越来越吃香的感觉 年后回来,跟之前和几个同事和朋友聊天,发现有两个.net的和一个php的朋友都转到了前端,真是出乎意料.自从之前的webapp兴起后,前端感觉比后端吃香很多,总结朋友们转的原因, ...

  4. JavaScript 装逼指南

    Summary 本文秉承着 你看不懂是你sb,我写的代码就要牛逼 的理念来介绍一些js的装逼技巧. 下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,leader 干你没商量. ...

  5. 一行能装逼的JavaScript代码

    一行能装逼的JavaScript代码 2016-06-28 野狗 一行神奇的JS代码,当时我就震 惊了,这不就是传说中的ZB神奇么… … 哈哈. 写本篇文章的缘由是之前看到了一段js代码,如下: (! ...

  6. JavaScript装逼指南

    如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...

  7. 你会用Python做出装逼的东西吗

    如果我回答:“用Python很牛逼,但不能做出装逼的东西”,那大家来学习“小白的Python入门教程 ”,还有多少意义? 所以,为了让装逼的小船升级为牛逼的巨轮,让大家学完“小白的Python入门教程 ...

  8. Dev-C++之开启装逼效果

    Dev-C++是个不错的C++IDE——在10年前,它是很不错,在现在,它是个以界面丑陋和调试像吃粑粑这两点著称,如下图.

  9. VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启)

    VopSdk一个高逼格微信公众号开发SDK(源码下载) VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启) 针对第一版,我们搞了第二版本,老规矩先定个目标. 一 我们的目标 a.移 ...

随机推荐

  1. 多线程相关------信号量Semaphore

    Semaphore用于对资源进行计数.允许一定数量的线程同时访问该资源.可以用于进程间同步 相关函数 CreateSemaphore 创建或打开一个信号量对象 HANDLE WINAPI Create ...

  2. jquery一些基本函数

    jquery.com1.x版本兼容ie2.x版本简化适合移动端 $('li:first') 第一个$('li:eq(2)') $('li:last') 最后一个$('li:odd') 偶数行 1 3$ ...

  3. ng-style 的坑 - 对性能的影响

    本文地址:http://www.cnblogs.com/jying/p/5633203.html 熟悉 angular 的前端对ng-style 一定不陌生,这个家伙可以绑定一个函数,使得我们可以在函 ...

  4. KlayGE 4.4中渲染的改进(三):高质量无限地形

    转载请注明出处为KlayGE游戏引擎,本文的永久链接为http://www.klayge.org/?p=2761   本系列的上一篇讲了DR中的一些改进.本篇开始将描述这个版本加入的新功能,高质量地形 ...

  5. Web 使用PostMan提交特殊格式数据

    使用PostMan 选择POST模式中的RAW模式 然后点击Headers添加Content-Type 类型比如是 application/json 然后就可以在body中以Json格式上传数据了 前 ...

  6. PHP 汉字转拼音

    <?php/** *+------------------------------------------------------ * PHP 汉字转拼音 *+----------------- ...

  7. Opencv创建有滚动条的视频

    #include "stdafx.h"#include "cv.h"#include "cxcore.h"#include "hi ...

  8. (网络层)IP 协议首部格式与其配套使用的四个协议(ARP,RARP,ICMP,IGMP)

    目录 IP协议首部格式地址解析协议 ARP逆向地址解析协议 RARP网际控制报文协议 ICMP网际组管理协议IGMP IP 数据报首部 IP数据报首部格式: 最高位在左边,记为0 bit:最低位在右边 ...

  9. C++模板知识小结

    模板定义:模板就是实现代码重用机制的一种工具,它可以实现类型参数化,即把类型定义为参数, 从而实现了真正的代码可重用性.模版可以分为两类,一个是函数模版,另外一个是类模版. 由于类模板包含类型参数,因 ...

  10. poj1151Atlantis(离散化+扫描线)

    http://poj.org/problem?id=1151 http://www.cnblogs.com/kane0526/archive/2013/02/26/2934214.html这篇博客写的 ...