javascript原生技巧篇

W3C官网 css相关资料

https://drafts.csswg.org/
https://www.w3.org/Style/CSS/

Date.now() VS performance.now()

都是计算代码的性能

以前我们使用 Date.now()

返回自1970年1月1日00:00:00 UTC以来经过的毫秒数

let c=Date.now();
for (let i = 0; i < 1000000; i++) {

}
let d=Date.now();
console.log(d - c);

现在可以使用，高分辨率API

let a=performance.now();
for (let i = 0; i < 1000000; i++) {

}
let b=performance.now();
console.log(b - a);

返回自任意纪元以来经过的毫秒数/微秒

精度较高,

30s 大佬的简历

https://www.chalarangelo.me/

css 属性选择器

让我们的选择器更具有表现力,不仅具有特定性和范围,还能通过HTML传递意图

<div ds-test="aaa"></div>

[ds-test*='aaa'] {
  width: 100px;
  height: 100px;
  background-color: khaki;
}

console.assert()

如果断言为false,则将一个错误写入控制台

console.assert(false,'xxxxxx)
 // Assertion failed: xxxxxx

学习的地址https://coryrylan.com/

flex 关于滚动条

第一种方案

默认可以设置y轴滚动

<div class="flex">
  <div class="aaa">
      可以把需要滚动的内容写在这里
  </div>
</div>

.flex{
  width: 400px;
  height: 500px;
  display: flex;
  overflow: auto;
  min-height: 0;
}
.aaa{
  width: 200px;
  height: 30000px;
  background-color: deeppink;
  border:2px solid #777777;
}

第二种方案

flex-shrink:0 元素不会缩放

在修改flex-direction: column; 也是默认效果

关于左自适应,右等宽的问题,flex的解决思路

min-width=0 flex中min-width 自动计算其容器应大于我们想要的容器

完整代码

<div class="parent">
  <div class="two-flex-child"><h1>1. This is a long string that is OK to truncate please and thank you</h1></div>
  <div class="flex-end"></div>
</div>

.parent {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 30px 0;
}
h1{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*第三种,就是比较完美的结论*/
.two-flex-child{
  flex:1;
  min-width:0;
}

用编程的方式测试媒体查询

window.matchMedia

 window.matchMedia('(max-width:750px)').addListener(e=>{
      if (e.matches) {
        console.log('width小于750');
      }else{
        console.log('width大于750');
      }
    })

模板字符串的有趣问题

let age=12;
const user=([str1],age)=>{
  console.log(str1);// hello
  console.log(age);// 12
}
user`hello,${age}`;

let age=12;
const user=([str1,str2],age)=>{
  console.log(str1); // hello
  console.log(str2); // one
  console.log(age); // 12
}
user`hello,${age}one`;

个人理解类似把 string 切割成一个数组,我们可以按照顺序解构

let age=12;
let obj={
  name:'wo'
}
const user=([str1,str2],age,{name})=>{
  console.log(str1); // hello
  console.log(str2); // one
  console.log(age); // 12
  console.log(name);// wo
}
user`hello,${age}one${obj}`;

max-width min-width

max-width

默认 max-height:none

• width: 600px;max-width: 100%;
• width: 100%; max-width: 600px;

这两种效果相同

范围0<x<600px

.bbb{
  //width: 600px;
  //max-width: 100%;

  width: 100%;
  max-width: 600px;
  height:300px;
  background-color: firebrick;
}

<div class="bbb"></div>

场景:

父元素为1000

• width:600px;max-width:100% 因为不返回最大宽度规则,所以是600px,宽度小于600px就都是100%,范围形象的是屏幕是 100%<600px;就是0-600px;
• width:1000px;max-width:600px这个超过了600px,违反了最大宽度规则,因此元素降低到600px,相当于定死了,就是最多600px;

父母宽度320

• width:600px;max-width:100% 元素最大为320,所以就是320px, 范围 0-600px;

min-width

width:100%;min-width:600px 至少600px;范围就是600px<100%

width:300px;min-width:500px 至少有500px;范围一直是500px;

width:600px;min-width:100% 优先级最大min-width,所以一直是100%

• 假如我们在一个文章中只设置min-height:100px; 里面有很多文字,我们简单理解里面文字的高度在最大屏幕的时候是100px ,那么当屏幕缩小的时候文字里面盒子的高度会增加,他的优先级就是min-width ,范围就是100px<100%
• 默认的时候min-height:auto 它被解析为0

小案例

<div class="aaa">
  <div class="bbb">
    我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅我很帅
  </div>
  <div class="ccc"></div>
</div>

.aaa{
  display: flex;
}
.bbb{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
  background-color: firebrick;
}
.ccc{
  width: 200px;
  height: 50px;
  margin-left:50px;
  background-color: pink;
}

默认值min-width:auto 计算为0,当弹性布局,min-width 不会计算为0,min-width等于内容的大小

所以我们需要设置min-width或者min-height

.c-person__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width:0; //添加设置为0
}

混合min-width/max-width

.aaa{
  min-width:50%;
  max-width: 80%;
  display: inline-block;
  height: 100px;
  background-color: khaki;
}
优先级高的是 min-width

display:block 默认的宽度为0或者自身内容撑起来,所以优先级比较高的应该是min-width

.aaa{
  min-width:50%;
  max-width: 80%;
  display: block;
  height: 100px;
  background-color: khaki;
}

优先级高的是 max-width

个人觉得display:block 他的默认宽度是100%,由于它的最大宽度是80%,所以优先级最大的应该是max-width

综合案例

 width: 500px;
 min-width: 50%;
 max-width: 100%;

首先我们思考一个问题

width:500px;max-width:100% 它的屏幕范围就是0-500px,width的优先级就大于max-width的优先级

width:500px;min-width:50% 由于我们知道min-width>width的时候展示的是最小长度,设我们的父盒子长度为x,他的范围就是500px< x*50%,我们侧面的思考 min-width的优先级就大于width的优先级

综合结论:

500px<x*50% 备注 (x * 50%)的长度要大于500px

所以我们主要思考的问题就是谁的优先级更高,就突出谁

css 比较功能

.aaa{
    max-width:calc(max(500px,100%-80px))
    /* 另一种方式 */
    max-width:max(500px,calc(100%-80px))
}

我们会发现宽度始终保持在0<x<500px