{"id":13672402,"url":"https://github.com/kenberkeley/bigger-jser","last_synced_at":"2025-07-28T12:06:10.694Z","repository":{"id":143891668,"uuid":"63489002","full_name":"kenberkeley/bigger-jser","owner":"kenberkeley","description":"前端 JSer 装逼手册 (DEPRECATED)","archived":false,"fork":false,"pushed_at":"2017-12-06T03:36:48.000Z","size":13,"stargazers_count":327,"open_issues_count":0,"forks_count":38,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-07-24T06:23:30.111Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kenberkeley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-07-16T15:23:17.000Z","updated_at":"2025-02-10T09:57:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"fd0e77f3-4632-4299-8feb-32fec99584a3","html_url":"https://github.com/kenberkeley/bigger-jser","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kenberkeley/bigger-jser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fbigger-jser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fbigger-jser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fbigger-jser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fbigger-jser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenberkeley","download_url":"https://codeload.github.com/kenberkeley/bigger-jser/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fbigger-jser/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267512965,"owners_count":24099638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:34.467Z","updated_at":"2025-07-28T12:06:10.609Z","avatar_url":"https://github.com/kenberkeley.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"# 前端 JSer 装逼手册\n\u003e 在装逼成本越来越高的 JS 圈，是时候充值一下了 ———— 题记\n\n## \u0026sect; 开发\nMacbook Pro 是标配，美其名曰“提高开发体验”  \n什么？你还在用 Spotlight？赶紧给我换 Alfred！  \n  \n编辑器，Sublime / Atom / VS Code 三选一  \n虽然很想用 IDE，但一定要忍住，并且与人解释道：  \n“启动速度慢，消耗资源多，不适合我这种完美主义者  \n如果不是为了美观，我宁愿使用 Vim / Emacs”  \n  \n命令行 iTerm2 + Oh-my-zsh  \n二逼青年用 bash，普通青年用 zsh  \n我们也只是想做一名普通人罢了  \n  \n查资料虽然都是百度  \n但一定要称都是用 Google  \n且要说英文而不是中文的“谷歌”  \n使用美式发音，当自己是湾区老司机  \n  \n尽管四级飘过，六级没过  \n在 Stack Overflow 上点数也低  \n但也要说每天都与各国程序员谈笑风生  \n****\n\n## \u0026sect; 语言\n这年头如果还不用 Babel + ES6  \n都不好意思说自己是 JSer  \n当然还有 TypeScript / CoffeeScript / Dart ...  \n没学过没关系  \n对外人说自己“略懂”即可  \n反正最后都是编译为 ES5，你懂的  \n  \n为了避免对方深入问  \n此时你应该继续发表高见：  \n“JS 是基于原型的函数式弱类语言  \n引入类与强类真的是不伦不类”  \n说到此，顿一下，表现出百感交集  \n随后继续徐徐道：  \n“可大势所趋，吾等小辈惟随波逐流”  \n说罢，即可挥挥衣袖转身离去  \n  \n\u003e 在这里不得不提一下，虽然使用 Babel 转码可以尽情装逼  \n\u003e 但其对某些新特性的转换相当二逼（详情请看[这篇文章](https://github.com/lcxfs1991/blog/issues/9)）  \n\u003e 一句话：Babel 虽好，但别贪杯哦（推荐[Babel 在线实时编译](http://babeljs.io/repl)） \n  \n****\n\n## \u0026sect; 代码风格\n摒弃 JSLint / JSHint / JSCS，拥抱 ESLint  \n尽管平时只是个搬砖的  \n但时刻以世界顶级企业的规范约束自己  \n于是 `eslint-config-airbnb` 成了我们的标配  \n  \n一般新手是这样写的：  \n\n```\n/* Low */\nif (a) {\n  return b;\n} else {\n  return c;\n}\n```\n\n逼格稍微高一点的这样写：  \n\n```\n/* Bigger */\nif (a) return b; // 提前结束，免用大括号与else\nreturn c;\n```\n\n实际上还能更进一步：  \n\n```\n/* Bigger than bigger */\nreturn a ? b : c // 不要写分号，留白予人想象的空间\n```\n\n总而言之，代码越短，可读性越差，逼格越高  \n不能让人随便看懂，就像人不能轻易让人看透  \n****\n  \n## \u0026sect; 奇技淫巧\n\u003e 罄竹难书\n  \n****\n\n## \u0026sect; 常用库\n### DOM 库\n标配是 jQuery，手机端有 Zepto 作为替代品  \n想要装逼且不怕坑，那就上 Mootools  \nPrototype？嗯，复古的逼格都是很高的  \n  \n一定要说自己纯粹为了优雅简洁，不得不用 jQuery  \n（如何做到 jQuery-free，请看[这篇文章](http://www.ruanyifeng.com/blog/2013/05/jquery-free.html)）  \n  \n当然，就算是写 jQuery  \n也能体现出逼格  \n我们来看看新手一般是怎么写的：  \n\n```javascript\n/* Low */\nvar value = $(\".container .myInput1\").val();\n$(\".container .myInput2\").val(value);\n$(\".container .myInput3\").attr(\"disabled\", \"disabled\");\n```\n\n用双引号，以及对选择器性能认知不足，是新手的特征  \n一般直接使用类选择器的，都是对用户体验很有自信的  \n\n```\n/* Bigger */\n// 把div.container命名为myDiv\nvar $myDiv = $('#myDiv'), // 缓存DOM\n  v = $myDiv.find('.myInput1').val();\n\n$myDiv\n  .find('.myInput2').val(v)\n  .end() // 坚持链式调用\n  .find('.myInput3').attr('disabled', 'disabled');\n```\n\n（有关 jQuery 选择器的性能以及最佳实践，请看[这篇文章](http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html)）  \n  \n  \n### UI\nBootStrap 烂大街  \n不是我们的菜  \n我们选择的标准是门槛要高  \n于是  \nFoundation6 / Ant Design  \n映入眼帘  \n  \n请谨慎使用  \nSemantic UI / UIkit / Amaze UI ...  \n避免不能自拔  \n  \n  \n### 工具库\n后浪 lodash 把前浪 underscore 拍死在沙滩上  \n于是它成了唯一的选择  \n不过为了保持逼格  \n我们要尽量使用原汁原味的 ES6  \n就算要用也一定要注意素质：  \n```\n/* Low */\nimport _ from 'lodash' // 把整个lodash打包进去了\n```\n```\n/* Bigger */\nimport isEmpty from 'lodash/isEmpty' // 仅把个别函数打包\n```\n  \n  \n### 模板引擎\n逼格最高显然是 Jade  \n但改名为 Pug（哈巴狗）后  \n就像是小龙女被尹志平不可描述后  \n再也无爱了  \n从此以后  \n留了胡子（Mustache）  \n扶着把手（Handlebars）  \n默默耕耘  \n  \n  \n### 异步编程\n这里不谈 Q / Bluebird / Async / co / then 等库  \n皆因 Babel 已经支持所有的异步编程解决方案  \n当前最常用的还是Promise  \n\n有些新手会写出这种代码： \n\n```\n/* Low */\n// 找出与用户 1 同市的所有用户\nUser.findById(1).then((user) =\u003e {\n  User.find({ city: user.city }).then((users) =\u003e {\n    res.json(users.toJSON())\n  })\n})\n```\n\n这属于 Promise [反模式](http://bluebirdjs.com/docs/anti-patterns.html)，与回调函数无异  \n\n```\n/* Bigger */\nUser.findById(1).then((user) =\u003e {\n  return User.find({ city: user.city }) // 返回Promise\n}).then((users) =\u003e {\n  res.json(users.toJSON())\n}).catch(next)\n```\n****\n\n## \u0026sect; 包管理工具\n\n如果你被  \nBower / spm / Component / Duo ...  \n坑过  \n请回到 npm 的怀抱  \n什么？jspm？yarn？有完没完...  \n****\n\n## \u0026sect; 构建工具\n\n想当年我不懂什么是自动构建工具  \n他们说：生命苦短，我们用 Grunt  \n  \n好不容易用上 Grunt 的时候  \n他们又说：Gulp 基于流，符合 Unix 哲学  \n  \n之后我虔诚地换上了 Gulp  \n他们双说：Webpack 最好用  \n  \n最后终于用上了 Webpack  \n他们叒说：FIS3 约不约？。。。  \n****\n\n## \u0026sect; 模块化方案\n\n无论是  \n* RequireJS (AMD)\n* SeaJS (CMD)\n* KMD.js (KMD)\n* Browserify (CommonJS)\n* ...\n  \n最后都庆幸回归到 npm + Webpack  \n什么？SystemJS？有完没完...  \n****\n\n## \u0026sect; MV*框架 / 技术栈 / 大型框架\n\n### Backbone\n\n每个人都有一段不堪回首的经历  \n就像当年在 QQ 空间发“你若安好便是晴天”的说说  \nBackbone 就是这样子的存在  \n  \n### AngularJS\n\n一定要边吐槽边用，不然就一点都不 ng 了  \n“学习曲线陡峭”不应从你口中说出  \n“学习过程趣味盎然”才是你的菜  \n  \n### Vue\n\n一定要用“优雅”来形容  \n就像用 ES6 一定要“大胆”  \n  \n### React 技术栈\n\nReact 已经是前端高逼格的代名词  \n所以无论懂不懂都要喊：  \n“React 大法好”  \n因为这是一种信仰  \n称赞 JSX 的标新立异  \n谈谈 Flux / Redux  \n扯扯 Elm / RxJS  \n每到深入则戛然而止：  \n“太深入的太抽象，你们未必能理解”  \n由此，听者只会更加崇拜你  \n\n### 其他\n\n还有国内相对小众的 Ember / Knockout / Avalon  \n（请别再把 YUI / Dojo / Ext / KISSY 扯进来了好伐）  \n****\n\n## \u0026sect; 混合 / 原生开发\n\n自从 PhoneGap 出来后  \n貌似我们也能抢 安卓/iOS 的饭碗了  \nIonic 更是将 Hybrid APP 推向高潮  \n\n不过混合始终比不上原生  \n于是 React Native 应运而生  \n最近多了一个新的选择：Weex  \n\n别忘了还有桌面的 nw.js 以及 Electron  \n  \n\u003e JSer 从一入门开始，就掌握了改变世界的能力  \n\u003e 也比其他程序员更容易走向人生的巅峰  \n  \n****\n\n## \u0026sect; 后端框架\n\n我们一直标榜自己是全栈  \n不玩几下后端框架怎么行  \n  \n快递员用 Express  \n风湿患者用 Koa  \n哲学家用 ThinkJS  \n水手用 Sails  \n  \n还有全栈的 Meteor  \n上述都用一遍  \n相信也快转行了  \n****\n\n## \u0026sect; 服务器进程管理\n既然都玩上了后端框架  \n不懂部署服务器怎么行  \n  \n二逼青年用 supervisor / nodemon  \n文艺青年用 forever  \n普通青年用 pm2  \n装逼青年用 Tmux + node  \n****\n  \n## \u0026sect; 结语\n\n```js\nimport you, { isGoodPost, star } from 'you'\nimport me, { thank } from 'me'\n  \nconst url = 'https://github.com/kenberkeley/bigger-jser'  \n  \nisGoodPost(url) \u0026\u0026 star(me)\nthank(you)\n```\n\n## \u0026sect; 参考\n\n* [前端技能汇总](https://github.com/JacksonTian/fks)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenberkeley%2Fbigger-jser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenberkeley%2Fbigger-jser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenberkeley%2Fbigger-jser/lists"}