微醺岁月
微醺岁月
**有些东西很好用，但是你未必知道；有些东西你可能用过，但是你未必知道原理。** 实现一个目的有多种途径，俗话说，条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论，收集整理拓展一波，发散一下大家的思维以及拓展一下知识面。 **茴字有四种写法，233333...， 文末有彩蛋有惊喜。** ### 1、简短优雅地实现 sleep 函数 很多语言都有 `sleep` 函数，显然 `js` 没有，那么如何能简短优雅地实现这个方法？ #### 1.1 普通版 ```JavaScript function sleep(sleepTime) { for(var start = +new Date; +new Date - start setTimeout(resolve,...
[](https://juejin.im/entry/5998f8396fb9a0247c6ec9cd/detail) **Javascript是一门很吊的语言，我可能学了假的JavaScript，哈哈，大家还有什么推荐的，补充送那啥邀请码。** **本文秉承着：你看不懂是你SB，我写的代码就要牛逼。** ### 1、单行写一个评级组件 "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);定义一个变量rate是1到5的值，然后执行上面代码，看图  才发现插件什么的都弱爆了  来源：[来自知乎用户蜗牛老湿的回答](https://www.zhihu.com/question/46943112/answer/113583615) ### 2、如何装逼用代码骂别人SB ```JavaScript (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]] ```   了解为什么请移步：[一行能装逼的JavaScript代码](http://www.jfh.com/jfperiodical/article/3224) ### 3、如何用代码优雅的证明自己NB 这个牛逼了 ```JavaScript console.log(([][[]]+[])[+!![]]+([]+{})[!+[]+!![]])...
### 起始 同许多初学 `Javascript` 的菜鸟一样，起初，我也是采用拼接字符串的形式，将 `JSON` 数据嵌入 `HTML` 中。开始时代码量较少，暂时还可以接受。但当页面结构复杂起来后，其弱点开始变得无法忍受起来： * 书写不连贯。每写一个变量就要断一下，插入一个 + 和 "。十分容易出错。 * 无法重用。`HTML` 片段都是离散化的数据，难以对其中重复的部分进行提取。 * 无法很好地利用 [``](http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/) 标签。这是 `HTML5` 中新增的一个标签，标准极力推荐将 `HTML` 模板放入 [``](http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/) 标签中，使代码更简洁。 当时我的心情就是这样的： 这TMD是在逗我吗。 于是出来了后来的...
### 起因 原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。 最近在学习`Node.js`里面的`fs`模块，遇到了一个比较诡异的现象，踩到了坑，就是读取当前目录下的一个文件，死活读取不到，由于之前对于`Node.js`里面的`path`模块也不太熟悉，也没系统研究过，所以今天就踩了这个坑，记录踩坑的过程，防止以后踩坑和大家也踩坑。 说一下当时的情形：  我纳闷的很半天，我明明就是读取当前目录下的`1.findLargest.js`，为什么提示找不到这个文件，运行了几遍，死活找不到`1.findLargest.js`这个文件。 后来才发现是因为运行这个文件不是从当前目录运行了，从图中可以看出，当前的目录是`/Users/jawil/Desktop/nodejs/demo/ES6-lottery/syntax/nodejs`，而我运行这个脚本的目录是`/Users/jawil/Desktop/nodejs/demo/ES6-lottery`；这就是问题的所在了。不过为什么运行脚本的位置也会影响这个路径呢，且往下看。 ### 探索 计算机不会欺骗人，一切按照规则执行，说找不到这个文件，那肯定就是真的找不到，至于为什么找不到，那就是因为我们理解有偏差，我最初理解的'./'是当前执行`js`文件所在的文件夹的绝对路径，然后`Node.js`的理解却不是这样的，我们慢慢往下看。 `Node.js`中的文件路径大概有 `__dirname`, `__filename`, `process.cwd()`, `./` 或者 `../`，前三个都是绝对路径，为了便于比较，`./` 和 `../` 我们通过 `path.resolve('./')`来转换为绝对路径。 简单说一下这几个路径的意思，： ``` __dirname： 获得当前执行文件所在目录的完整目录名 __filename：...
### github源码地址：https://github.com/jawil/GayHub [](https://juejin.im/entry/59ba24ab5188257e8466e460/detail) Chrome —— GayHub 一款强大的 GitHub 的 Chrome 扩展 —— GayHub，优化 GitHub 的阅读体验。 为了进一步提高 GitHub 阅览体验这个小目标 ，让大家更方便的畅游 Github，因此诞生了 GayHub。 *** ### 马上使用： * [Chrome 应用商店](https://chrome.google.com/webstore/detail/gayhub/mdcffelghikdiafnfodjlgllenhlnejl) 或者 [离线下载](https://github.com/jawil/GayHub/blob/master/download/gayhub-1.3.crx?raw=true) 或者...
奇文共欣赏，疑义相与析
# 2019 ## August #### *风回玉宇三更夜，露滴金茎八月秋。* #### August 30, 2019 **»** **[124、缓存（二）——浏览器缓存机制：强缓存、协商缓存](https://github.com/amandakelake/blog/issues/41)** #### August 30, 2019 **»** **[123、JS 正则表达式否定匹配（正向前瞻）](https://www.cnblogs.com/dong-xu/p/6926064.html)** #### August 7, 2019 **»** **[122、你已经是一个成熟的码农了，这些思维习惯你要有 ](https://mp.weixin.qq.com/s?__biz=MzA3MzI4MjgzMw==&mid=2650760410&idx=2&sn=18784811578cc0f5274984dda038076e&chksm=871aa0a4b06d29b25127f377cf354744dd4be24e2f5e1be23e6d51b5880cba0cdc8b502863af&token=1527532435&lang=zh_CN#rd)** ## July #### *七月新秋风露早，渚莲尚拆庭梧老。*...
`PM2`是一个带有**负载均衡**功能的`Node`应用的进程管理器。`PM2`可以利用服务器上的**所有CPU**，并保证进程永远都活着，**0秒的重载**，部署管理**多个**Node项目。`PM2`是`Node`线上部署完美的管理工具。 #### 1、基本指令 ``` npm install pm2 -g ： 全局安装。 pm2 start app.js ： 启动服务，入口文件是app.js。 pm2 start app.js -i [n] --name [name] ： 启动n个进程，名字命名为name。 npm restart [name or id] ：...
一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。 虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己经验不足，然后给boss说我是16届的，只有一年经验，然后就没有然后了。这次我依然这么回复，但是这boss说，没关系，他喜欢基础好的，让我可以试一试，于是我也抱着试一试的心态发了简历。 简历发过去之后，boss就给我打了电话，让我简单的介绍一下自己，我就噼里啪啦说了一些，还说了一些题外话。然后boss就开始问我问题。 由于面了四轮，所以最开始的面试记忆有点模糊了，细细回想，又感觉记忆犹新。 ### 1.电话初探 #### 1.说一下你了解CSS盒模型。 我就说了一下IE的怪异盒模型和标注浏览器的盒模型，然后可以通过box-sizing属性控制两种盒模型的变换。 #### 2.说一下box-sizing的应用场景。 这个也不难，简单说了一两个应用场景，具体就不一一细说了。 #### 3.说一下你了解的弹性FLEX布局. 这个我也比较了解，各种概念和属性能想到的说了一大堆，也扯到了Grid布局，基本这个也没啥问题。 #### 4.说一下一个未知宽高元素怎么上下左右垂直居中。 说了一下flex弹性布局的实现，说了一下兼容性，扯到了postcss的一些东西，然后说了一下常规的兼容性比较好的实现。 #### 5.说一下原型链，对象，构造函数之间的一些联系。 这个我之前写过相关的文章，自己也有比较深入的理解，所以这个也不在话下，噼里啪啦说了一大堆，也不知道面试官听得咋样。 #### 6.DOM事件的绑定的几种方式 说了三种，然后说了一些冒泡，默认事件，以及DOM2，DOM3级的一些标准。 #### 7.说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的。 这个因人而异，开放性问题，主要考察平时项目的一些积累吧，这个我回答感觉也比较ok。 #### 8.有没有了解http2.0,websocket,https，说一下你的理解以及你所了解的特性。 这个我看过一些文章，但是没有什么印象，扯了一些概念，但是回答的不是很深。...
**李小龙说过:"天下武功,无坚不摧,唯快不破".**(真的说过吗?) **我想说的是:"世间网站,完美体验,唯快不破".**(这个我承认我说过.)  俗话说,时间就是生命,时间就是金钱,时间就是一切,人人都不想把时间白白浪费,一个网站,最重要的就是体验,而网站好不好最直观的感受就是这个网站打开速度快不快,卡不卡. 当打开一个购物网站卡出翔,慢的要死,是不是如同心塞一样的感受,蓝瘦香菇,想买个心爱的宝贝都不能买,心里想这尼玛什么玩意.  那么如何让我们的网站给用户最佳的体验呢?大环境我们不说,什么网络啊,浏览器性能啊,这些我们无法改变,我们能改变的就是我们码农能创造的,那就是代码的性能.代码精简,执行速度快,嵌套层数少等等都是我们可以着手优化注意的地方. 恰巧最近刚看完**《高性能JavaScript》**收获颇丰,今天就以点带面从追求高性能JavaScript的目的书写的代码来感受一下速度提升带来的体验,从**编程实践，代码优化**的角度总结一下自己平时遇到、书中以及其他地方看到有关提高JavaScript性能的例子,其他关于**加载和执行,数据存取,浏览器中的DOM,算法和流程控制,字符串和正则表达式,快速响应的用户界面,Ajax**这些大范围的方向这里就不多加阐述.**我们从代码本身出发,用数据说话,挖掘那些细思极恐的效率.**有的提升可能微不足道,但是所有的微不足道聚集在一起就是一个从**量到质变**.  比较宽泛的阐释高性能JavaScript,从大体上了解提高JavaScript性能的有几个大方面,可以阅读这两篇文章作详细了解: >[高性能JavaScript读书笔记](https://segmentfault.com/a/1190000008364597). >[高性能javascript小结](http://blog.csdn.net/hello_world_20/article/details/46793317) 本文只从代码和数据上阐述具体说明如何一步步提高JavaScript的性能. **Javascript是一门非常灵活的语言，我们可以随心所欲的书写各种风格的代码，不同风格的代码也必然也会导致执行效率的差异，作用域链、闭包、原型继承、eval等特性，在提供各种神奇功能的同时也带来了各种效率问题，用之不慎就会导致执行效率低下,开发过程中零零散散地接触到许多提高代码性能的方法，整理一下平时比较常见并且容易规避的问题。** ## 算法和流程控制的优化 #### 循坏 你一天（一周）内写了多少个循环了？ 我们先以最简单的循环入手作为切入点,这里我们**只考虑单层循环以及比较不同循环种类和不同流程控制**的效率. ``` 测试数据:[1,2,3,...,10000000] 测试依据:数组[1,2,3,''',10000000]的累加所需要的时间 测试环境:node版本v6.9.4环境的v8引擎 ``` **为什么不在浏览器控制台测试?** 首先不同浏览器的不同版本性能可能就不一样,这里为了统一,我选择了`node`环境,为什么不选择浏览器而选择了`node`环境测试,这是因为浏览器的一部分原因. **因为用控制台是测不出性能的，因为控制台本质上是个套了一大堆安全机制的eval，它的沙盒化程度很高。这里我们就一个简单的例子来对比一下,浏览器和node环境同样的代码的执行效率.** 测试的数组代码: ```JavaScript...
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。 **工欲善其事，必先利其器。** 前不久在 **[掘金](https://juejin.im/)** 上看到一篇文章，**[前端 PS 切图方法，图文详细](https://juejin.im/post/58e9deacb123db1ad05fab2f)**，相信每个前端都经过这种最原始的切图手法，不禁想起自己以前刚入门那会懒得切图，直接QQ截图，现在想起来真是初生牛犊不怕虎，怎么方便怎么来。。。 这种原始的PS切图，不能说不好，只能说太影响效率了，一直认为能用机器解决的事，就不要用人工操作，特别是切图这种体力活，不应该是由程序员来完成的，如果开发还停留在手工切图，没什么意义，只能说你的时间太廉价了。 ### 自动切图工具 这里切图推荐一个插件：Cutterman，更多切图工具介绍请移步：[扶朕起来，朕还能切](https://w3ctrain.com/2016/07/13/cut-image/) #### [Cutterman](http://www.cutterman.cn/zh/cutterman) 是个国产的切图工具，广告语就叫“最好用的切图工具” >Cutterman致力于改善设计师的工作效率,为设计师提供优秀、高效、实用的技术解决方案, 解放双手。让创意不再有界限, 让设计更专注! * 支持多倍图 * 多种格式 * 多图层导出 * 可以设置固定大小 * 操作简单...