前言

  大家好，我是沐浴在曙光下的贰货道士，好久不见，别来无恙！本文主要根据UI设计需求，讲述一套基于scss封装方法的网页响应式布局，以及不同于传统引入element UI主题配色文件的换肤思路。大家仔细看完文章，相信一定会有所收获。倘若本文提供的响应式布局思路对您有所帮助，烦请大家一键三连哦。同时如果您有其他响应式布局解决方案或网站换肤思路，欢迎您不吝赐教，在评论区留言分享。感谢大家！

需求分析

• 早期我们前端项目组开发了一个国外业务网站。这周为了迎合其他国家的喜好，需要在国外业务项目的基础上，新建多个项目，对之前的主题配色和部分布局进行修改，并需要适配不同分辨率下的屏幕。UI提供了包括主题配色和页面布局修改在内的一系列项目稿件，这些稿件基于1920px分辨率的屏幕进行处理。前端需要根据UI提供的主题色，修改项目中的颜色变量。接口暂时使用国外业务的那一套接口，后期需要对接这些项目的接口，而我们目前的主要任务就是处理这些项目的静态页面改版。
• 主题色修改：
  1. 首先，我们前端团队需要根据UI提供的主题色，更新项目中的颜色变量，确保页面上的所有元素都符合新的配色方案。
  2. 页面布局提供的修改稿件，如果有不在主题色内的颜色，需要和UI确认是否需要更换为其他颜色相近的主题配色或者双方都新增主题配色
  3. 检查项目中包括CSS和HTML在内的所有带#颜色值的信息。与UI确认后，将其更换为其他颜色接近的主题配色，或者双方共同新增主题配色，以确保配色方案的一致性和协调性。
• 响应式布局：
  1. 前端需要根据UI提供的稿件和意见，适配项目在不同屏幕下的样式。对于页面上的不同元素，在小于等于1920px的屏幕上进行缩放时，需要保持横纵比，并根据页面大小进行等比例缩放，包括容器宽高、间距等在内的页面布局是否合适都需要与UI确认；在高于1920px屏幕的设备上，需要保持和1920px屏幕的布局风格，即元素的宽高不变。
  2. 然而，字体元素在页面缩放时，需要保持一定的风格。比如：16px的文字最小不能低于14px，18px、20px以及24px的文字最小不能低于16px，32px的文字最小不能低于18px，36px的文字最小不能低于20px，44px的文字最小不能低于28px，48px的文字最小不能低于32px。
  3. 在移动设备上，需要保持和800px网页相同的布局。

项目现状

• 主题色： 早期在与UI团队合作时，我们为国外业务系统确定了一套配色方案，并将其定义在项目的颜色变量中。然而，后续设计稿中出现了一些不在这套配色方案中的色值。 由于种种原因，我们在开发时没有与UI确认这些颜色是否需要更换，也没有将新增的颜色定义到颜色变量中，而是直接在代码中使用了这些颜色值。这导致在此次换肤过程中，仅通过修改颜色变量无法实现统一换肤的效果。我们需要逐一检查代码中硬编码的颜色值，并将其替换为新的颜色变量，以确保换肤的统一性和一致性。
• 布局： 以前我们使用flex、百分比、最小最大宽度/高度以及element UI的栅格布局做了一些简单的适配，但这些方法不够灵活。为了更好地适应不同分辨率的屏幕，我们需要采用更为灵活和动态的布局方案，以确保在各种设备上的显示效果都能达到预期。

思路分析

主题色

传统的解决方案

1. 以前在官网上，我们可以直接编辑并修改一套主题色。点击下载后，会生成一个css文件。
   
2. 将下载后的css文件引入到我们项目中，可以看到编译后的css文件
   
3. 最后在项目中的入口文件，引入我们下载的css文件(这种方式会增加app.css的体积)。

`main.js`



import '@/styles/theme/index.css'

4. 后续处理的优化

`将编译后的element样式，从main.js指向到index.html中，减小了main.css体积`

`main.js中的css文件，最终还是会link到index.html中。那为什么还要把它拆开呢？`

`这涉及到css的拆分：浏览器会并行请求加载多个css文件，比单独请求并加载一个css文件要快`

`这样处理的目的是：将main.js中的css文件，抽出一部分放到index.html中`



<link rel="stylesheet" href="<%= BASE_URL %>theme/index.css">

5. webpack小知识：loader

• webpack 只识别js文件：当遇到其他非js文件时，因为不识别js文件，所以需要使用loader插件(或引入第三方插件，或自己编写一个loader方法)，将其他文件转换为webpack能够识别的js文件。
• 因此，loader的作用相当于对传入的非js文件做处理，将它转换为 webpack 可识别的js字符串。

6. 在字体商用不侵权的前提下，严格遵循设计稿的字体样式

`如果用户电脑不存在设计稿上提供的字体样式，则会展示用户电脑的默认字体样式。`

`为此，我们需要下载并引入字体，将字体集成到网站中，确保用户电脑呈现效果与我们开发一致`

`(1) 引入: 在public文件夹下新建fonts文件夹，在fonts文件夹下引入我们下载好的字体样式`

`(2) 在index.html中, 为document增加字体`

`(3) 引入并挂载字体后，我们就可以使用下载的字体了，也可以在body上全局挂载字体`



`类似element字体的引入和挂载`

`FontFace: https://developer.mozilla.org/zh-CN/docs/Web/API/CSS_Font_Loading_API`



