小编bas*_*ten的帖子

php glob模式匹配的数字

是否可以使用php glob函数匹配任意数量的数字?我正在尝试匹配图像缩略图的文件名,最终尺寸从2到4位.

我知道我可以提供一个数字范围,但这只匹配一个字符:

glob("thumbname-[0-9]-[0-9].jpg")
Run Code Online (Sandbox Code Playgroud)

这将匹配thumbname-1-1.jpg但不匹配thumbname-10-10.jpg等.

php glob

8
推荐指数
1
解决办法
1万
查看次数

使用node-sass和postcss autoprefixer生成带有npm脚本的源映射

当将输出从一个输出到另一个时,是否可以使用node-sass和postcss autoprefixer生成完全可用的源图?我目前在package.json中有以下内容:

"scripts": {
    "sass": "node-sass sass/app.scss --source-map true --source-map-embed true",
    "postcss:autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' --map",
    "css": "npm run sass -s | npm run postcss:autoprefixer -s > css/app.css"
}
Run Code Online (Sandbox Code Playgroud)

这会产生一个半工作的内联源图,但是原始文件的链接不正确,因此在Chrome devtools中点击它们将不会加载它们(看起来它们被处理为相对链接,然后从css文件夹中引用).我尝试通过向--source-map-contents truenode-sass 添加选项来修复此问题,但随后autoprefixer错误,我怀疑因为它不喜欢dataUri的行长度.

理想情况下,我更喜欢输出一个单独的.map文件,但设置node-sass选项--source-map css/app.css.map不会写出任何东西,大概是因为只有css输出到stdout.

npm node-sass autoprefixer postcss npm-scripts

6
推荐指数
1
解决办法
4812
查看次数

是否可以对 CSS 网格中重复且可包装的列使用固定的最小和最大宽度?

我想设置一个 CSS 布局,其中容器包含固定数量的具有以下属性的灵活宽度图块:

  • 瓷砖之间的间距是固定且一致的
  • 它们的大小可以在固定的最小和最大宽度之间扩展,但无论其内容如何,​​都应该具有相同的宽度。在下面的示例中,我使用 100px 最小宽度和 200px 最大宽度。
  • 如果它们在最小宽度下不能全部水平放入容器中,则它们应该换行为多行。
  • 如果容器较大,它们的扩展不应超过其最大固定宽度,应保持在容器的中心,并且它们之间的空间不应扩展。

也许纯 CSS 是不可能的,但感觉应该可以!下面有一个最小的例子,我将在这里详细说明:

https://jsfiddle.net/vztskh6f/1/

选项 1:CSS 网格

这似乎是最好的选择,因为我们总是希望图块宽度保持一致。为了使列换行,我相信您需要使用repeat()语法,并且repeat(auto-fit, ...)似乎最适合此用例。显而易见的解决方案似乎是使用repeat(auto-fit, minmax(100px, 200px)). 然而,这不起作用,200px无论容器的宽度如何,瓷砖总是保持在原处。在所有其他方面,这都按预期运行:

.gridContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
  padding: 10px;
  gap: 10px;
  justify-items: center;
  justify-content: center;
}

.child {
  width: 100%;
  height: 30px;
  background: #0f0;
  text-align: center;
}
Run Code Online (Sandbox Code Playgroud)

可以使用选项 1 来强制执行所需的规范,方法是使用grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))然后在容器上设置计算值max-width并强制其居中,但感觉单独使用 CSS Grid 应该可以实现这一点?

选项 2:弹性盒

使用 Flexbox 实现包裹要简单得多,并且flex在子项上使用意味着我们可以轻松设置具有最小和最大宽度的灵活图块。然而,一旦子元素换行到第二行,它显然会扩展到其最大宽度,并且与其他图块不一致:

.flexContainer …
Run Code Online (Sandbox Code Playgroud)

css flexbox css-grid

6
推荐指数
1
解决办法
3121
查看次数

在ES6中是否允许销毁类实例属性?

假设我有以下代码:

class Foo {
    constructor() {
        this.a = 1;
        this.b = 'something';
    }

    someMethod() {
        // Is this legal?
        let { a, b } = this;
    }
}
Run Code Online (Sandbox Code Playgroud)

销毁工作someMethod合法吗?

我的直觉是,这很好,但是我在任何文档中都没有提到这种用法。它目前可在Babel中使用,但大概是因为Babel在后台将类转换为函数。我的理解是(几乎)JS中的所有东西都原型地继承自Object,因此我可能希望对Classes和Class实例也是如此。

我所见的关于引擎盖下发生的情况的唯一参考是在此处,它指定JS引擎调用内部方法ToObject,该方法仅在遇到nullor 时才会抛出TypeError undefined。但是ToObject文档没有明确提及类实例。

javascript destructuring ecmascript-6

4
推荐指数
1
解决办法
1331
查看次数