美文网首页随笔
前端JSer装逼手册

前端JSer装逼手册

作者: 丁小时候 | 来源:发表于2016-09-05 20:26 被阅读101次

之前无意间看到的一篇帖子,地址忘了,若有侵权请私聊

在装逼成本越来越高的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虽好,但别贪杯哦

§ 代码风格

摒弃JSLint / JSHint / JSCS,拥抱ESLint 尽管平时只是个搬砖的 但时刻以世界顶级企业的规范约束自己 于是eslint-config-airbnb
成了我们的标配

一般新手是这样写的:

/* Low */if (a) { return b;} else { return c;}

逼格稍微高一点的这样写:

/* Bigger */if (a) return b; // 提前结束,免用大括号与elsereturn c;

实际上还能更进一步:

/* Bigger than bigger */① return a ? b : c // 不要写分号,留白予人想象的空间② return a && b || c

总而言之,代码越短,可读性越差,逼格越高 不能让人随便看懂,就像人不能轻易让人看透

§ 奇技淫巧

罄竹难书

§ 常用库

DOM库

标配是jQuery,手机端有Zepto作为替代品 想要装逼且不怕坑,那就上Mootools Prototype?嗯,复古的逼格都是很高的
一定要说自己纯粹为了优雅简洁,不得不用jQuery
当然,就算是写jQuery 也能体现出逼格
我们来看看新手一般是怎么写的:

/* Low */var value = $(".container .myInput1").val();$(".container .myInput2").val(value);$(".container .myInput3").attr("disabled", "disabled");

用双引号,以及对选择器性能认知不足,是新手的特征 一般直接使用类选择器的,都是对用户体验很有自信的

/* Bigger */// 把div.container命名为myDivvar $myDiv = $('#myDiv'), // 缓存DOM v = $myDiv.find('.myInput1').val();$myDiv .find('.myInput2').val(v) .end() // 坚持链式调用 .find('.myInput3').attr('disabled', 'disabled');

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)

来自:https://segmentfault.com/a/1190000005987011

点击

阅读原文

查看历史文章

阅读原文阅读 15583
**156投诉

相关文章

  • 前端JSer装逼手册

    前端JSer装逼手册 在装逼成本越来越高的JS圈,是时候充值一下了 ———— 题记 § 开发 Macbook Pr...

  • 前端JSer装逼手册

    在装逼成本越来越高的 JS 圈,是时候充值一下了 ———— 题记 § 开发 Macbook Pro 是标配,美其名...

  • 前端JSer装逼手册

    之前无意间看到的一篇帖子,地址忘了,若有侵权请私聊 在装逼成本越来越高的JS圈,是时候充值一下了 ———— 题记 ...

  • GitHub Pages装逼速成指南(5分钟版)

    骗你的,这不是一篇指南,我只是来装逼的, 装逼实例。 凭上面那个能找到前端的工作吗? 如果你觉得上面那个装逼实例挺...

  • [微信公众号收藏整理]杂七杂八的知识篇

    装逼篇 古典音乐入门指南 MIT牛人解说数学体系 这些特调你都不知道,还能去星巴克? 绿茶装逼手册 最全的西餐礼仪...

  • 前端学习:一个好的前端导航可以更好的学习前端

    前端导航: 前端网课(前端的网络课程,在线网站) 前端资源(有论坛等交流平台) 前端手册(html手册,css手册...

  • 装逼装逼装逼

    今早看见一条推 然后我哈哈笑着把这个转了。 然后我一个朋友来问我这是什么意思,我就给她解释了一下: 我:就是有一...

  • 色块的装逼手册

    ​ 关于色块,很多人对此产生抱怨,毕竟有的小小白沉沦在PPT里面多年,还是找不到正确使用色块的方法,为此,小白花了...

  • VS Code 配置详解

    更新于 2021.09.03... 作为一个 JSer,可用于前端开发的工具实在是太多了,像 Atom[https...

  • 对充气娃娃工厂装逼工位的思考

    装手与装逼本质上都是在装人。 装手不装逼,出名不容易。 装逼不装手,目的会暴露。 装手又装逼,实践丰富出真知。 装...

网友评论

    本文标题:前端JSer装逼手册

    本文链接:https://www.haomeiwen.com/subject/vrorettx.html