chnwillliu 最近的时间轴更新
chnwillliu

chnwillliu

V2EX 第 218858 号会员,加入于 2017-03-04 15:15:38 +08:00
今日活跃度排名 8018
根据 chnwillliu 的设置,主题列表被隐藏
二手交易 相关的信息,包括已关闭的交易,不会被隐藏
chnwillliu 最近回复了
18 分钟前
回复了 Mirachael 创建的主题 Angular 请教下 angular computed 相关的问题
@Chad0000 这个 feature 就是前端大热的 signal ,就是为了做到细粒度更新 view 而引入的,将来可是要干掉 zonejs ,颠覆 Angular 自上而下 change detection 的。
34 分钟前
回复了 Mirachael 创建的主题 Angular 请教下 angular computed 相关的问题
@Mirachael 一个 signal 只有脏了才会 push dirty 的 notification 给下游的 computed ,effect 或者 view ,signal update 后脏不脏由 signal equality function 决定,默认用的 Object.is 检测前后两个值。所以并不需要 deep clone ,shallow clone 一样可以。

直接返回 address 能 work 只是因为你在 app component 里没用 onPush strategy ,默认在 UI event 后更新 component 的 view ,而 view 中使用了 address ,address push 了新值自然能在 view 中体现出来,和 signal 没关系,你就是写个普通 get 函数一样 work 。
8 小时 59 分钟前
回复了 Mirachael 创建的主题 Angular 请教下 angular computed 相关的问题
自定义 signal 判等方式,或者 update address 的时候把整个 user update 成另一个 object reference ,好比 redux / ngrx 处理的方式。
9 小时 3 分钟前
回复了 Mirachael 创建的主题 Angular 请教下 angular computed 相关的问题
signal 相当于默认有 rxjs 的 distinctUntilChanged ,你第二次 emit 同一个 object reference 会被 skip 掉的。
12 小时 33 分钟前
回复了 Mirachael 创建的主题 Angular 请教下 angular computed 相关的问题
你在 update user address 时,user 这个 signal 并没有变 dirty ,自然 computed 不会重新计算。
36 天前
回复了 wednesdayco 创建的主题 TypeScript 这种的类型是不是实现不了(TypeScript)
const id = ()=> ('i' + 'd ').trim();

const n:number = obj[id()];

如果有这样的类型你这样操作那 TS 该不该报错? key 是运行时决定,所以有可能是 string 也有可能是 number 。
36 天前
回复了 royalknight 创建的主题 JavaScript V8 blog 理解 ECMAScript 规范读后感
搭配 super 食用效果更佳,还有 super.xxx = 5 这种左值用法😂
grid 正解,甚至支持过度动画。
个人感觉应该跟这个 section 有关 https://www.w3.org/TR/css-sizing-3/#cyclic-percentage-contribution

If the box is replaced, a cyclic percentage in the value of any max size property or preferred size property (width/max-width/height/max-height), is resolved against zero when calculating the min-content contribution in the corresponding axis.

尝试来解释一下:

前提知识点:div 和 img 的 display 计算值虽然都是 block ,但是 CSS 内部还是区别对待 img 的,因为它是 replaced element 。

套多层 flex 起到的效果和 width:min-content 一样,简单说就是这个 container 的宽度由子元素 的 min-content 来贡献。虽然 .icon 已经有明确的 width 定义,但它的 max-width 也会影响它的 min-content 最终是多少,而 max-width 如果是百分值,也就是它需要先知道父容器( containing block )的 size ,所以这里就产生了循环依赖。CSS Box Sizing Module Spec 就规定了这种情况,解法分 replaced element 和 non-replaced element 。

non-replaced element 在计算 min-content / max-content 内在盒子大小时,遇到百分比或循环依赖值,直接就把整个值当作是没定义一样,即,使用其 initial value 来计算。div 的 max-width initial value 是 auto ,width:16px + max-width:auto 得到的 min-content 就是 16px 。

replaced element 在计算 max-content 时也是一样,但计算 min-content 时不同,循环依赖值会直接当成 0 来对待。width:16px + max-width: 0 得到的 min-content 就是 0 ,所以在父容器计算宽度时,img 贡献了 0 。

这里的 0 / auto 只会影响解盒子的 min/max-content 的流程,盒子本身的 sizing 过程百分比依然会被遵守,即,max-width:100% 在以 0 对待并算完父容器的宽度后再以百分比算出其值然后作用于 img 上。span 中的字符总宽度 hello word!!! 是 111.25px ,因此含 img 的 .item 算得宽度 111.25px ,img 最终得到 max-width:111.25px width:16px 宽度仍然是 16px 。

img 加 max-width: 100% 后在贡献宽度的时候贡献了 0 , 在分配宽度的时候还占 16px ,所以整体 size 就不够分了,没人 flex-shrink 所以就溢出了。
可以进一步简化 demo ,不需要嵌套 flex 就可以复现。

https://jsfiddle.net/zc9vqdn6/2/


```
<div class="item">
<img class="icon" />
<span>Hello World !!!</span>
</div>

<style>
.item {
border: 1px solid black;
display: inline-flex;
align-items: center;
white-space: nowrap;
width: min-content;
}

.icon {
background: green;
width: 16px;
height: 16px;
flex-shrink: 0;
max-width: 100%;
}
</style>
```
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3511 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 15ms · UTC 10:51 · PVG 18:51 · LAX 03:51 · JFK 06:51
Developed with CodeLauncher
♥ Do have faith in what you're doing.