现在网|现在博客-分享、记录生活的点滴

记录一次 box-shadow 和 border-radius 搭配遇到的一些小问题

作者: Chuwen
时间: 2021-04-17
分类: HTML5
评论

## 当时代码结构

> 预想效果是，鼠标移动到卡片，四周出现阴影
> 用 `box-shadow` 替代 `border`，因为用了 `border` 会导致容器宽度变化

```html
<div class="card">
  <div class="item">
    这是内容
  </div>

预览效果：
> 边缘出现了缺角，显然不能达到想要的预期
![](https://cdn.nowtime.cc/2021/04/17/2254024021.png)

---

### 最后再次阅读 MDN 的 box-shadow 文档，再次尝试，改为以下代码就实现了
```html
<div class="card">
  <div class="item">
    这是内容
  </div>

效果：
![](https://cdn.nowtime.cc/2021/04/17/1227956365.png)

解决 Ant Design For Vue 报 Antd is not defined 错误

作者: Chuwen
时间: 2021-04-12
分类: Vue.js,JavaScript
评论

PHP 处理数组 array_map 比 foreach 更省内存一些

作者: Chuwen
时间: 2021-03-24
分类: PHP
评论

## 序言
最近写代码一直考虑用最优的方法写✍
**个人拙见，如果错误，欢迎指正**

## 测试代码
> 测试环境：PHP 7.4.12 ( NTS Visual C++ 2017 x64 )
> 主要测试将数组里的 JSON 解码成数组，看需要花费多少内存

```php
<?php
//随机生成一些测试数据
$arr = [];
$use = [];
for ($i = 0; $i < 100; $i++) {
    $arr[] = randJson();
}
$arr2 = $arr;

//foreach 测试代码开始
$use['start'] = memory_usage();
foreach ($arr as &$item) {
    $item = json_decode($item, true);
}
$use['end'] = memory_usage();
print_r($use);
//foreach 测试代码结束

echo "华丽的分割线" . PHP_EOL . PHP_EOL;

//array_map 测试代码开始
$use['start'] = memory_usage();
$arr2 = array_map(function ($item) {
    return json_decode($item, true);
}, $arr2);
$use['end'] = memory_usage();
print_r($use);
//array_map 测试代码结束

function memory_usage()
{
    $memory = (!function_exists('memory_get_usage')) ? '0' : round(memory_get_usage() / 1024 / 1024, 2) . 'MB';
    return $memory;
}

function randJson()
{
    return json_encode([
        'time' => time() . uniqid(),
        'mtime' => microtime(true),
        'uuid' => uniqid()
    ], JSON_UNESCAPED_UNICODE);
}
```

## 运行结果

> 时间基本上一致，故未作测试
>
> `array_map` 比 `foreach` 确实更节省内存

```
使用的 foreach，内存使用量 0.07MB
Array
(
    [start] => 0.41MB
    [end] => 0.48MB
)

使用的 array_map，内存使用量 0.03MB
Array
(
    [start] => 0.48MB
    [end] => 0.51MB
)
```

npm run watch 报错：Windows 64-bit with Unsupported runtime (83)

作者: Chuwen
时间: 2021-03-19
分类: Node.js
评论

## Node.js 和 npm 版本信息
```log
C:\Users\hello>node -v
v14.16.0

C:\Users\hello>npm -v
6.14.11
```

## 报错信息
主要的报错信息：`Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83)`

```log
ERROR in ./node_modules/css-loader??ref--8-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--8-4!./node_modules/sass-loader/lib/loader.js??ref--8-5!./resources/assets/sass/app.scss
Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.12.0
    at module.exports (E:\xxxx\node_modules\node-sass\lib\binding.js:13:13)
    at Object.<anonymous> (E:\xxxx\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (E:\xxxx\node_modules\sass-loader\lib\loader.js:3:14)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:18:17)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:47:3)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:47:3)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:47:3)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
 @ ./resources/assets/sass/app.scss 4:14-266
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.12.0
    at module.exports (E:\xxxx\node_modules\node-sass\lib\binding.js:13:13)
    at Object.<anonymous> (E:\xxxx\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (E:\xxxx\node_modules\sass-loader\lib\loader.js:3:14)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:18:17)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:47:3)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:47:3)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:47:3)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
    at E:\xxxx\node_modules\webpack\lib\NormalModule.js:195:19
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:172:11
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:32:11)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:47:3)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:47:3)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (E:\xxxx\node_modules\loader-runner\lib\loadLoader.js:47:3)
    at iteratePitchingLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (E:\xxxx\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
    at NormalModule.doBuild (E:\xxxx\node_modules\webpack\lib\NormalModule.js:182:3)
    at NormalModule.build (E:\xxxx\node_modules\webpack\lib\NormalModule.js:275:15)
    at Compilation.buildModule (E:\xxxx\node_modules\webpack\lib\Compilation.js:157:10)
    at E:\xxxx\node_modules\webpack\lib\Compilation.js:460:10
    at E:\xxxx\node_modules\webpack\lib\NormalModuleFactory.js:243:5
    at E:\xxxx\node_modules\webpack\lib\NormalModuleFactory.js:94:13
    at E:\xxxx\node_modules\tapable\lib\Tapable.js:268:11
    at NormalModuleFactory.<anonymous> (E:\xxxx\node_modules\webpack\lib\CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (E:\xxxx\node_modules\tapable\lib\Tapable.js:272:13)
    at E:\xxxx\node_modules\webpack\lib\NormalModuleFactory.js:69:10
    at E:\xxxx\node_modules\webpack\lib\NormalModuleFactory.js:196:7
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
 @ ./resources/assets/sass/app.scss
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
```

## 解决方案
> 参考：https://github.com/microsoft/PartsUnlimited/issues/134#issuecomment-361014259

重新构建 `node-sass` 包即可解决：
> npm rebuild 命令参考：https://www.npmjs.cn/cli/rebuild/
```log
npm rebuild node-sass
```

npm install 报错：Error: Can't find Python executable "python", you can set the PYTHON env variable 及解决办法

作者: Chuwen
时间: 2021-03-19
分类: JavaScript
评论

记录一次 box-shadow 和 border-radius 搭配遇到的一些小问题

解决 Ant Design For Vue 报 Antd is not defined 错误

PHP 处理数组 array_map 比 foreach 更省内存一些

npm run watch 报错：Windows 64-bit with Unsupported runtime (83)

npm install 报错：Error: Can't find Python executable "python", you can set the PYTHON env variable 及解决办法

最新文章

最近回复

分类

归档

其它