const font1 = new FontFace(

  'iconfont', 

  'url(/iconfont/iconfont.woff2?t=1688345853791), 

   url(/iconfont/iconfont.woff?t=1688345853791), 

   url(/iconfont/iconfont.ttf?t=1688345853791)')



const font2 = new FontFace(

  'element-icons', 

  'url(/theme/fonts/element-icons.woff), 

   url(/theme/fonts/element-icons.ttf)')



font1.load().then(function() {

  document.fonts.add(font1)

})



font2.load().then(function() {

  document.fonts.add(font2)

})

现在的解决方案

  由于element UI官方已不再维护传统的主题配色下载，我们项目采取官方提供的第二种方式：

1. 原理： 我们项目使用scss编写css, element UI的theme-chalk又恰好使用scss进行编写。在官方定义的scss变量中，使用了!default语法，用于提供默认值。这也就意味着，我们不用考虑css的加载顺序，直接新建scss文件，覆盖定义在theme-chalk文件且在我们系统中常用的scss变量，达到在css编译阶段自定义主题scss变量的效果。

2. 引入变量： 新建element-variable.scss文件，在这个文件中引入theme-chalk定义的主题scss变量，同时需要改变icon字体路径变量(使用传统方法不需要改变路径变量，是因为我们直接引入了编译后的css文件，里面已经帮我们做过处理了；而使用现在的解决方案，如果不改变字体路径变量，项目会提示找不到icon字体路径，所以这个配置必填)。此时，将这个文件引入到我们的入口文件，那么系统中已经存在theme-chalk定义好的scss变量了

3. 修改变量： 新建element.scss文件，在里面覆盖我们需要修改的主题变量，最后在vue.config.js中sass配置下的additionalData里全局引入到项目中的每个vue文件中(因为是挂载到每个vue文件中，所以这个配置下的scss文件不宜过多)，方便在vue文件中直接使用变量。

 

优势

1. 定制化和灵活性

• 更改主题色和变量: 轻松改变Element UI的主题色、字体、间距等变量，而无需过多地覆盖现有的element CSS样式。
• 精细控制: 原先的配置方式只能配置主题色，无法控制更细粒度的配置，比如边框颜色之类。

2. 避免样式冲突

• 避免样式覆盖的冲突: 通过直接修改SCSS变量来定制样式，可以避免在使用编译后的 CSS 文件时可能出现的样式覆盖冲突问题。这样可以保证样式的独立性和一致性。

3. 便于维护

• 集中管理: 所有的样式修改都集中在一个地方（变量文件），这使得维护样式变得更加方便和清晰。只需要修改文件中定义的变量，就可以影响整个项目中的样式，无需逐一查找以及修改每个组件的样式。

缺陷

• 在sass loader的additionalData中配置了过多的全局css变量，添加到每个vue文件中
• 相比之前的处理方式，在main.js中引入element自定义的主题scss变量，首页加载的css文件更多，

响应式布局

思路分析

1. UI提供的稿件是1920px，前端需要对UI提供的稿件进行一比一还原；
2. 网页在小屏缩放时，需要保持元素的横纵比。针对这个问题，我们可以用百分比作为布局单位。 以设计稿宽度1920px为基准，建立px和vw之间的关系。如果把1920px视为100vw，那么1vw = 19.2px。 如果设计稿上某个元素的宽度为192px, 那么将它换算得到的结果将会是192px / 19.2px * 1vw = 10vw。因此我们在布局时，需要严格遵循UI提供的设计稿件，并借助下文封装的方法，将设计稿元素的像素作为第一个形参，传递到下文封装的方法中; 实现思路：为等比例缩放网页元素，先去掉传入的像素单位。最后使用前文提到的换算公式，不论宽高，都将其转换为vw单位，等比缩放。
3. 字体页面元素在放大时，需要限制字体元素展现的最大阈值。 那么我们封装的方法，第二个形参需要控制字体元素的最大阈值; 实现思路：借助scss中的max方法实现。
4. 字体页面元素在缩小时，需要限制字体元素展现的最小阈值。 那么我们封装的方法，第三个形参需要控制字体元素的最小阈值; 实现思路：借助scss中的min方法实现。
5. 在高于1920px屏幕的设备上，需要保持和1920px屏幕的布局风格，即元素的宽高不变。 针对这个问题，我们只需要保证方法中的max形参和1920px下的像素值一致，即保证方法中的第一个形参和第二个形参相同。
6. 在移动设备上，需要使用800px的网页布局。针对这个问题，我们可以使用meta标签进行适配：  
7. 不同屏幕下的元素显示势必不会那么完美。我们可以通过媒体查询，在不同分辨率的屏幕下，按照UI给定的反馈意见，对网页进行适配，这样就可以解决问题。但是在项目中大量使用媒体查询语法，会导致整个项目看上去很乱。为此，我们可以基于scss语法，对媒体查询语法进行二次封装。
8. 如何测试我们编写的scss代码? 移步sass在线调试

自适应scss方法封装

// 自定义scss函数, 作用是去掉传入变量的单位

// 之所以要去掉单位，是为了将传入的px转换为vw单位，自适应布局`



@function stripUnits($value) {

  

  // 对带有单位的变量进行特殊处理，返回去掉单位后的结果`

  // 对于scss来说， 90px和90都是number`

  // 在scss中，unitless是一个术语，指的是没有单位的数值，not unitless就是变量带单位`



  @if type-of($value) == 'number' and not unitless($value) {

    // 90px / 1 得到的结果是90px, 90px / 1px得到的结果是90

    // 这也是这里为什么要用($value * 0 + 1)，而不是直接写1的原因`

    

    @return $value / ($value * 0 + 1);

  }

  @return $value;

}



/*

  自定义scss函数，提供三个参数：

  第一个参数是设计稿提供的元素大小，传入会自动转换为vw单位，达到自适应的效果

  第二个参数是用来约束这个元素的大小最大不能超过第一个参数和第二个参数的最大值, 必须带单位

  第三个参数是用来约束这个元素的大小最小不能小于第一个参数和第三个参数的最小值，必须带单位

  如果不传入第二个和第三个参数，则表示元素完全随屏幕响应式缩放

  

  应用场景：

  1. 1920px下标题的字体是48px，当屏幕分辨率为960px时，标题字号缩放为24px，起不到突出的作用。

     于是我们可以给它设置一个最小阈值，比如最小不能小于32px；

  2. 同理，当屏幕分辨率为3840px时，标题字号放大为96px，我们不希望字号这么大。

     于是可以给它设置一个最大阈值，比如最大不能超过60px。

*/



@function auto($raw, $max:null, $min:null) {

  $raw: stripUnits($raw);

  $str: #{$raw / $proportion}vw;

  @if $max {

    $str: min(#{$str}, #{$max});

  }

  @if $min {

    $str: max(#{$str}, #{$min});

  }

  @return $str;

}



/*

  自定义scss函数，auto方法的二次封装, 提供两个参数

  第一个参数用于设置1920px下的元素大小

  第二个参数用于设置这个元素的最小值

  

  应用场景：

  1. 1920px下标题的字体是48px，当屏幕分辨率为3840px时，标题字号放大为96px，我们希望它保持48px大小，

     于是我们可以给它设置一个最大阈值48px。同时，我们可以传入一个最小阈值，让它最小不能小于这个参数。

*/



@function autoMax($raw, $min:null) {

  @return auto($raw, $raw, $min)

}



// 和上面相反



@function autoMin($raw, $max:null) {

  @return auto($raw, $max, $raw)

}



//1vw = 1920 / 100 ;

$proportion: 19.2;



// 根据UI需求，对不同字体大小进行封装

$wb-font-size-mini: 16px; // $text-mini-1

$wb-font-size-extra-small: 18px; // $text-small-1

$wb-font-size-small: 20px; //$text-sm-md-1

$wb-font-size-base: 24px; //$text-medium-1

$wb-font-size-lesser-medium: 32px;

$wb-font-size-medium: 36px; //$text-large-1

$wb-font-size-extra-medium: 44px;

$wb-font-size-large: 48px; //$text-title-1



// 根据UI需求，在屏幕分辨率缩小时，字体响应式变化，并设定最小阈值

// 并在1920px以上的屏幕，保持和1920px一样的字体大小



$wb-auto-font-size-mini: autoMax($wb-font-size-mini, 14px);

$wb-auto-font-size-extra-small: autoMax($wb-font-size-extra-small, 16px);

$wb-auto-font-size-small: autoMax($wb-font-size-small, 16px);

$wb-auto-font-size-base: autoMax($wb-font-size-base, 16px);

$wb-auto-font-size-lesser-medium: autoMax($wb-font-size-lesser-medium, 18px);

$wb-auto-font-size-medium: autoMax($wb-font-size-medium, 20px);

$wb-auto-font-size-extra-medium: autoMax($wb-font-size-extra-medium, 28px);

$wb-auto-font-size-large: autoMax($wb-font-size-large, 32px);

// 严格按照UI稿件提供的元素大小、间距编写代码，以下是示例代码



.title {

  padding: 0 autoMax(180px);

  font-size: $wb-auto-font-size-large;

  font-weight: 600;

  text-align: center;

}

媒体查询语法封装及使用规范

// 导入scss的list和map模块，用于处理相关操作。



@use 'sass:list';

@use "sass:map";



/*

  媒体查询映射表，定义各种设备类型的媒体查询范围

  key为定义的媒体类型，value为对应的分辨率范围

*/



$media-list: (

    mobile-begin: (0, null),

    mobile: (0, 800),

    mobile-end:(null, 800),

    tablet-begin: (801, null),

    tablet: (801, 1023),

    tablet-end:(null, 1023),

    mini-desktop-begin: (1024, null),

    mini-desktop: (1024, 1279),

    mini-desktop-end: (null, 1279),

    small-desktop-begin: (1280, null),

    small-desktop: (1280, 1439),

    small-desktop-end: (null, 1439),

    medium-desktop-begin: (1440, 1919),

    medium-desktop: (1440, 1919),

    medium-desktop-end: (null, 1919),



    large-desktop-begin: (1920, null),

    large-desktop: (1920, 2559),

    large-desktop-end: (null, 2559),



    super-desktop-begin: (2560, null),

    super-desktop: (2560, null),

    super-desktop-end: (2560, null)

);



/*

  创建响应式媒体查询的函数，传参是媒体查询映射表中的媒体类型

  从$media-list中获取对应的最小和最大宽度，并返回相应的媒体查询字符串。

*/



@function createResponsive($media) {

  $size-list: map.get($media-list, $media);

  $min-size: list.nth($size-list, 1);

  $max-size: list.nth($size-list, 2);

  @if ($min-size and $max-size) {

    @return "screen and (min-width:#{$min-size}px) and (max-width: #{$max-size}px)";

  } @else if ($max-size) {

    @return "screen and (max-width: #{$max-size}px)";

  } @else {

    @return "screen and (min-width:#{$min-size}px)";

  }

}



/*

  这个混入接受一个或多个媒体类型参数，调用createResponsive函数生成媒体查询

  @content是Scss中的一个占位符，用于在混入中定义块级内容。

  它允许你在调用混入时，将实际的样式代码插入到混入定义的样式规则中。

*/



@mixin responsive-to($media...) {

  @each $item in $media {

    $media-content: createResponsive($item);

    @media #{$media-content} {

      @content;

    }

  }

}



// 以下是针对各种媒体类型定义的混入：



@mixin mobile() {

  @include responsive-to(mobile) {

    @content;

  }

}



@mixin tablet() {

  @include responsive-to(tablet) {

    @content;

  }

}



@mixin mini-desktop() {

  @include responsive-to(mini-desktop) {

    @content;

  }

}



@mixin small-desktop() {

  @include responsive-to(small-desktop) {

    @content;

  }

}



@mixin medium-desktop() {

  @include responsive-to(medium-desktop) {

    @content;

  }

}



@mixin large-desktop() {

  @include responsive-to(large-desktop) {

    @content;

  }

}



@mixin super-desktop() {

  @include responsive-to(super-desktop) {

    @content;

  }

}



@mixin mobile-begin() {

  @include responsive-to(mobile-begin) {

    @content;

  }

}



@mixin tablet-begin() {

  @include responsive-to(tablet-begin) {

    @content;

  }

}



@mixin mini-desktop-begin() {

  @include responsive-to(mini-desktop-begin) {

    @content;

  }

}



@mixin small-desktop-begin() {

  @include responsive-to(small-desktop-begin) {

    @content;

  }

}



@mixin medium-desktop-begin() {

  @include responsive-to(medium-desktop-begin) {

    @content;

  }

}



@mixin large-desktop-begin() {

  @include responsive-to(large-desktop-begin) {

    @content;

  }

}



@mixin super-desktop-begin() {

  @include responsive-to(super-desktop-begin) {

    @content;

  }

}





@mixin mobile-end() {

  @include responsive-to(mobile-end) {

    @content;

  }

}



@mixin tablet-end() {

  @include responsive-to(tablet-end) {

    @content;

  }

}



@mixin mini-desktop-end() {

  @include responsive-to(mini-desktop-end) {

    @content;

  }

}



@mixin small-desktop-end() {

  @include responsive-to(small-desktop-end) {

    @content;

  }

}



@mixin medium-desktop-end() {

  @include responsive-to(medium-desktop-end) {

    @content;

  }

}



@mixin large-desktop-end() {

  @include responsive-to(large-desktop-end) {

    @content;

  }

}



@mixin super-desktop-end() {

  @include responsive-to(super-desktop-begin) {

    @content;

  }

}

需求解决思路：

• 根据提供的设计稿，使用autoMax系列方法，对页面做初步的响应式布局适配
• 针对不同屏幕下部分元素布局需要调整的问题，使用封装的媒体查询方法进行处理

书写规范：

  为避免项目中的scss文件过多，搞得整个项目看上去很臃肿，现提供一套书写规范：

• 在每个路由下的主index.vue文件中，引入同级文件夹scss下的media.scss文件

// 小屏状态下，覆盖前面定义的css样式

• media.css文件

  写法：以vue文件最外层的类进行包裹，使用deep穿透，以屏幕分辨率大小作为排序依据，从大到小书写媒体查询样式

.about-wrapper::v-deep {

  @include small-desktop {

    .a {

     .b {

     

     }

    }

  }

  

  @include mini-desktop {

    .a {

     .b {

     

     }

    }

  }

  

  @include tablet-end {

    .a {

     .b {

     

     }

    }

  }

}

结语

  感谢掘友们耐心看到文末，希望你们不是一路跳转至评论区，我们江湖再见！

作者：沐浴在曙光下的贰货道士
来源：juejin.cn/post/7388753413309775887

前言： 最近接到了一个需求很有意思，类似于我们经常在逛购物平台中，选择一个物品分享给好友，然后好友复制这段文本打开相对应的平台以后，就可以弹出链接上的物品。实现过程也比较有意思，特来分享一下实现思路🎁。

一. 效果预览

当我在别的界面复制了内容以后，回到主应用，要求可以检测到当前剪切板是什么内容。

二. 监听页面跳转动作

三. 完成读取剪切板内容

四*. 思维拓展：粘贴图片自动转链接的实现

五. 源码

<script lang="ts" setup>

document.addEventListener("visibilitychange", () => {

  if (document.visibilityState === "visible") {

    if (window.isSecureContext && navigator.clipboard) {

      const clipboardAPI = navigator.clipboard; //获取 clipboard 对象

      setTimeout(() => {

        clipboardAPI.read().then((result) => {});

      }, 1000);

    } else {

      console.log("不支持 clipboard");

    }

  }

});



document.addEventListener("paste", () => {

  if (window.isSecureContext && navigator.clipboard) {

    const clipboardAPI = navigator.clipboard; //获取 clipboard 对象

    setTimeout(() => {

      clipboardAPI.read().then((result) => {

        result[0].getType("image/png").then((blob) => {

          console.log("blob", blob);

          const reader = new FileReader();

          reader.readAsDataURL(blob);

          reader.onload = (e) => {

            const img = document.createElement("img");

            img.src = e.target?.result;

            const wrapper = document.getElementById("han");

            wrapper.appendChild(img);

          };

        });

      });

    }, 1000);

  } else {

    console.log("不支持 clipboard");

  }

});

</script>

<template>

  <div id="han" class="w-full h-full bg-blue">

    <textarea class="w-300px h-300px"></textarea>

  </div>

</template>

六. 思考 writeText 的用法

有了上面的经验，我相信你已经可以自己理解 clipboard 剩下的两个方法 write 和 writeText 了。你可以思考下面的问题：

为什么在掘金复制文章内容后，剪切板会自动加版权信息呢？。

如果你实现了，不妨在评论区写下你的思路～🌹

Dart是谷歌开发的现代化编程语言，凭借其简洁的语法和强大的功能，在开发者当中赢得了极高的声誉，尤其是在Flutter框架中发挥了巨大的作用。本文将介绍Dart中的8个令人惊艳的用法，这些用法不仅技术深度足够，充满启发性，而且能够让您的Dart编程效率飞速提升。

1. 泛型类型别名的高级应用

类型别名可以让你用简单的名称定义更复杂的类型，尤其是在处理大量嵌套的泛型时特别有用。

typedef ComplexList<T> = List<Map<T, T>>;



void main() {

  // 适用于需要设置特定键值对类型的列表

  ComplexList<String> complexList = [

    {'key1': 'value1'},

    {'key2': 'value2'},

  ];

  

  // 复杂集合的操作

  complexList.add({'key3': 'value3'});

  print(complexList);

}

泛型类型别名可以更好地组织代码，增强代码的可读性。

2. Stream的高级处理技巧

利用Stream提供的各种操作符和转换器，能够更好地处理事件流和异步数据。

Stream<int> timedCounter(Duration interval, int maxCount) async* {

  int count = 0;

  while (count < maxCount) {

    await Future.delayed(interval);

    yield ++count;

  }

}



void main() async {

  // 监听Stream，执行特定逻辑

  await for (final count in timedCounter(Duration(seconds: 1), 5)) {

    print(count); 

  }

}

通过async*和yield，你可以构建出能够发射数据序列的Stream，为异步编程提供强大支持。

3. Isolate的轻量级并行计算

Isolate可以在不同的执行线程中运是执行并发操作的强大工具。

import 'dart:isolate';



Future<void> computeOnIsolate() async {

  final receivePort = ReceivePort();

  

  Isolate.spawn(_heavyComputation, receivePort.sendPort);

  

  final message = await receivePort.first as String;

  print(message);

}



void _heavyComputation(SendPort sendPort) {

  // 很重的计算

  // 假设这是一个令CPU满负荷的操作

  sendPort.send('计算完成');

}



void main() {

  computeOnIsolate();

}

通过Isolate，你可以在Flutter应用中执行耗时操作而不影响应用的响应性。

4. 使用枚举的高级技巧

枚举类型不仅仅可以代表一组命名常量，通过扩展方法，可以大幅提升它们的功能。

enum ConnectionState {

  none,

  waiting,

  active,

  done,

}



extension ConnectionStateX on ConnectionState {

  bool get isTerminal => this == ConnectionState.done;

}



void main() {

  final state = ConnectionState.active;

  

  print('Is the connection terminal? ${state.isTerminal}');

}

枚举类型的扩展性提供了类似面向对象的模式，从而可以在保证类型安全的前提下，增加额外的功能。

5. 使用高级const构造函数

const构造函数允许在编译时创建不可变实例，有利于性能优化。

class ImmutableWidget {

  final int id;

  final String name;



  const ImmutableWidget({this.id, this.name});



  @override

  String toString() => 'ImmutableWidget(id: $id, name: $name)';

}



void main() {

  const widget1 = ImmutableWidget(id: 1, name: 'Widget 1');

  const widget2 = ImmutableWidget(id: 1, name: 'Widget 1');



  // 标识符相同，它们是同一个实例

  print(identical(widget1, widget2)); // 输出: true

}

使用const构造函数创建的实例，由于它们是不可变的，可以被Dart VM在多个地方重用。

6. 元数据注解与反射

虽然dart:mirrors库在Flutter中不可用，但理解元数据的使用可以为你提供设计灵感。

import 'dart:mirrors'; // 注意在非Web平台上不可用



class Route {

  final String path;

  const Route(this.path);

}



@Route('/login')

class LoginPage {}



void main() {

  final mirror = reflectClass(LoginPage);

  for (final instanceMirror in mirror.metadata) {

    final annotation = instanceMirror.reflectee;

    if (annotation is Route) {

      print('LoginPage的路由是: ${annotation.path}');

    }

  }

}

通过注解，你可以给代码添加可读的元数据，并通过反射在运行时获取它们，为动态功能提供支持，虽然在Flutter中可能会借助其他方式如代码生成来实现。

7. 匿名mixin

创建匿名mixin能够在不暴露mixin到全局作用域的情况下复用代码。

class Bird {

  void fly() {

    print('飞翔');

  }

}



class Swimmer {

  void swim() {

    print('游泳');

  }

}



class Duck extends Bird with Swimmer {}



void main() {

  final duck = Duck();

  duck.fly();

  duck.swim();

}

利用匿名mixin可以在不同的类中混入相同的功能而不需要创建明显的类层次结构，实现了代码的复用。

8. 高级异步编程技巧

在异步编程中，Dart提供了Future、Stream、async和await等强大的工具。

Future<String> fetchUserData() {

  // 假设这是一个网络请求

  return Future.delayed(Duration(seconds: 2), () => '用户数据');

}



Future<void> logInUser(String userId) async {

  print('尝试登录用户...');

  try {

    final data = await fetchUserData();

    print('登录成功: $data');

  } catch (e) {

    print('登录失败: $e');

  }

}



void main() {

  logInUser('123');

}

通过使用async和await，可以编写出看起来像同步代码的异步操作，使得异步代码更加简洁和易于理解。

写在开头

哈喽吖！各位好！😁

今天刚好是周四呢，疯狂星期四快整起来。🍔🍟🍗

最近，小编从玩了两年多的游戏中退游了😔，本来以为会一直就这么玩下去，和队友们相处很融洽，收获了很多开心快乐的时光😭。可惜，游戏的一波更新......准备要开始收割韭菜了，只能无奈选择弃坑了。

小编属于贫民玩家，靠着硬肝与白嫖也将游戏号整得还不错，这两天把号给卖了💰。玩了两年多，竟然还能赚一点小钱，很开心😛。只是...多少有点舍不得的一起组队的队友们，唉。😔

记录一下，希望未来还有重逢一日吧，也希望各位一切安好！😆

好，回到正题，本文将分享一个图片碎片化展示的效果，具体效果如下，请诸君按需食用。

原理

这种特效早在几年前就已经出现，属于老演员了😪，它最早是经常在轮播图（banner）上应用的，那会追求各种花里胡哨的特效，而现在感觉有点返璞归真了，简洁实用就行。

今天咱们来看看它的具体实现原理是如何的，且看图：

一图胜千言，不知道聪明的你是否看明白了？😉

大概原理是：通过容器/图片大小生成一定数量的小块，然后每个小块背景也使用相同图片，再使用 background-size 与 background-position 属性调整背景图片的大小与位置，使小块又合成一整张大图片，这操作和使用"精灵图"的操作是一样的，最后，我们再给每个小块增加动画效果，就大功告成。

简单朴实😁，你可以根据这个原理自个尝试一下，应该能整出来吧。👻

具体实现

布局与样式：

<!DOCTYPE html>

<html>

<head>

  <style>

    body{

      width: 100%;

      height: 100vh;

      padding: 0;

      margin: 0;

      display: flex;

      justify-content: center;

      align-items: center;

    }

    .box {

      width: var(--width);

      height: var(--height);

      display: flex;

      /* 小块自动换行排列 */

      flex-wrap: wrap;

      justify-content: center;

    }

    .small-box {

      background-image: url('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99b070fcb1de471d9af4f4d5d3f71909~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1120&h=1680&s=2088096&e=png&b=d098d0');

      box-sizing: border-box;

      background-repeat: no-repeat;

    }

  </style>

</head>

<body>

  <div id="box" class="box"></div>

</body>

</html>

生成无数小块填充：

<script>

document.addEventListener('DOMContentLoaded', () => {

  const box = document.getElementById('box');

  const { width, height } = box.getBoundingClientRect();

  // 定义多少个小块，由多少行和列决定

  const row = 14;

  const col = 10;

  // 计算小块的宽高

  const smallBoxWidth = width / col;

  const smallBoxHeight = height / row;

  /** @name 创建小块 **/  

  function createSmallBox() {

    for (let i = 0; i < row; i++) {

      for (let j = 0; j < col; j++) {

        const smallBox = document.createElement('div');

        smallBox.classList.add('small-box');

        smallBox.style.width = smallBoxWidth + 'px';

        smallBox.style.height = smallBoxHeight + 'px';

        smallBox.style.border = '1px solid red';

        // 插入小块

        box.appendChild(smallBox);

      }

    }

  }

  createSmallBox();

});

</script>

上面，生成多少个小块是由人为规定行（row）与列（col）来决定。可能有的场景想用小块固定的宽高来决定个数，这也是可以的，只是需要注意处理一下"边界"的情况。😶

调整小块背景图片的大小与位置：

<script>

document.addEventListener('DOMContentLoaded', () => {

  // ...

  function createSmallBox() {

    for (let i = 0; i < row; i++) {

      for (let j = 0; j < col; j++) {

        // ...

        smallBox.style.border = '1px solid red';

        

        // 设置背景偏移量，让小块的背景显示对应图片的位置，和以前那种精灵图一样

        const offsetX = j * smallBoxWidth * -1;

        const offsetY = i * smallBoxHeight * -1;

        smallBox.style.backgroundPosition = `${offsetX}px ${offsetY}px`;

        smallBox.style.backgroundSize = `${width}px ${height}px`;

        

        box.appendChild(smallBox);

      }

    }

  }

  createSmallBox();

});

</script>

女神拼接成功，到这里就已经完成一大步了，是不是没什么难度！😋

小块样式整好后，接下来，我们需要来给小块增加动画，让它们动起来，并且是有规律的动起来。

先来整个简单的透明度动画，且看：

<!DOCTYPE html>

<html>

<head>

  <style>

    /* ... */

    .small-box {

      /* ... */

      opacity: 0;

      animation: smallBoxAnimate 2000ms linear forwards;

    }

    @keyframes smallBoxAnimate {

      0% {

        opacity: 0;

      }

      40% {

        opacity: 0;

      }

      70% {

        opacity: 1;

      }

      100% {

        opacity: 1;

      }

    }

  </style>

</head>

<body>

  <script>

    document.addEventListener('DOMContentLoaded', () => {

      // ...

      function createSmallBox() {

        for (let i = 0; i < row; i++) {

          for (let j = 0; j < col; j++) {

            // ...

            // smallBox.style.border = '1px solid red';

            

            // 给每个小块增加不同的延时，让动画不同时间执行

            const delay = i * 100; // 延迟时间为毫秒(ms)，注意不要太小了

            smallBox.style.animationDelay = `${delay}ms`;



            box.appendChild(smallBox);

          }

        }

      }

      createSmallBox();

    });

  </script>

</body>

</html>

嘿嘿😃，稍微有点意思了吧？

Em...等等，你发现没有？怎么有一些小白条？这可不是小编添加的，小块的边框（border）已经是注释了的。😓

一开始小编以为是常见的"图片底部白边"问题，直接设置一下 display: block 或者 vertical-align : middle 就能解决，结果还不是，折腾了很久都没有搞掉这个小白条。😤

最后，竟然通过设置 will-change 属性能解决这个问题❗我所知道的 will-change 应该是应用在性能优化上，解决动画流畅度问题上的，想不到这里竟然也能用。

❗不对不对，当初以为是 will-change 能直接完美解决白边的问题，但是感觉还是不对，但又确实能解决。。。（部分电脑屏幕）

但其实，应该是 smallBoxWidth 与 smallBoxHeight 变量不是整数的问题，只要小块的宽度与高度保持一个整数，自然就没有这些白边了❗这是比较靠谱的事实，对于当前的高清屏幕来说。

但是，也是很奇怪，在小编另一台电脑（旧电脑）上即使是保持了整数，也会在横向存在一些小白边，太难受了。。。没办法彻底搞定这个问题。

猜测应该是和屏幕分辨率有关，毕竟那才是根源所在。

2024年07月01日

看来得去深度学习一下💪 will-change 属性的原理过程才行，这里也推荐倔友写得一篇文章：传送门。

解决相邻背景图片白条/白边间隙问题：

<script>

  document.addEventListener('DOMContentLoaded', () => {

    // ...

    function createSmallBox() {

      for (let i = 0; i < row; i++) {

        for (let j = 0; j < col; j++) {

          // ...



          smallBox.style.willChange = 'transform';

          // 在动画执行后，需要重置will-change

          const timer = setTimeout(() => {

            smallBox.style.willChange = 'initial';

            clearTimeout(timer);

          }, 2000);

          

          box.appendChild(smallBox);

        }

      }

    }

    createSmallBox();

  });

</script>

一定要注意 will-change 不可能被滥用，注意重置回来❗

这下女神在动画执行后，也清晰可见了，这是全部小块拼接组成的图片。

在上述代码中，咱们看到，通过 animation-delay 去延迟动画的执行，就能制造一个从上到下的渐变效果。

那么，咱们再改改延迟时间，如：

// const delay = i * 100; 

// 改成 ⤵

const delay = j * 100;

效果：

这...好像有那么点意思吧。。。

但是，这渐变...好像还达不到我们开头 gif 的碎片化效果吧？

那么，碎片化安排上：

.small-box {

  /* ... */

  --rotateX: rotateX(0);

  --rotateY: rotateY(0);

  transform: var(--rotateX) var(--rotateY) scale(0.8);

}

@keyframes smallBoxAnimate {

  0% {

    opacity: 0;

    transform: var(--rotateX) var(--rotateY) scale(0.8);

  }

  40% {

    opacity: 0;

    transform: var(--rotateX) var(--rotateY) scale(0.8);

  }

  70% {

    opacity: 1;

    transform: rotateX(0) rotateY(0) scale(0.8);

  }

  100% {

    opacity: 1;

    transform: rotateX(0) rotateY(0) scale(1);

  }

}

其实就是增加小块的样式动画而已，再加点旋转，再加点缩放，都整上，整上。😆

效果：

是不是稍微高级一点？有那味了？😁

看到上面旋转所用的"样式变量"没有？

--rotateX: rotateX(0);

--rotateY: rotateY(0);

不可能无缘无故突然使用，必然是有深意啦。😁

现在效果还不够炫，咱们将样式变量利用起来，让"相邻两个小块旋转相反"：

<script>

  document.addEventListener('DOMContentLoaded', () => {

    // ...

    function createSmallBox() {

      for (let i = 0; i < row; i++) {

        for (let j = 0; j < col; j++) {

          // ...



          // 相邻两个小块旋转相反

          const contrary = (i + j) % 2 === 0;

          smallBox.style.setProperty('--rotateX', `rotateX(${contrary ? -180 : 0}deg)`);

          smallBox.style.setProperty('--rotateY', `rotateY(${contrary ? 0 : -180}deg)`);

          

          box.appendChild(smallBox);

        }

      }

    }

    createSmallBox();

  });

</script>

效果：

这下对味了。😃

总的来说，我们可以通过"延迟"执行动画与改变"旋转"行为，让小块们呈现不同的动画效果，或者你只要有足够多的设想，你可以给小块添加不同的动画效果，相信也能制造出不错的整体效果。

更多效果

下面列举一些通过"延迟"执行动画产生的效果，可以瞧瞧哈。

随机：

const getRandom = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

const delay = getRandom(0, col + row) * 100;

从左上角到右下角：

const delay = (i + j) * 100;

其他的从"右上角到左下角"或者"左下角到右上角"等等的，只要反向调整一下变量就行了，就靠你自己悟啦，Come On!👻

从中心向四周扩散：

const delay = ((Math.abs(col / 2 - j) + Math.abs(row / 2 - i))) * 100;

从四周向中心聚齐：

const delay = (col / 2 - Math.abs(col / 2 - j) + (col / 2 - Math.abs(row / 2 - i))) * 100;

那么，到这里就差不多了❗

但还有最后一个问题，那就是图片的大量使用与加载时长的情况可能会导致效果展示不佳，这里你最好进行一些防范措施，如：

• 图片链接设置缓存，让浏览器缓存到内存或硬盘中。


• 通过 JS 手动将图片缓存到内存，主要就是创建 Image 对象。


• 将图片转成 base64 使用。


• 直接将图片放到代码本地使用。


• ...

以上等等吧，反正最好就是要等图片完整加载后再进行效果展示。

至此，本篇文章就写完啦，撒花撒花。

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。

老样子，点赞+评论=你会了，收藏=你精通了。

canvas画布是前端一个比较重要的能力，在MDN上看到有关canvas的API时，是否会感到枯燥？今天老弟就给各位带来了1个还说得过去的demo，话不多说，咱们一起来尝尝咸淡。

一、小球跟随鼠标移动

先来欣赏一下这段视频：

从上图我们发现，小球跟着我们的鼠标移动，并且鼠标点到的位置就是小球的中心点。想要实现这样的功能，我们可以将它抽象为下面图里的样子：

是的，一个是画布（canvas）类，一个是小球（Ball）类。

canvas主要负责尺寸、执行绘画、事件监听。

Ball主要负责圆心坐标、半径、以及更新自己的位置。

接下来就是代码部分，我们先来完成canvas类的实现。

1.1、初始化canvas类属性

从上面的视频以及拆解的图里，我们会发现这个画布至少拥有以下几个属性：

• width。画布的宽度


• height。画布的高度


• element。画布的标签元素


• context。画布的渲染上下文


• events。这个画布上的事件集合


• setWidthAndHeight()。设置画布的大小


• draw()。用于执行绘画的函数


• addEventListener()。用于给canvas添加相应的监听函数

因此我们可以得出下面这段代码：

class Canvas {

    constructor(props){

        this.element = props.element;

        this.canvasContext = props.element.getContext('2d');

        this.events = [];

        this.width = props.width;

        this.height = props.height;

    }

}

1.2、设置canvas的大小

class Canvas {

    // 构造器

    constructor(props){

        this.element = props.element;

        this.canvasContext = props.element.getContext('2d');

        this.events = [];

        this.width = props.width;

        this.height = props.height;

        this.setWidthAndHeight(props.width, props.height);

    }

    // 设置canvas的宽度与高度

    setWidthAndHeight(width, height){

        this.element.setAttribute('width', width);

        this.element.setAttribute('height', height);

    }

}

在上面的代码里，我们手动实现了一个setWidthAndHeight这样的函数，并且当执行new操作的时候，自动这个函数，从而达到设置几何元素大小的作用。

1.3、绘画小球

我们的这个绘画功能应该只负责绘画，也就是说这个小球的位置坐标等信息应该通过传参的形式传入到我们的draw函数里。

class Canvas {

    // 构造器

    constructor(props){

        this.element = props.element;

        this.canvasContext = props.element.getContext('2d');

        this.events = [];

        this.width = props.width;

        this.height = props.height;

        this.setWidthAndHeight(props.width, props.height);

    }

    // 设置canvas的宽度与高度

    setWidthAndHeight(width, height){

        this.element.setAttribute('width', width);

        this.element.setAttribute('height', height);

    }

    // 绘画小球

    draw(ball){

        this.canvasContext.beginPath();

        this.canvasContext.arc(ball.centerX, ball.centerY, ball.radius, 0, 2 * Math.PI, true);

        this.canvasContext.fillStyle = ball.background;

        this.canvasContext.fill();

        this.canvasContext.closePath();

    }

}

1.4、给canvas添加事件监听

根据我们的需求，小球随着鼠标移动，说明我们应该是在canvas标签上监听mouseover事件。我们再来思考一下，其实这个事件监听函数也应该保持纯粹。纯粹的意思就是，你不要在这个方法里去写业务逻辑。这个函数只负责添加相应的事件监听。

接下来我们实现一下这个addEventListener函数。

class Canvas {

    // 构造器

    constructor(props){

        this.element = props.element;

        this.canvasContext = props.element.getContext('2d');

        this.events = [];

        this.width = props.width;

        this.height = props.height;

        this.setWidthAndHeight(props.width, props.height);

    }

    // 设置canvas的宽度与高度

    setWidthAndHeight(width, height){

        this.element.setAttribute('width', width);

        this.element.setAttribute('height', height);

    }

    // 画物体

    draw(ball){

        this.canvasContext.beginPath();

        this.canvasContext.arc(ball.centerX, ball.centerY, ball.radius, 0, 2 * Math.PI, true);

        this.canvasContext.fillStyle = ball.background;

        this.canvasContext.fill();

        this.canvasContext.closePath();

    }

    // 添加监听器（eventName：要监听的事件，eventCallback：事件对应的处理函数）

    addEventListener(eventName, eventCallback){

        let finalEventName = eventName.toLocaleLowerCase();

        if (!this.events.filter(item => item === finalEventName)?.length > 0){

            this.events.push(finalEventName);

        }

        this.element['on' + finalEventName] = (target) => {

            eventCallback && eventCallback(target);

        }

    }

}

好啦，Canvas类的实现到这里先告一段落，我们来看看小球（Ball）类的实现。

1.5、Ball类的初始化

Ball这个类比较简单，4个属性+一个方法。

属性分别是：

• centerX。小球的圆心横坐标X


• centerY。小球的圆心纵坐标Y


• background。小球的背景色


• radius。小球的半径

方法是updateLocation函数。这个函数同样也是一个纯函数，只负责更新圆心坐标，更新的值也是由参数传递。

class Ball {

    constructor(props){

        this.centerX = props.centerX;

        this.centerY = props.centerY;

        this.radius = props.radius;

        this.background = props.background || 'orange';

    }



    // 更新小球的地理位置

    updateLocation(x, y){

        this.centerX = x;

        this.centerY = y;

    }

}

1.6、添加推动器

说的直白点，就是我们现在只有2个class类，但是无法实现想要的效果，现在来想想什么时机去触发draw方法。

根据上面的视频，我们知道需要在canvas标签上添加鼠标over事件，然后在over事件里来实时获取小球的位置信息，最后再触发draw方法。

当鼠标离开canvas画布后，需要将画布上的内容清除，不留痕迹。

这样一来，我们不仅要实现类似桥梁（bridge）的功能，还需要在canvas类上实现“画布清空”的功能。

class Canvas {

    // ...其他代码不动

    

    // 清空画布的功能

    clearCanvas(){

        this.canvasContext.clearRect(0, 0, this.width, this.height);

    }

}



// 画布对象

let canvas = new Canvas({

    element: document.querySelector('canvas'),

    width: 300,

    height: 300

});



// 小球对象

let ball = new Ball({

    centerX: 0,

    centerY: 0,

    radius: 30,

    background: 'orange'

});



// 给canvas标签添加mouseover事件监听

canvas.addEventListener(

    'mousemove',

    (target) => {

        canvasMouseOverEvent(target, canvas.element, ball);

    }

)



canvas.addEventListener(

    'mouseleave',

    (target) => {

        canvasMouseLeave(target, canvas);

    }

)



// 鼠标滑动事件

function canvasMouseOverEvent(target, canvasElement, ball){

    let pointX = target.offsetX;

    let pointY = target.offsetY;

    ball.updateLocation(pointX, pointY);

    canvas.draw(ball);

}



// 鼠标离开事件

function canvasMouseLeave(target, canvasInstance){

    canvasInstance.clearCanvas();

}

这样一来，我们便实现了大致的效果，如下：

我们似乎实现了当初的需求，只是为啥目前的表现跟“刮刮乐”差不多？因为下一次绘画的时候，没有将上次的绘画清空，所以才导致了现在的这个样子。

想要解决这个bug，只需在canvas类的draw方法里，加个清空功能就可以了。

class Canvas {

    // 画物体

    draw(ball){

        this.clearCanvas();

        this.canvasContext.beginPath();

        this.canvasContext.arc(ball.centerX, ball.centerY, ball.radius, 0, 2 * Math.PI, true);

        this.canvasContext.fillStyle = ball.background;

        this.canvasContext.fill();

        this.canvasContext.closePath();

    }

}

如此一来，这个bug就算解决了。

二、最后

好啦，本期内容到这里就告一段落了，希望这个demo能够帮助你了解一下canvas的相关API，如果能够帮到你，属实荣幸，那么我们下期再见啦，拜拜～～

前言

最近，我在负责公司的音视频开发，使用的技术栈是 Vue3，技术方案采用的是基于第三方库二次封装播放器组件，来实现公司的业务定制需求。

市面上有很多第三方视频库，在最开始进行技术选型的时候，我也花了很多时间。

现在初步把我们公司的音视频组件开发完成了，我对视频第三方库的技术选型进行一个总结分享，希望能帮助到正在进行音视频开发的你。

这次技术选型一共会对比 6 个第三方库：xgplayer、video.js、ckplayer x3、aliplayer、tcplayer、flv.js。

在对比每个第三库时，我都会给出文档地址、示例、Git 地址，便于大家自行对比。

我会给出收集到的每个第三方库的优缺点分析。对于部分重要的第三方库，将进行详细的优缺点分析；而对于涉及闭源等不可接受情况的库，优缺点分析将较为简略，不再深入对比。

因为我们技术团队的英文水平还达不到无障碍阅读英文文档的地步，所以第三库的文档是否支持中文，也是我们考虑的一个因素。

我们技术团队详细对比这些第三方库之后，最后选择的是 xgplayer。

好了，接下来开始分析以上提到的 6 个音视频第三方库~

1. xgplayer（推荐）

这个库也是我们现在所采用的库，整体使用下来感觉很不错，文档很详细，支持自定义插件，社区活跃~

文档地址： h5player.bytedance.com/

示例地址： h5player.bytedance.com/examples/

Git 地址： github.com/bytedance/x…

优点

缺点

2. video.js（候选）

文档地址： videojs.com/

示例地址： videojs.com/advanced/?v…

Git 地址： github.com/videojs/vid…

优点

缺点

3. ckplayer x3（候选）

文档地址： http://www.ckplayer.com/

示例地址： http://www.ckplayer.com/demo.html

Git 地址： gitee.com/niandeng/ck…

优点

缺点

4. aliplayer（候选）

文档地址： player.alicdn.com/aliplayer/i…

示例地址： player.alicdn.com/aliplayer/p…

Git 地址： github.com/aliyunvideo…

优点

缺点

5. tcplayer（不推荐）

文档地址： cloud.tencent.com/document/pr…

示例地址： tcplayer.vcube.tencent.com/

Git 地址： 闭源，无 git 仓库

优点

缺点

6. flv.js（不推荐）

文档地址： github.com/bilibili/fl…

示例地址： bilibili.github.io/flv.js/demo…

Git 地址： github.com/bilibili/fl…

优点

缺点

结语

以上是我对音视频第三方库进行技术选型对比的一个总结。如果有更好的见解或者其他补充，欢迎在评论区留言或者私聊我进行沟通。

写过地图需求的同学应该都遇到过地图加载大量点(4W多个点)导致页面十分卡顿的问题吧。

最近项目上线验收，现场直接卡崩溃了，其实在公司还好，因为公司的电脑配置还算可以，没有出现过崩溃的现象(但是也很卡，本来也想偷下懒)。崩溃了怎么办啊(我感觉我更崩溃呢，天天加班赶需求哪有时间做优化的啊)。

原因：用户想要加载所有的点还不做聚合，而且每个点都要做动态扩散效果，还要实时刷新地图数据。

哎，先说我的解决方案吧。

第一点，我必须拿着我的数据让产品经理去给客户说有动效内存占用在600M到1200M跳动，动效是1s一个循环。那么每次执行动效就会让内存飚到1200M，然后接下来浏览器会回收之前渲染的内存，内存又降至600M。我就说这个实在没法优化只能去掉(我没有试加载动态图片会不会好点，但想来也差不多)。

第二点，我先说明图层的加载方案，当图层层级小于14时就加载全部点否则加载聚合点(what fuck)。客户就是这么牛，一般不应该是反着来吗。。那必须滴，这么多点客户也看不出点的位置更新，看到了也不知道是那个更新了。所以，出于性能考虑给出的方案是：当图层层级小于14的时候就不更新点。那么多点一起更新

第三点，前端是首次加载的时候把所有的数据都缓存起来的，由服务端推送更新消息，前端收到消息就维护缓存的数据并做相应的更新逻辑(在线离线/GIS等)，会维护一个更新队列，如果数据太大的时候就分次更新。好的，说了那么多废话是不是想水文啊

首先，每次更新(用户缩放和拖拽地图与推送)之前需要先拿到当前地图的四个角经纬度，然后调用Turf.js库提供的# pointsWithinPolygon方法：

const searchWithin = Turf.multiPolygon([[东],[南],[西],[北]]);

const ptsWithin = Turf.pointsWithinPolygon(Turf.points([...points]), searchWithin);

拿到当前可视范围内的点，再将可视范围内的点渲染到地图上。

第四点，当我开开心心把代码提交上去后，过了一会，我的前端同事给我说感觉页面还是很卡啊(0.0)。我表示不信，然后实际操作了一下，虽然上面的减少点的操作和减少点的数量让浏览器内存占用降了下来页面也确实不卡了，但是当我去拖动地图的时候发现问题了，怎么感觉拖着拖着的地图有规律的卡。怎么回事呢，再梳理下我明白了，之前的地图刷新时间是10s由于客户觉得刷新太慢了，索性就改成了3s，这一改一个不吱声，3s那不是很大概率当用户正在操作地图的时候地图重新渲染了所以感觉卡。知道问题就好办，判断用户当前是否在操作地图，movestart事件时表示用户开始操作地图，moveend事件表示用户结束操作。那就等用户操作地图结束后再更新地图，上手感受了一下一点也不卡了，搞定。

创作不易求，如果你看到这里还请您点赞收藏

2024年，Chrome将要正式禁用第三方Cookie了，这个变化对Web开发者来说是非常重要的，因为它将改变开发者如何设计网站以及如何搜集和使用用户数据。这是怎么一回事，到底有什么具体影响？

什么是Cookie？

随着互联网技术的发展，我们的生活变得越来越数字化，网上购物、社交、阅读新闻成为日常。而在这个数字化的世界中，Cookie扮演了一个不可或缺的角色。

Cookie是一种由浏览器保存在用户电脑上的小块数据，用来帮助网站记住用户的信息和设置。网站可以在前端直接操作Cookie，也可以根据服务器返回的指令设置Cookie，当浏览器请求同一服务器时相应的Cookie会被回传。Cookie让网站能够记住用户的登录状态、购物车中的商品、以及个性化设置等，极大地提升了用户体验。

第三方Cookie是咋回事？

然而，Cookie并非只有一种。其中，第三方Cookie与网站直接设置的第一方Cookie不同，它们通常由第三方广告商或网站分析服务设置。网站一般通过在前端页面引入第三方的Javascript程序文件来实现这种能力。

用于网站分析时，Cookie可以收集和存储有关用户访问网站的数据，如用户的浏览历史、停留时间、点击行为等。这些数据对于网站运营者来说非常有价值，可以帮助他们了解用户的行为和兴趣，优化网站的设计和功能，提升用户的体验。

用于广告时，Cookie可以用来追踪用户在不同网站上的行为，以便提供个性化广告和内容。这种广泛的追踪能力让广告商能够了解用户的喜好和习惯，从而推送更加精准的广告。

为什么要禁用第三方Cookie？

但第三方Cookie也引发了隐私方面的担忧。许多用户和隐私倡导者认为，广告商利用Cookie追踪用户的行为侵犯了个人隐私。

很多同学应该有这样的体验：你在某个网站搜索了某个东西，然后访问其它网站或服务时，网页会向你展示之前搜索过的类似东西。基于某些原因，有时候我们并不想这样被跟踪。

这种担忧导致了对第三方Cookie的禁用呼声。同时隐私担忧不仅仅来自于用户和隐私倡导者，也来自于法规如欧盟的通用数据保护条例（GDPR）和加州消费者隐私法案（CCPA）这样的法律要求。

为了应对这一问题，苹果公司在其Safari浏览器中率先禁用了第三方Cookie，微软和Mozilla也采取了类似措施。

谷歌的行动计划是什么样的？

但是，作为浏览器市场占有率第一的谷歌，却迟迟没有明显的动作，遭到了不少人的非议和批评。

为了解决这些问题，谷歌提出了“隐私沙盒”（Privacy Sandbox）计划，旨在开发一系列新的技术，既能保护用户隐私，又能支持广告商进行有效的广告投放。

想象一下，如果有一个中立的场所，既能让你安心地存放你的个人物品，又能让有需要的人在不侵犯你隐私的情况下了解你的需求，这就是隐私沙盒的理念。

例如，谷歌提出的FLoC（Federated Learning of Cohorts）技术，就是将用户分群，而非单独追踪个人行为，从而在保护个人隐私的同时提供群体级的广告定位。

作为市场份额最大的浏览器，谷歌计划在2024年1月开始逐步禁用第三方Cookie，在2024年第三季度完成第三方Cookie的全面禁用。

禁用导致的问题有哪些？

禁用第三方 Cookie 对网站主、广告商和用户都会产生一系列影响。针对不同群体的影响及解决方案如下：

网站主

第三方 Cookie 的禁用可能会让网站主失去对用户行为的深入分析能力，因为他们将不能再依靠第三方 Cookie 来追踪用户在多个网站上的活动。这可能会影响到网站的个性化服务和广告定位的准确性，进而影响网站收入。

解决方案：网站主可以更多地依赖第一方 Cookie，即直接由网站域设置和读取的 Cookie。这些 Cookie 可以帮助网站主跟踪用户在自己网站上的行为，而不越过隐私边界。此外，网站主可以通过提供更多的价值服务来鼓励用户主动分享信息。

对于拥有多个域名的网站主来说，可以使用同一个根域名来设置Cookie，这样在根域名下的所有子域名都可以访问这些Cookie，这种方法仍然在用户隐私保护的框架内。如果网站主拥有多个相关联的服务，可以实施更安全的单点登录解决方案，比如使用会话令牌和OAuth等协议。

广告商

广告商将难以像过去那样追踪用户在整个互联网的行为，从而无法进行精准的广告定向，这可能导致广告效果下降和收入减少。

解决方案：谷歌提出的隐私沙盒计划中，Event Conversion Measurement API 是一种技术解决方案，它允许广告商在不侵犯用户隐私的情况下测量广告转化率。此外，广告商还可以利用机器学习等技术，通过分析大量的匿名化和聚合数据来预测用户兴趣。不过广告商也有机会使用一些更隐蔽的技术追踪手段来保持原有的业务模式，具体一些技术下文会提到。

用户

用户的隐私得到更好的保护，但可能会失去一些基于个性化广告的便利性，例如推荐系统的准确性可能会下降。

解决方案：用户可以获得更多的隐私控制权，例如通过浏览器设置来决定哪些数据可以被网站使用。同时，随着技术的发展，用户可能会遇到更多基于隐私保护的个性化体验，例如使用本地算法来进行内容推荐，而不需要将个人数据传输到服务器。

谷歌真的做好了吗？

尽管谷歌提出了Privacy Sandbox这样的计划，希望在不依赖个人用户信息的情况下，仍然能够支持广告生态系统，但实际上这个计划也遭到了一些批评。批评者认为，这些新提出的技术可能仍然允许用户被追踪，只不过追踪的方式更加隐蔽了。

例如，FLoC的提出本意是为了代替传统的个人定向广告，它通过对用户进行群组化来推送广告，这样不会直接暴露个人的行为数据。但问题在于，群组化的数据仍然可能被用来间接识别和追踪个人，特别是当某个群组里的用户数量不多时。这就导致了一种新形式的隐私问题，即“群组隐私”的泄露。

还有广告服务商仍可能通过一些技术手段突破隐私限制，比如通过网站转发、Canvas指纹技术、网络信标、用户代理字符串、本地存储和ETag跟踪等。

此外，一些隐私倡导者还担心，谷歌作为一个广告公司，其提出的隐私解决方案可能偏向于维护其在在线广告市场中的主导地位。他们认为，谷歌有动机设计一套系统，搜集用户在搜索、YouTube和其他谷歌服务上的行为数据，使得自家的广告网络相比其他竞争对手拥有优势。而这可能会影响到广告市场的公平竞争，甚至可能对开放网络生态系统构成威胁。

总的来说，谷歌在隐私问题上的努力是一个积极的开始，但隐私保护的路还很长。而对于技术人员而言，理解这些变化和挑战，以及如何在保护用户隐私的同时提供优质服务，将是未来发展的一个重要课题。

关注萤火架构，提升技术不迷路！

前言

很多时候，老是质疑反问自己，在空闲时间都在干嘛呢？是沉迷于看动漫、美女视频，打游戏？还是在追求更有意义的事呢？自我回答，没错我是属于前者了（dog），然后前后左右思考，还是决定找一些事做，不能一直这么荒废了，起码做一些是一些，积少成多！但是能做什么呢？这又引起我这不聪明的大脑深深的思考，是从自己从事的职位来，还是从自己的兴趣来呢？然后在这段迷茫的时间一直在寻找中，突然有一天看到别人的文章或视频感触深刻，最后还是敲定做项目！然后就着手开始准备做起来，就这么愉快决定行动起来了，奥利给！

于是利用上班摸鱼时间和下班空闲的时间开始行动起来~

起源

在空闲的摸鱼时间里，我经常喜欢看别人写的文章，读完一篇又一篇，大多数时候都会感叹并羡慕。然鹅，特别是对于某些事情，我会有特别深的感触。因为有时候的情绪只是在特定时刻被触发的，所以我想记录下当时的触发感受和情绪。然后我就去寻找相关的插件，结果找到了一个相当不错的插件。试用了一番后，发现效果还不错，于是我决定将关注点留在这里，尝试着制作这类插件，看看自己做的的效果如何。有时候我在想，为什么要费力自己创建一个插件呢？毕竟市面上已经有现成的插件了，为什么不用呢？然而，答案很明了：一是想要找点事情做，二是想要提升一下自己的技能水平。于是，这样的动力激励着我行动起来。

需求

产品需求其实很明确，因为从我的角度来看已经有现成的产品可供参考，然后只需根据个人需求进行定制。因此，产品的主要目的是为了方便我们的生活。

因此，一个产品的设计应当能够满足不同用户的需求，以提供更好的使用体验。这里着重考虑我自己个人使用，因为每个人的习惯和偏好都不尽相同。

收集的功能需求：

• 对内容进行划线


• 记录想法/感想


• 统计列表数据


• 预览原文（主要是针对文章）


• 拷贝（划线、原文、Markdown）内容


• 下载（划线TXT、原文TXT、原文Markdown）内容

目前第一版只涵盖了这些功能需求（感谢ChatGPT，它帮助解决了我作为菜狗的许多问题），后续将根据需要情况进行调整和完善~

下面是完成的功能截图：

突然发现我开发这个插件还有一个小用处哈哈哈，针对类似我这种不会写文章格式的小白来说，有时候真的不知道该如何开始写。但有一个现成的文章作为参考，真是太棒了！它不仅能够给我提供灵感，还能够帮助我了解文章的结构和写作风格，让我更加自信地面对写作挑战！

拷贝的文章markdown格式：

最后打算发版到chrome，目前正在审核中~

总结

可能我是一个老老实实上班族的一个菜狗，但是勇于尝试也挺好的，毕竟在尝试中，我能够不断学习、成长，迎接新的挑战，拓展自己的能力和视野。

历经三个月的努力，终于完成了第一版。其实本来应该在一个多月内完成的，但中途我可能有些懒惰哈哈。虽然我觉得自己做的东西还不尽如人意，但从某种角度来说，至少我迈出了那一步。哪怕是简单的东西，也是通过自己制造出来的，多多少少都有一些成就感。而且，这个过程也丰富了我的技术栈。因此，我在开始思考如何完成一个要好的项目，是否可以继续打造一款完整的产品，让人们使用，如果有人使用我的产品，我也会感到非常满足！

最后思考

1、有时候，当你不知道该做什么时，一定不要让自己闲着。我深以为然，这句话给了我很大启发，我记得是在阅读一篇文章时被深深触动的。

2、有时候，想得再多也不如行动来得有效。即使方向错误，但这也是我从中获得的宝贵经验。总结经验才能不断进步。

3、时间是可以挤出来的，再忙再累也会有时间的。看个人是否愿意付诸行动，但也要适当放松，保持身心健康。

第一次写文章还是有点乱七八糟的，但这也是成长的一部分。还得继续努力，不断学习，能够更好地传达我的想法和观点!

RTSP流媒体播放器

前言：因公司业务需求，研究了下在web端播放rtsp流视频的方案，过程很曲折，但也算是颇有收获。

播放要求

• web网页播放或者手机小程序播放


• 延迟小于500ms


• 支持多路播放


• 免费

舍弃的方案

• 【hls】延时非常高，有时候能达到几十秒，实时性场景直接pass


• 【转rtmp】需要借助flash插件


• 【转图片帧】需要后端借助工具将rtsp视频流每一帧转成图片，再通过websocket协议实时传输到前端，前端用canvas绘制，这种方法对后端转流要求较高，每张图片如果太大会掉帧，延时也不稳定

思路尝试

1、 flvjs + ffmpeg + websocket + node

这套方案的核心为 BiLiBiLi 开源的 flvjs，原理是在后端利用 转流工具 FFmpeg 将 rtsp流 转成 flv流，然后通过 websocket 传输 flv流，在利用 flvjs 解析成可以在浏览器播放的视频。

flv不支持ios 请自行取舍

参考文章

2、WebRTC

Webrtc是前端的技术，后端使用有点困难，原理是将 rtsp流 转成 webrtc流，直接在video中播放（需要浏览器支持webrtc）

如何将rtsp转成webrtc 基于两个工具实现

参考链接1 :webrtcstreamer.js 前端实现