每周技术记录(二)

笔记

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

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

2. 组件封装

   • 结构设计

   • 展现效果

   • 行为设计

     • API（功能）

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

     • Event（控制流）

       尽量实现***低耦合***

       ***耦合***是指两个类之间联系的紧密程度，例如两个类A和B，B中的参数非A不可，就为强耦合，A和B为直接关系。

       低耦合就是A和B为间接关系，这个转化过程成为***“解耦”***

       可以使用自定义事件来***解耦***

     1. 重构：插件化

        将Event注入流插件化。

        不需要相应功能时直接注释掉就可以使相应功能失效，但需要在css和HTML删除相应样式。

        插件也可以看成组件

        小组件组成大组件

     2. 重构：模板化

        将HTML模板化，更易于拓展。

        在js中渲染HTML，如果不需要的话，直接注释即可。

     3. 重构：组件框架

        抽象

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

3. 过程抽象

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

   once函数（只操作一次）

   这个函数成为高阶函数

   • 以函数作为参数
   • 以函数作为返回值
     • 返回值和直接调用参数的函数相同
   • 常用于作为函数装饰器

   常用高阶函数：

   • Once 执行一次

   • Throttle 截留函数

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

   • Debounce 防抖函数

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

   • Consumer 解析循环

     • 让循环或者操作增加延迟，但是会执行完毕。

   • Lterative 批量操作

     • 例子：让原本只能一个个操作的元素，可以批量渲染。

4. 计算机动画原理

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

5. 各种动画

   1. css动画

      ***animation***是常见的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

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

   2. js动画

   3. svg动画

---

微信小程序：

css样式：

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

   transition

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

2. 文字和图片对齐

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

       line-height: 100%;
   

3. 让文本显示在图片之中

   使用相对定位

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

       position: relative;
   	top: 0 rpx;
   

4. 布局

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

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