碎碎酱 issues

Results 65 issues of


                                            碎碎酱

webpack 4 新增 sideEffects 配置的作用和注意事项

在 webpack 2 版本, 增加了对 ES Module 的支持, 使得 webpack 能够分析出未使用的 export 内容, 然后将其 tree-shrking 掉但是模块中那些具备副作用的代码, webpack 会将其保留举一个例子, 项目中存在 `utils/a.js` 模块和 `/utils/b.js` 模块, 并通过 `utils/index.js` 提供统一入口其中 b...

webpack

Docker自动化构建镜像和常用命令

## 自动化构建镜像 1. 在项目根目录添加 `Dockerfile` 2. 前往 [Docker Hub](https://cloud.docker.com/repository/list), 进入镜像详情页, 修改 `Builds` 配置开启自动构建 ![image](https://user-images.githubusercontent.com/6939365/58298613-b56d6c80-7e0e-11e9-9e91-32dd0f842d1d.png) ## 使用 docker-compose `docker-compose` 是一个 docker 实用工具, 可以根据预先的配置, 一键启动一系列容器, 并处理好关联关系这个是 [fiora](https://github.com/yinxin630/fiora) 的 docker-compose 配置: https://github.com/yinxin630/fiora/blob/master/docker-compose.yaml...

docker

浏览器渲染相关内容收集

[分析关键渲染路径性能](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp) [你不知道的 DOMContentLoaded](https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651226247&idx=1&sn=8595a53fe98a3225d0cf0ce3f8ff2acc&chksm=bd4959038a3ed015c3d03fcdadcdabf4225a7eee4efb1988becd9ae3cd87f2216a34717383bc&mpshare=1&scene=1&srcid=0403gXzWL8aSq91TuBoqyFtm&key=19bca82a00e28dcd2ee4826d029205065cd6e6bbcc6f97f2da04129789e26a00b82cc9fccc4f838fc1bda9d9935ab03cc482bfcee734dd40c175fe0d882d0518c4ecf63d82e3d78471415eee960f66cc&ascene=0&uin=NzM0NTM5MzQx&devicetype=iMac+MacBookPro12%2C1+OSX+OSX+10.11.6+build(15G31)&version=12020110&nettype=WIFI&fontScale=100&pass_ticket=2uOqWTPNenLxF7wD%2F%2Bi%2F0TK60XMDQLdZ%2Bk2hyDjtKZsM9jitnQM4c%2B5cVfq0SJLP) ## 简要归纳 1. 并不是所有的资源都会阻塞 DCL, 只有 HTML / JavaScript 会阻塞 1. 内联的 JavaScript 也会阻塞 DCL, 需要等待其执行完 1. async 的 JavaScript 不会阻塞 DCL, 但是会阻塞 onLoad 1. 内联 CSS...

Web

LeetCode 1073. 负二进制数相加

## 题目 https://leetcode-cn.com/contest/weekly-contest-139/problems/adding-two-negabinary-numbers/ ## 思路 1. 为了方便计算, 首先将数组逆序, 并填充到相同长度 2. 逐位计算, 但是进位规则和正二进制有些区别: a. 如果当前位结果大于1, 则进位为-1, 结果 -= 2 b. 如果当前位结果等于-1, 则进位为1, 结果为1 c. 如果是其他情况, 则进位为0, 结果不变 3. 将结果逆序回来, 并去掉前导0, 注意结果为全0的情况...

leetcode

事件绑定与类继承结合时的最佳实践

事件绑定和类继承都是很常用的东西, 当它俩结合起来时, 可能并不会像你所想的那样工作来看一个最简单的例子, 在构造函数中绑定 click 事件, 点击后打印 `"click"` 和 `this.a` 在该例中 `this.a` 会打印什么呢? 会打印 `undefined`, 因为 `handleClick` 的 this 指向是 button dom 对象, dom 对象没有 a 属性 ```html Document...

javascript

Less Mixin 的骚操作, 减少重复代码

想要实现一个换肤功能, 样式如下: ```less @a: red; @b: blue; @c: green; .skin-a { .title { color: @a; } .content { color: @a; } } .skin-b { .title { color: @b; } .content...

css

学习使用 redis

## 中文文档 http://redisdoc.com/index.html ## 运行 redis 以 docker 为例: ```bash docker pull redis docker run --name redis redis ``` 启动 redis 客户端 ```bash docker exec -it redis /usr/local/bin/redis-cli ``` ##...

node.js

记录一些烦人的浏览器兼容性问题

如果你也遇到了相同问题, 希望能帮助你快速修复问题 ## 安卓UC浏览器手指滑动会触发前进/后退和页面缩放在 touch 系列事件中, 可以通过 `event.preventDefault()` 阻止浏览器默认行为在安卓UC中, 仅在 `touchmove` 事件中调用 preventDefault() 并不管用, 还需要在 `touchstart` 和 `touchend` 事件中也调用 preventDefault() 然后就能禁用掉了 **但是!!!** 要注意, 如果在 `touchend` 中调用了 preventDefault(), 就不会触发...

Web

LeetCode 128. 最长连续序列

## 题目 https://leetcode-cn.com/problems/longest-consecutive-sequence/ ## 思路 1. 使用 hash 表, map[n] 表示以数字 n 为端点的序列长度 2. `map[n] = 1 + map[n - 1] + map[n + 1]`. map[n - 1] 是前一个序列, map[n...

leetcode

LeetCode 1027. 最长等差数列

## 题目 https://leetcode-cn.com/problems/longest-arithmetic-sequence/ ## 思路 1. 动态规划, dp[i][diff] 表示以第 i 个数结尾, 并且差值为 diff 的等差数列长度 2. 对于第 i 个数字 1. 遍历 j = [0, i - 1] 的数字, 求diff 2. 如果...

leetcode