• Stars
    star
    327
  • Rank 128,686 (Top 3 %)
  • Language
  • Created over 8 years ago
  • Updated almost 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

前端 JSer 装逼手册 (DEPRECATED)

前端 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 是基于原型的函数式弱类语言
引入类与强类真的是不伦不类”
说到此,顿一下,表现出百感交集
随后继续徐徐道:
“可大势所趋,吾等小辈惟随波逐流”
说罢,即可挥挥衣袖转身离去

在这里不得不提一下,虽然使用 Babel 转码可以尽情装逼
但其对某些新特性的转换相当二逼(详情请看这篇文章
一句话: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 // 不要写分号,留白予人想象的空间

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


§ 奇技淫巧

罄竹难书


§ 常用库

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?yarn?有完没完...


§ 构建工具

想当年我不懂什么是自动构建工具
他们说:生命苦短,我们用 Grunt

好不容易用上 Grunt 的时候
他们又说:Gulp 基于流,符合 Unix 哲学

之后我虔诚地换上了 Gulp
他们双说:Webpack 最好用

最后终于用上了 Webpack
他们叒说:FIS3 约不约?。。。


§ 模块化方案

无论是

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

最后都庆幸回归到 npm + Webpack
什么?SystemJS?有完没完...


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

Backbone

每个人都有一段不堪回首的经历
就像当年在 QQ 空间发“你若安好便是晴天”的说说
Backbone 就是这样子的存在

AngularJS

一定要边吐槽边用,不然就一点都不 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)

§ 参考

More Repositories

1

redux-simple-tutorial

Redux 简明教程。本教程深入浅出,配套入门、进阶源码解读以及文档注释丰富的 Demo 等一条龙服务
2,622
star
2

react-demo

React 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释,让您快速上手 React 开发 SPA。Webpack / ES6 + Babel / Redux / React Router —— An Excellent React Starter,可能是东半球最佳的 React Starter,基于 Vue Cli 二次开发
JavaScript
1,908
star
3

vue-demo

Vue.js 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释,让您快速上手 Vue.js 开发 SPA。Webpack / ES6 + Babel / Vue Router / (Vue Resource?) / (Vue Validator?) / (Vuex?) —— An Excellent Vue Starter with Best Practice / 最佳实践
JavaScript
1,294
star
4

vue2-scaffold

The best scaffold for Vue 2.x based on vue-cli#vuejs-templates/webpack
JavaScript
123
star
5

msg-board-api

A Simple Message Board / 简易留言板 RESTful API
JavaScript
90
star
6

make-windows-development-mac-like

将 Windows 7 打造成 Mac 般的高效开发环境
89
star
7

vue-state-management-alternative

Vuex state management alternative for both Vue 1.x & 2.x
Vue
69
star
8

blog

土澳码农的博客 | Aussie Coder blog 👉 https://kenberkeley.github.io
JavaScript
60
star
9

fix-date

Solution for `yyyy-MM-dd HH:mm:ss` is `Invalid Date` in Safari, IE, etc (hijack Date)
JavaScript
41
star
10

vue-drag-drop-sort-demo

Vue demo for drag drop sort (for Vue.js 2.x see https://github.com/kenberkeley/vue2-drag-and-drop-demo)
Vue
40
star
11

react-scaffold

The best scaffold for React
JavaScript
28
star
12

life-in-australia

完美主义程序员的澳洲生活分享(适用于留学、技术移民以及雇主担保移民等)https://kenberkeley.github.io
28
star
13

express-auto-routes

Mount express controllers to routes automatically / Express 自动路由(DEPRECATED)
JavaScript
13
star
14

tmdb-react

A TMDb demo powered by Create React App. Online demo 👉
JavaScript
10
star
15

omdb-vue

An OMDb demo powered by Vue CLI 3.x. Online demo 👉
Vue
4
star
16

todo-example

Todo example in jQuery / Backbone + RequireJS / AngularJS + Browserify / React + Webpack / Vue + Webpack editions
JavaScript
3
star
17

tiny-express

Implement a tiny express which can run in browser
JavaScript
3
star
18

update-query

Update the query string of a url with the given object
JavaScript
2
star
19

kenberkeley.github.io

Source code 👉 https://github.com/kenberkeley/blog
HTML
2
star
20

replace-with

Replace an array | object's content with the other one's while keeping the reference
JavaScript
2
star
21

key-path-mirror

Similar to keymirror but supports nested objects, built with TypeScript
TypeScript
2
star
22

reject-empty

Omit empty values of an array | object
JavaScript
1
star
23

payroll-system-vue

A payroll system powered by Vue CLI
JavaScript
1
star
24

horse-racing-odds

Horse Racing Odds powered by Create React App. Online demo 👉
JavaScript
1
star
25

tip

❤️ tip / 打赏 💰
1
star