效果图

引言

老板: “我们公司是做基金的，用户都在买买买，可他们的钱去了哪里？没有时间轴，用户会不会觉得自己的钱瞬移了？”

你: “哈哈，确实！时间轴就像用户的投资地图，不然他们可能觉得钱被外星人劫走了。”

老板: “没错！我们得在时间轴上标清‘资金到账’、‘收益结算’这些节点，这样用户就不会担心他们的钱去买彩-票了。”

你: “放心吧，老板，我马上设计一个时间轴，让用户一看就明白他们的钱在干什么，还能时不时地笑一笑！”

老板: “好，赶紧行动，不然用户要开始给我们寄失踪报告了！”

废话不多说，我们直接开始吧！！！

组件定义

以下代码为时间轴组件的实现，详细注释在代码中。如果有任何疑问，欢迎在评论区留言讨论，或者联系我获取完整案例。

组件的 .js 文件：

/*可视化地呈现时间流信息*/

Component({

  options: {

    multipleSlots: true // 在组件定义时的选项中启用多slot支持

  },

  properties: {

    activities: { // 时间轴列表

      type: Array,

      value: []

    },

    shape: { // 时间轴形状

      type: String,

      value: 'circle' // circle | square

    },

    ordinal: { // 是否显示序号

      type: Boolean,

      value: true

    },

    reverse: { // 是否倒序排列

      type: Boolean,

      value: false

    }

  },

  lifetimes: {

    attached() {

      // 是否倒序排列操作数据

      const {reverse, activities} = this.data

      if (!reverse) return

      this.setData({

        activities: activities.reverse()

      })

    }

  }

})

组件的.wxml文件：

<view class="container">

  <view class="item" wx:for="{{activities}}" wx:key="item">

    <view class="item-tail"></view>

    <view class="item-node {{shape}} {{item.status}}">

      <block wx:if="{{ordinal}}">{{index + 1}}</block>

    </view>

    <view class="item-wrapper">

      <view class="item-news">

        <view class="item-timestamp">{{item.date}}</view>

        <view class="item-mark">收益结算</view>

      </view>

      <view class="item-content">

        <view>{{item.content}}</view>

        <!--动态slot的实现方式-->

        <slot name="operate{{index}}"></slot>

      </view>

    </view>

  </view>

</view>

组件使用

要使用该组件，首先需要在 app.json 或 index.json 中引用组件：

"usingComponents": {

    "eod-timeline": "/components/Timeline/Timeline"

}

然后你可以通过以下方式进行基本使用：

<eod-timeline activities="{{dataList}}" ordinal="{{true}}"></eod-timeline>

如果需要结合插槽动态显示操作记录，可以这样实现：

<eod-timeline activities="{{dataList}}" ordinal="{{true}}">

    <!--动态slot的实现方式-->

    <view wx:for="{{dataList}}" wx:for-index="idx" wx:key="idx" slot="operate{{idx}}">

      <view class="row-operate">

        <view>操作记录</view>

        <view>收益记录</view>

        <view>动账记录</view>

      </view>

    </view>

</eod-timeline>

数据结构与属性说明

dataList 数据结构示例如下：

dataList:[

  {date: '2023-05-26 12:04:14', status: 'info', content: '内容一'},

  {date: '2023-05-25 12:04:14', status: 'success', content: '内容二'},

  {date: '2023-05-24 12:04:14', status: 'success', content: '内容三'},

  {date: '2023-05-23 12:04:14', status: 'error', content: '内容四'},

  {date: '2023-05-22 12:04:14', status: 'warning', content: '内容五'}

]

组件的属性配置如下表所示：

总结

这个时间轴组件提供了一个简单易用的方式来展示事件的时间顺序。组件支持定制形状、序号显示以及正序或倒序排列，同时允许通过插槽自定义内容，增强了组件的灵活性。代码中有详细注释，方便理解和修改。如果需要更详细的案例或有任何疑问，请在评论区留言。希望这篇文章对你有所帮助！

