24省赛

1 智能停车系统

display: flex;
flex-direction: column;  /* 排成列*/
/* TODO: 请为下方属性填空，不要更改其他选择器里的代码 */
flex-wrap: wrap; 
align-content: space-between;
justify-content: space-between;

2 布局切换

document.querySelector('.active').classList.remove('active')
e.target.classList.add('active')

3 产品360度展示

const pipeline = async (initialValue, sequence) => {
  let res = initialValue;
  for (const fn of sequence) {
    res = await fn(res);
  }
  return res;
};

• 阻塞式的

const pipeline = (initialValue, sequence) => {
  let res = Promise.resolve(initialValue);
  for (const fn of sequence) {
    res = res.then((result) => fn(result));
  }
  return res;
};

• 非阻塞式，相当于

let res = Promise.resolve(initialValue);
res = res.then((result) => ani1(result))
res = res.then((result) => ani2(result))
res = res.then((result) => ani3(result))

这个相当于

let res = Promise.resolve(initialValue)
            .then((result) => ani1(result))
            .then((result) => ani2(result))
            .then((result) => ani3(result))

• Promise.reslove

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

也可以递归

4 多表单验证

  const validatePassword=(rule,value,cb)=>{
    if(/[^\u4e00-\u9fa5]/g.test(value)){
      cb(new Error("只能输入汉字"))
    }else{
      cb()
    }
  }
  const rules = reactive({
    name: [
      { validator:validatePassword, trigger: "blur" }, // 自定义验证规则
      { required: true, message: "请输入姓名", trigger: "blur" },
    ],
    sex: [{ required: true, message: "请选择性别", trigger: "change" }], // 普通验证规则
    age: [{ required: true, message: "请选择性别", trigger: "change" }], // 普通验证规则
    isCompetition: [{ required: true, message: "请选择是否参加过编程比赛", trigger: "change" }], // 普通验证规则
    isEntrepreneurship: [{ required: true, message: "请选择是否有过创业经历", trigger: "change" }], // 普通验证规则
  });

• 自定义验证要使用回调返回验证状态

5 找回连接的奇幻之旅

function resetableOnce(fn) {
    // TODO: 待补充代码
    let first = true, ans
    function runOnce(...arg) {
        if (first) {
            first = false
            ans = fn(...arg)
            return ans
        }else{
            return ans
        }
    }
    function reset() {
        first = true
    }
    // TODO: END
    return { runOnce, reset };
}

• 这个是简化版的
• 不需要判断函数的参数
• 参数也不考虑对象

6 tree命令助手

function generateTree(dirPath) {
  let ans = []
  let list = fs.readdirSync(dirPath)
  for (let item of list) {
    let option = { name: item }
    if (fs.statSync(path.join(dirPath, item)).isDirectory()) {
      option.children = generateTree(path.join(dirPath, item))
    }
    ans.push(option)
  }
  return ans
}

小递归

7 github明星项目统计

<option :value="item" v-for="item in languages">{{item}}</option>

const changeHandle = () => {
  let selected = [];
  if (language.value === "All") selected = chartData.value;
  else
    selected = chartData.value.filter(
      (item) => item.language === language.value
    );
  selected = selected.slice(pageStart.value - 1, pageEnd.value);
  xData.value = selected.map((item) => item.name);
  yData.value = selected.map((item) => item.stars);
  console.log(selected);
  initChart();
};

8 小蓝驿站

9 商品浏览足迹

window.onload = async () => {
  const MockUrl = `./js/data.json`;// 请求地址
  let data = [];// 存储请求后的数据
  // TODO：待补充代码，目标 1
  axios(MockUrl).then((result) => {
    data = result.data
    const newData = getData(data);
    showData(newData);
  })
};
const removeDuplicates = defaultData => {
  let newData = [];
  console.log(defaultData);
  const set = new Set()
  for (let item of defaultData) {
    let tag = item.id + item.viewed_on.slice(0, 10)
    if (set.has(tag)) continue
    set.add(tag)
    newData.push(item)
  }
  return newData;
}
const sortByDate = defaultData => {
  defaultData.sort((a, b) => {
    return b.viewed_on.localeCompare(a.viewed_on)
  })
  return defaultData;
}
const transformStructure = defaultData => {
  let newData = {};
  let day = ''
  for (let item of defaultData) {
    let today = item.viewed_on.slice(0, 10)
    if (today == day) {
      newData[day].push(item)
    } else {
      day = today
      newData[day] = [item]
    }
  }
  return newData;
}

10 NPM Download Simulator

function myRace(iterable) {
    // TODO：待补充代码  
    return new Promise((resolve, reject) => {
        if (!(Symbol.iterator in Object(iterable))) {
            // 这里不用区分具体的object
            reject(new TypeError(Object.prototype.toString.call(iterable).slice(-8, -1) + ' is not iterable'))
            return
        }
        let settled = false
        for (let prom of iterable) {
            Promise.resolve(prom).then((res) => {
                if (!settled) {
                    settled = true
                    resolve(res)
                }
            }, (res) => {
                if (!settled) {
                    settled = true
                    reject(res)
                }
            })
        }
    })
}

• 拿到类型：

Object.prototype.toString().call(target).splice(-1,-9)

• 是否可迭代：

Symbol.iterator in object

• 把非promise和promise统一化：

Promise.reslove(item)

function promiseRace(promises) {
    return new Promise((resolve, reject) => {
        for (const promise of promises) {
            Promise.resolve(promise).then(resolve, reject);
        }
    });
}