随缘

Appearance

开发中遇到的问题 ​

移动端兼容问题 ​

1.上传音频的兼容问题 ​

accept 只设置audio/*,ios 无法选取音频文件 ​

实验发现设置 accept="audio/*, .mp3, .wma, .amr, .wav, .m4a"，可以兼容 ios 和安卓选取这些音频文件(wma 还是无法选取)

播放兼容情况 ​

场景：通过input框选取本地音频文件后得到的file对象，URL.createObjectURL(file)得到本地文件播放地址 播放器：原生audio标签

mp3 文件：安卓选取的文件必须带有扩展名，否则file.type 为空、file.name是文件命本身（没有扩展名） m4a 文件：，安卓、ios 均不支持播放，有可能是URL.createObjectURL(file)转换后造成的问题

html
<!--安卓可以播放远端的m4a文件，ios不支持-->
<audio class="audio-box" controls autoplay crossorigin="anonymous">
  <source src="xxx.m4a" type="audio/mp4" />
</audio>
  • wma 文件： ios 无法选取该类型文件，（accept 属性设置了无效，暂时不知道原因）

文件.amr 与 .wav 暂时没有遇到兼容的问题 ​

移动端相关 ​

总结移动端 H5 开发常用技巧移动端适配的 5 种方案

组件更新问题 ​

在一次做动画跳跃的时候， 每次跳跃需要为空

js
el.style.animation = "";
el.style.animationFillMode = "";

但是 🈶 需要重新设置回来，让其再次跳跃

js
el.style.animation = "jump 1s linear";
el.style.animationFillMode = "both";

这里有一个坑

js
el.style.animation = "";
el.style.animationFillMode = "";
console.log(123);
el.style.animation = "jump 1s linear";
el.style.animationFillMode = "both";

这样子操作会跳跃正常， 触发更新样式 2 次， 因为 console.log 具有 debugger 类似的功能， 让下面内容暂停执行 但是， 如果去掉 console.log，也就是

js
el.style.animation = "";
el.style.animationFillMode = "";

el.style.animation = "jump 1s linear";
el.style.animationFillMode = "both";

这样子的话，跳跃异常， 因为只会触发一次样式更新， 如果没有清空这个 animation， 样式将不发生改变， 页面不会触发更新。

我的做法 ​

因为我们要触发更新， 使 animation 样式发生变化，因此, 每次需要跳跃的时候， 让动画名字发生变化，这样就可以使 animation 样式发生变化，即如下代码展示：

js
// 用时间搓保证每次的动画名都会不重复
const animationName = `animation-${+new Date()}`;

el.style.animation = `${animationName} 1s linear`;

任务的并行处理 ​

js
const task1 = () => {
  console.log("task1");
};
const task2 = () => {
  console.log("task2");
};
const task3 = () => {
  console.log("task3");
};
const task4 = () => {
  console.log("task4");
};
function cb() {
  console.log("最后才执行的回调");
}

const taskQueue = [];
const maxCount = 2; // 最大运行数量
let runningCount = 0; // 正在运行的数量
// 添加任务
function addTask(fn, time, isFinish) {
  const task = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        fn();
        resolve(isFinish);
      }, time);
    });
  };
  taskQueue.push(task);
}

// 执行任务
function executeTask(callback) {
  if (!taskQueue.length || runningCount > 2) return;
  runningCount++; // 每执行一个任务++
  const task = taskQueue.shift(); // 取出任务, task是一个函数(shift删除最前面一个, 并返回删除的元素)
  task().then((isFinish) => {
    // .then拿到是否结束
    if (isFinish) {
      // 结束后我们才执行回调
      callback();
      return;
    }
    // then后,说明执行完毕 runningCount --
    runningCount--;
    executeTask(callback); // 没结束, 执行下一个任务
  });
}

function collectTask() {
  addTask(task1, 1000, false);
  addTask(task2, 3000, false);
  addTask(task3, 1000, false);
  addTask(task4, 5000, true);
}
// 收集任务
collectTask();

// maxCount === 2
for (let i = 0; i < maxCount; i++) {
  console.log(123);
  executeTask(cb);
}

我们可以通过上述代码，来并行处理自己的逻辑

地址组件获取上级 code 问题 ​

问题描述 ​

js
const arr = [
  {
    code: "110000",
    name: "北京市",
    children: [
      {
        code: "110100",
        name: "市辖区",
        children: [
          {
            code: "110101",
            name: "东城区",
          },
        ],
      },
    ],
  },
];

const targetCode = "110101";

// 问：如何根据 targetCode 这个字符串找到 arr 数组对应的上级所有的 code, 最终输出['110000'，110100，110101']

实现 ​

js
function findCode(codeToFind, arr, path = []) {
  for (const item of arr) {
    // 当前路径加上当前项目的code
    const currentPath = path.concat(item.code);
    // 检查当前项目的code是否是我们要找的code
    if (item.code === codeToFind) {
      // 如果找到了，返回当前路径
      return currentPath;
    }
    // 如果当前项目有子项，递归搜索子项
    if (item.children) {
      const result = findCode(codeToFind, item.children, currentPath);
      // 如果在子项中找到了结果，提前返回结果
      if (result) {
        return result;
      }
    }
  }
  // 如果没有找到匹配项，结果会是undefined
  return undefined;
}

⭐️⭐️⭐️ 好啦！！！本文章到这里就结束啦。⭐️⭐️⭐️

✿✿ ヽ(°▽°)ノ ✿

撒花 🌸🌸🌸🌸🌸🌸

上次更新于: