每周技术记录(二)

笔记

1. ### 实现一些变化时避免js操作样式变化。纯展示类交互寻求零js方案

不写一行代码就是最好的避免bug的方式。

1. ### 组件封装

• 结构设计

• 展现效果

• 行为设计

• API（功能）

封装中的js，要求API保证原子操作、职责单一、满足灵活性。

• Event（控制流）

尽量实现低耦合 > 耦合是指两个类之间联系的紧密程度，例如两个类A和B，B中的参数非A不可，就为强耦合，A和B为直接关系。 > > 低耦合就是A和B为间接关系，这个转化过程成为“解耦” > > 可以使用自定义事件来解耦

1. #### 重构：插件化

将Event注入流插件化。 不需要相应功能时直接注释掉就可以使相应功能失效，但需要在css和HTML删除相应样式。 > 插件也可以看成组件 > > 小组件组成大组件

1. #### 重构：模板化

将HTML模板化，更易于拓展。 在js中渲染HTML，如果不需要的话，直接注释即可。

1. #### 重构：组件框架

##### 抽象

• 将通用的组件模型抽象出来

1. ### 过程抽象

例如：让某些操作只执行一次，这个需求剥离出来为一个函数，就成为过程抽象。

once函数（只操作一次） 这个函数成为高阶函数 - 以函数作为参数 - 以函数作为返回值 - 返回值和直接调用参数的函数相同 - 常用于作为函数装饰器

#### 常用高阶函数：

• Once 执行一次
• Throttle 截留函数
• 设定时间去统计数据，防止数据变化太快增大负担。
• 函数里有timer属性来实现截留。计时器达到相应数字时令timer为空，就统计一次。

• Debounce 防抖函数
• 例子：鼠标快速移动、抖动时不会触发操作，当停止一段时间才会操作。
• 同样有timer属性，移动时clear timer属性，不动时timer超时就会调用。

• Consumer 解析循环
• 让循环或者操作增加延迟，但是会执行完毕。
• Lterative 批量操作
• 例子：让原本只能一个个操作的元素，可以批量渲染。

1. ### 计算机动画原理

• 快速
• 连续排列
• 彼此差异极小
• 制造错觉

1. ### 各种动画

1. #### css动画

animation是常见的css动画实现方式。

```css animation-name: text; 指定应用某个动画 animation-duration:6s; animation-duration:1s 2s 6s; 指定一个动画周期的时长 animation-timing-function:inherit; 定义css动画在每一动画周期中执行的节奏。 animation-delay:3s; 延迟动画 animation-iteration-count:infinite; 定义运行次数，支持小数。

```

transform

``css transform:scale(0,5); 缩放x轴和y轴 transform:rotate(30deg); 旋转角度 transform:skew(30deg,10deg); 沿x轴和y轴倾斜。 ``

1. #### js动画

1. #### svg动画

---

微信小程序：

css样式：

1. ### 动画过滤，使动画不那么生硬。

transition

``css .active { color: black; transition: transform .18s ease; transform: scale(1.03); position: relative; } ``

1. ### 文字和图片对齐

设置文本的行高和父元素相同

``css line-height: 100%; ``

1. ### 让文本显示在图片之中

使用相对定位

让图片作为父元素，文本作为子元素，进行调试即可

``css position: relative; top: 0 rpx; ``

1. ### 布局

``css display:none; display:bolck; display:inline; display:inline-block; display:flex; display:inherit; ``

• bolck:
• 总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列。
• 可以设置高度、宽度
• inline:
• 它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
• 行内元素不可以设置高度宽度，只能设置左右的内外边距。

原文发布于 CSDN