前端JSer装逼手册

大家好，欢迎来到IT知识分享网。

前端JSer装逼手册

在装逼成本越来越高的JS圈，是时候充值一下了 ———— 题记

§ 开发

§ 语言

§ 代码风格

一般新手是这样写的：

/* 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库

/* 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

工具库

/* Low */ import _ from 'lodash' // 把整个lodash打包进去了

/* Bigger */ import isEmpty from 'lodash/isEmpty' // 仅把个别函数打包

模板引擎

异步编程

有些新手会写出这种代码：

/* 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)

§ 包管理工具

§ 构建工具

§ 模块化方案

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

Backbone

Angular

Vue

React技术栈

其他

§ 混合 / 原生开发

别忘了还有桌面的nw.js以及Electron

§ 后端框架

§ 服务器进程管理

§ 结语

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)