0510

工作

• 前端水印优化、提测：

  • 字体边界处理：考虑水印字体的最小值，不能单纯的使用 width * 2% 作为字体大小，最小值限制为 12px 以上
  • 图片边界处理：忽略不规则比例的图片，那种很长很扁的图片导致的水印问题，不处理；那种很小的头像类图片，不处理；
  • vux 中使用上传组件时，有个小坑：第一次上传校验失败的文件，二次上传同一个文件时，会缓存 File 的 value 值，这样就不会触发 onchange 事件。解决方法：this.$refs.pathClear.value ='' ，详情：

  <div class="upload-image add-image">
      <div class="add-phpne">
          <form class="uploadForm" enctype="multipart/form-data" style="z-index: 3">
              <input ref="pathClear" style="z-index: 10" type="file" name="file" class="upload-input" accept="image/*" @change="uploadImage($event)" />
              <img src="../../assets/camera.png" class="camera-image" />
          </form>
      </div>
  </div>
  
  <!-- 
  
  methods: {
  	uploadImage: function (event) {
  		// this.$refs.pathClear.value =''
  		// 第一次触发后，这里不会二次触发
  		// validate...return
  	}
  }
  
  -->

  • 函数内需要等待异步操作的返回结果时，使用 promise ：遇到一个函数A调用函数B，关系大致如下：

  function A() {
      // 这里的 b 是 undefined
      const b = B()
  }
  async function B() {
      const r1 = await getR1()
      const img = new Image()
      img.onload = function () {
          //...
          const r2 = xxx()
          return r2
      }
  }

  看上面的代码，拿到的结果 b 是空的，因为下面函数 B 返回是 void，虽然异步操作 onload 最后有返回，但是因为是异步，因此拿不到。

  改进：

  async function A() {
      // 这里的 b 是 有值的
      const b = await B()
  }
  async function B() {
      return new Promise((resolve) => {
          const r1 = await getR1()
          const img = new Image()
          img.onload = function () {
              //...
              const r2 = xxx()
              resolve(r2)
          }
      })
  }

  不知道为啥自己一时间脑子短路，居然忘了异步返回怎么处理，诶！！

学习

• 优秀文章
• 算法

反思

• 做的不好的
• 做的好的

明日计划

• 水印优化
• PDP
• 重构进入开发