拓展阅读

关于动态 Slot 实现：

由于动态 slot 目前仅可用于 glass-easel 组件框架，而该框架仅可用于 Skyline 渲染引擎，因此这些特性也同样受此限制。如果需要在非 glass-easel 组件框架中实现动态 slot，请参考上文标记了 <!--动态slot的实现方式--> 的代码段。

如需了解更多关于 glass-easel 组件框架的信息，请参阅微信小程序官方开发指南。

前言

  大家好，我是沐浴在曙光下的贰货道士，好久不见，别来无恙！本文主要根据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 使用。


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


• ...

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

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

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

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

局部刷新作为提高Flutter页面性能的重要手段，是每一个Flutter老手都必须掌握的技巧。当然，我们不用非得使用Riverpod、Provider、Bloc这些状态管理工具来实现局部刷新，Flutter框架本身也给我们提供了很多方便快捷的刷新方案，今天要提的就是Notifier三剑客，用它来处理局部刷新，代码优雅又方便，可谓是居家必备之良器。

ChangeNotifier

ChangeNotifier作为数据提供方，给出了响应式编程的基础，我们先来看看ChangeNotifier的源码。

作为一个mixin，它就是实现了Listenable，这又是个什么呢？

这个抽象类，实际上就是实现了addListener和removeListener两个监听的处理。所以接下来我们看看ChangeNotifier是如何实现者两个方法的。

源码很简单，就是创建的listener添加到_listeners列表中。

移除也很简单。最后看下核心的notifyListeners方法。

这个方法就是遍历_listeners，来触发监听Callback。整体就是一个标准的「订阅-发布」流程。

作为Notifier家族的长辈，它的使用会略复杂一些，我们来看一个例子。首先，需要mixin一个ChangeNotifier。

class CountNotifier with ChangeNotifier {

  int count = 0;



  void increase() {

    ++count;

    notifyListeners();

  }

}

然后再创建一个TestWidget来调用这个ChangeNotifier。

class CountNotifierWidget extends StatefulWidget {

  const CountNotifierWidget({super.key});



  @override

  State<StatefulWidget> createState() {

    return _CountNotifierState();

  }

}



class _CountNotifierState extends State<CountNotifierWidget> {

  final CountNotifier _countNotify = CountNotifier();

  int _count = 0;



  @override

  void initState() {

    super.initState();

    _countNotify.addListener(updateCount);

  }



  void updateCount() {

    setState(() {

      _count = _countNotify.count;

    });

  }



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: Text("Test: $_count"),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: () => _countNotify.increase(),

        child: const Icon(Icons.add),

      ),

    );

  }



  @override

  void dispose() {

    super.dispose();

    _countNotify.removeListener(updateCount);

  }

}

这样当我们修改ChangeNotifier的value的时候，就会Callback到updateCount实现刷新。

这样就形成了一个响应式的基础模型，数据修改，监听者刷新UI，完成了响应式的同时，也实现了局部刷新的功能，提高了性能。

ValueNotifier

在使用ChangeNotifier的时候，每次在修改变量时，都需要手动调用notifyListeners()方法，所以，Flutter创建了一个新的组件——ValueNotifier，它的源码如下。

从源码可以看见，ValueNotifier就是在set方法中，帮你调用了下notifyListeners()方法。同时，ValueNotifier封装了一个泛型变量，简化了ChangeNotifier的创建过程，所以大部分时间我们都是直接使用ValueNotifier。

那么有了它之后，我们就可以省去新建类的步骤，对于单一的基础类型变量，直接创建ValueNotifier即可，就像上面的例子，我们可以直接改造成下面这样。

class _CountNotifierState extends State<CountNotifierWidget> {

  final ValueNotifier<int> _countNotify = ValueNotifier(0);



  @override

  void initState() {

    super.initState();

    _countNotify.addListener(updateCount);

  }



  void updateCount() {

    setState(() {});

  }



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: Text("Test: ${_countNotify.value}"),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: () => _countNotify.value++,

