龙都娱乐»前端»前端JSer装逼手册

前端JSer装逼手册

来源:segmentfault 发布时间:2016-07-18 阅读次数:
在装逼成本越来越高的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约不约?。。。  

 § 模块化方案

  无论是
  1. RequireJS (AMD)
  2. SeaJS (CMD)
  3. KMD.js (KMD)
  4. Browserify (CommonJS)
  5. ...
  最后都庆幸回归到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)
QQ群:WEB龙都娱乐官方群(515171538),验证消息:10000
微信群:加小编微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈龙都娱乐中心(fsder-com)
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心
龙都娱乐