前端JSer装逼手册

   2016-07-20 0

在装逼成本越来越高的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 = http://www.admin10000.com//document/$(".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 me, { thank } from me 

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

isGoodPost(url) && star(me) 
thank(you)
 
标签: 前端
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • React前端框架路由跳转,前端回车事件、禁止空
    react router - historyhistory.push() 方法用于在JS中实现页面跳转history.go(-1) 用来实现页面的前进(1)和后退(-1)访问js连接后+?v1清缓存标签中的Class=“a b c”a b c分别代表3个样式名称!分别用空格隔开!Struts2》ajax请求后台,后台转换json返回aja
    03-08
  • 基于ZR.VUE 前端的改造,页面刷新报错
     问题描述:前后端分离开发,分开部署. 页面刷新 直接报404 错误的解决办法提示:  先在 .env.development 中 配置 VUE_APP_BASE_API , 将 '/' 替换为 后端地址 'http://localhost:8888/'如果是对应的发布的正式环境,也要修改  .env.production 的VUE_APP_
    03-08
  • Vue.js 前端项目在常见 Web 服务器上的部署配置
    Vue.js 前端项目在常见 Web 服务器上的部署配置
    Vue.js 前端项目在 Web 服务器上的部署配置Web 服务器是一种用于存储,处理和传输Web内容的软件。它是一种特殊类型的服务器,具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力。Web服务器支持多种编程语言,如 PHP,JavaScript,Ruby,Python 等,
    03-08
  • 基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程
    基于Vue3实现前端埋点上报插件并打包发布到npm
    目录项目环境搭建插件开发点击事件上报vue自定义指令手动上报方法页面访问次数上报(pv,uv)页面停留时间(TP)获取公共参数引入axios打包发布使用说明OptionOptions 示例点击指令上报手动上报写在最后前端埋点对于那些营销活动的项目是必须的,它可以反应出
    03-08
  • javascript前端如何使用google-protobuf
    1.首先下载google的protobuf的compiler,通过编译器可以将.proto文件转换为想要的语言文件。下载地址:https://repo1.maven.org/maven2/com/google/protobuf/protoc/2.写一个proto文件syntax = "proto3";message messagebody{//工厂 3Gstring factory = 1;//
    03-08
  • 前端笔记之JavaScript(六)让人头疼的正则表达式
    前端笔记之JavaScript(六)让人头疼的正则表达
    1.1正则概述和体验正则表达式是被用来匹配字符串中的字符组合的模式,常用来做表单验证。在JavaScript中,正则表达式也是对象,是一种引用类型。案例:正确输入一个电话号码,010-12345678,用户输入正确返回“对”,错误返回“错” var tel = prompt("请输
    03-08
  • 前端笔记之JavaScript(八)关于元素&计算后的样式
    前端笔记之JavaScript(八)关于元素&计算后的
    1.1概述得到id元素的方法 document.getElementById()得到一个元素。事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: document.getElementsByTagName(); 全线浏览器兼容的,得到元素的方法,就这两个:document.getElementById()      
    03-08
  • 前端优化分析 之 javascript引用位置优化
    在很多优化法则中都提到,尽量将javascript放到页面底部,这是为什么呢我通过firebug进行了下简单的分析 看下图  本页面首尾都存在javascript代码 我们分析得出 1、整个页面文档家在结束才开始加载css和js以及其他的数据 2、当顶部的所有js都家在结束之
    03-08
  • 500行JavaScript代码在前端根据数据生成CAD工程
    前言 用数据生成CAD图,一般采用的ObjectArx对CAD二次开发完成。ObjectARX是AutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包,它提供了以C++为基础的面向对象的开发环境及应用程序接口,能访问和创建AutoCAD图形数据库。而由于现在懂C++的人
    03-08
  • 学习前端页面css定位 网页前端设计css
    一、相对定位:absolute  相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。position:relative;同时可以设置上下左右位置偏移;rela
    03-08
点击排行