css特殊用法 , 运算符判断规则

哈哈果
608 阅读6分钟

CSS特性解决的实际场景问题

1、mask-image

属性描述： 属性用于设置元素上遮罩层的图像，适用于任何元素

属性兼容性：

实例场景：用于直播聊天区域展示的渐进层

使用方法：

mask-image: linear-gradient(180deg,transparent,#000 40%);
-webkit-mask-image: linear-gradient(180deg,transparent,#000 20%);

2、伪类元素的特别用法

属性描述： :nth-child() 从兄弟节点中从前往后匹配处于某些位置的元素 :nth-last-child() 从兄弟节点中从后往前匹配处于某些位置的元素

属性兼容性：

实例场景：

使用方法：

/* 一个的样式 */
.item-contain:first-child:nth-last-child(1) {
  width: 100%;
  background-color: #8179c1;
}
/* 两个的样式 */
.item-contain:first-child:nth-last-child(2),
.item-contain:nth-child(2):nth-last-child(1) {
    display: inline-block;
    width: 49.5%;
    background-color: #959565;
}
/* 三个的样式 */
.item-contain:first-child:nth-last-child(3),
.item-contain:nth-child(2):nth-last-child(2) {
    display: inline-block;
    width: 49.5%;
    background-color: #c76eb7;
}
.item-contain:nth-child(3):nth-last-child(1) {
  margin-top: 8px;
  width: 100%;
  background-color: #c76eb7;
}

3、pointer-events解决的问题

属性描述： 指定在什么情况下，某个特定的图形元素可以成为鼠标事件的target，【它有很多的属性，不过大多数都是和svg相关，不相关的属性就是auto和none，默认auto】该属性直译为指针事件

属性兼容性：

实例场景：小程序中使用视图组件中的movable-area（可移动组件），实现一个直播小屏播放功能

问题难点：该拖拽区域是整个页面，展示层级最高，点击除了直播小屏外的父元素需要穿透点击，点击直播小屏进行小屏的操作

使用方法：

dom: movable-wrap是可移动区域的父元素，ball是移动的子元素
<movable-area class="movable-wrap move-wrap" >
    <movable-view class="ball">
    </movable-view>
</movable-area>
css:
.movable-wrap{
   pointer-events: none;
}
.ball{
    pointer-events: auto;
    width: 200px;
    height: 380px;
}

其他使用场景：在许多网站的页面最上层会用canvas绘制的雨、雪花，避免这些悬浮物遮挡住页面从而影响鼠标点击，可以使用pointer-events=none属性，让这些上方的canvas不会遮挡鼠标事件，让鼠标事件可以穿透上方的canvas来点击页面

4、linear-gradient实现笔记本横线效果

属性描述:函数用于创建一个表示两种或多种颜色线性渐变的图片 实例场景:

image.png

使用方法:

.text-con {
   min-height: calc(100vh - 230px);
   background: linear-gradient(transparent 99%, #dfe2ea 0);
   background-size: 100% 45px;
}

==运算判断规则

1、问题引出

我们日常代码中的判断是大部分是全等判断===, 但是还有少部分是== , ==判断过程中如果前后端字段规定不明确会出现不可保证的问题,所以来详细了解一下==的运算规则 (es5.github.io/#x11.9.3 官方的规则详细但是负责适用于JavaScript运行环境的开发人员看, 对于语言使用者来不好记)

2、规则分析 x == y

  • JavaScript数据类型 (基本类型) ：String 、Number 、Boolean、Null 、Undefined、Symbol 引用数据类型 ：Object、Array、Function
  • 所有对象都有valueOf()和toString()方法，它们继承自Object
  • == 判断的规则主要是经过对象中valueOf() 和toString()两个方法数据转化后判断
  • 当x和y的类型相同时, x == y 可以转化为 x === y ,唯一注意的的就是NaN === NaN
  • 所以我们只考虑 x和y的类型不同的情况

3、不同类型的 == 判断

我们将JS数值类型按下图分成两组 : 右侧的Undefined和Null是用来表示不确定、无或者空的，而右侧的四种类型都是确定的、有和非空。我们可以这样说：

左侧是一个存在的世界，右侧是一个空的世界。

  • N表示ToNumber操作，即将操作数转为数字。它是规范中的抽象操作，但我们可以用JS中的Number()函数来等价替代
  • P表示ToPrimitive操作，即将操作数转为原始类型的值。ToPrimitive(obj)等价于：先计算obj.valueOf()，如果结果为原始值，则返回此结果；否则，计算obj.toString()，如果结果是原始值，则返回此结果；否则，抛出异常。 (es5.github.io/#x9.1)

  • A、有和无的判断
    •    按照分组来判断, 左右两个边中的任意值做==比较的结果都是false
B、空和空的判断
  • undefined == null 为true(感觉就是一个设计缺陷) 不过据说JavaScript的作者最初是这样想的:
    • 假如你打算把一个变量赋予对象类型的值，但是现在还没有赋值，
那么你可以用null表示此时的状态(证据之一就是typeof null 的结果是'object')；
相反，假如你打算把一个变量赋予原始类型的值，
但是现在还没有赋值，那么你可以用undefined表示此时的状态。
这种情况也是我们使用的真实使用场景, 所以它们两者做==比较的结果是true是很合理的
C、真与假的判断
  • 当布尔值与其他类型的值作比较时，布尔值会转化为数字
    • true == '1' [Number(true) === 1; Number('1') === 1 所以结果为 true]
true == '2' [Number(true) === 1; Number('2') === 2 所以结果为 false]
false == '0' [Number(false) === 0; Number('0') === 0 所以结果为 true]
false == '-1' [Number(false) === 0; Number('-1') === -1 所以结果为 false]
D、字符集的判断
  • String 和 number 的判断, 需要使用ToNumber操作，把字符串转化为数字
    • '1' == 2  [Number('1') === 1 所以结果为 false]
'2' == 2  [Number('2') === 2 所以结果为 true]
E、单纯和复杂的判断
  • toString()方法用来得到对象的一段文字描述；而valueOf()方法用来得到对象的特征值,当一个对象与一个非对象比较时, 需要将对象转化为原始类型(虽然与布尔类型比较时，需要先将布尔类型变成数字类型，但是接下来还是要将对象类型变成原始类型)。
    • 1 == [1] 
1、[1].valueOf()结果为[1]
2、继续执行[1].toString()结果为'1'
3、Number('1')结果为1
4、所以结果为true

特例分析

为啥 [] == ![] 结果为true
这个是运算符的优先级问题, !的优先级比==高, 所以就是 [] == false 判断
[].valueOf() 为 [] ,[].toString() 为 ''
 Number('') 为 0 ， 所以 0 == 0 结果为true
综上所述: 大家还是用 === 判断靠谱

&&和|| 运算判断规则

1、问题引出

在日常代码中我们经常会遇到这样的判断规则写法,所以我们有必要了解一下 && 和 || 的判断规则

const list = [] , open = true;
list.length && open && <div></div>
页面会显示 0

2、规则分析

A、&& 和 || 都是短路运算符, 且 && 的优先级高于 ||
B、&& 如果都为true, 则返回最后一个转化为true的原值, 如果其中有转换为false的值,则返回第一个转换为false的原值
C、|| 如果都为false, 则返回最后一个为false的原值, 如果其中有转换为true的值, 那么返回第一个转换为true的值

3、结合实际

看完规则大家会不会有这样的疑问

false && 0 && <div></div>是不是就应该显示的是false 
可参考react中深入jsx中(https://zh-hans.reactjs.org/docs/jsx-in-depth.html)
false, null, undefined, and true 是合法的子元素但它们并不会被渲染
如果你想渲染 false、true、null、undefined 等值，你需要先将它们转化为字符串
avatar
文章
阅读
粉丝