        child: const Icon(Icons.add),

      ),

    );

  }



  @override

  void dispose() {

    super.dispose();

    _countNotify.removeListener(updateCount);

  }

}

这样我们就简化了不少的模板代码。

ValueListenableBuilder

我们从ChangeNotifier到ValueNotifier，逐步减少了模板代码的创建，但是依然还有很多问题，比如我们还是需要手动addListener、removeListener或者是dispose，同时，还需要使用setState来刷新页面，如果Context控制不好，很容易造成整个页面的刷新。因此，Flutter在它们的基础之上，又提供了ValueListenableBuilder来解决上面这些问题。

我们继续改造上面的例子。

class _CountNotifierState extends State<CountNotifierWidget> {

  final ValueNotifier<int> _countNotify = ValueNotifier(0);



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: ValueListenableBuilder<int>(

          valueListenable: _countNotify,

          builder: (context, value, child) {

            return Text('Value: $value');

          },

        ),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: () => _countNotify.value++,

        child: const Icon(Icons.add),

      ),

    );

  }



  @override

  void dispose() {

    super.dispose();

    _countNotify.dispose();

  }

}

可以发现，我们使用ValueListenableBuilder来根据ValueNotifier的改变而刷新Widget。这样不仅简化了代码模板，而且不再使用setState来进行页面刷新。

ValueListenableBuilder作为一个非常经典的Widget，在它的注释中，就有很多教程和示例。

再看它的源码。

这里需要接收3个参数，其中valueListenable用来接收ValueNotifier，builder用来构建Widget，而child，用来创建不依赖ValueNotifier构建的Widget（这是一个很经典的性能优化的例子，如果子构建成本高，并且不依赖于通知符的值，我们将使用它进行优化）。

这个优化方案非常经典，在Flutter的很多地方都有使用这个技巧，特别是动画这块的处理。通常来说ValueNotifier对应ValueListenableBuilder，Listenable、ChangeNotifier对应AnimatedBuilder。

自定义类型

在使用自定义类型时，例如一个包装类，那么当你改变它的某个属性值时，ValueListenableBuilder是不会刷新的，我们来看下面这个例子。

class Wrapper {

  int age;

  String name;



  Wrapper({this.age = 0, this.name = ''});

}



class _CountNotifierState extends State<CountNotifierWidget> {

  final ValueNotifier<Wrapper> _countNotify = ValueNotifier(Wrapper());



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: ValueListenableBuilder<Wrapper>(

          valueListenable: _countNotify,

          builder: (context, value, child) {

            return Text('Value: ${value.age}');

          },

        ),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: () => _countNotify.value.age = _countNotify.value.age + 1,

        child: const Icon(Icons.add),

      ),

    );

  }



  @override

  void dispose() {

    super.dispose();

    _countNotify.dispose();

  }

}

这样的话，ValueListenableBuilder就失去作用了，其原因也很简单，ValueNotifier所监听的数据其实并未发生改变，实例的内存地址没发生改变，所以，直接创建一个新的对象，就可以触发更新了，就像下面这样。

onPressed: () => _countNotify.value = Wrapper(age: 10),

自定义类型局部刷新

上面这种自定义模型的刷新方法还是略显复杂了一点，每次更新的时候，都要copy一下数据来实现更新，实际上，ValueNotifier继承自ChangeNotifier，所以可以通过手动调用notifyListeners的方式来进行刷新，我们改造下上面的例子。

class WrapperNotifier extends ValueNotifier<Wrapper> {

  WrapperNotifier(Wrapper value) : super(value);



  void increment() {

    value.age++;

    notifyListeners();

  }

}



// 调用处

_countNotify.increment();

通过这种方式，我们可以实现当模型内部变量更新时，局部进行刷新了。

欢迎大家关注我的公众号——【群英传】，专注于「Android」「Flutter」「Kotlin」
我的语雀知识库——http://www.yuque.com/xuyisheng

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）类的实现。