前端开发中的代码优化

在前端开发过程中，我们可以优化一些代码的书写。

1.用箭头函数进行简化。如将

$(".selectAll").click(function(){
    $(".tickImg").attr("src","images/tickFilled.png")
})

优化为

$(".selectAll").click(()=>{
    $(".tickImg").attr("src","images/tickFilled.png")
})

 

2.标签的自定义属性可用data-xx='yy'来实现。可将

$('.name').attr('data-id')

优化为

$('.name').data('id')

即可得yy。

 

3.简化sessionStorage和localStorage的存取。如将

sessionStorage.setItem("name","lyh")
const name = sessionStorage.getItem("name")

优化为

sessionStorage.name = "lyh"
const name = sessionStorage.name

 

4.使用倒引号简化字符串。如将

$(".searchResult").append(
    '<div>\
            <span>'+arr[i].displayName+'</span>\
            <span>'+arr[i].phone+'</span>\
        </div>\
    </div>'
)

优化为

$(".searchResult").append(
    `<div>
            <span>${arr[i].displayName}</span>
            <span>${arr[i].phone}</span>
        </div>
    </div>`
)

 

5.将解构赋值直接作为函数参数。

6.使用Object.assign优化对sessionStorage的赋值。

如将

const goToFillFormPage = (item) => {
  let { pageCode, workCode, workConfCode, workType } = item;
  sessionStorage.pageCode = pageCode;
  sessionStorage.workCode = workCode;
  sessionStorage.workConfCode = workConfCode;
  sessionStorage.workType = workType;
  router.push(`/generatedForm`);
};

优化为

const goToFillFormPage = ({ pageCode, workCode, workConfCode, workType }) => {
  Object.assign(sessionStorage, { pageCode, workCode, workConfCode, workType });
  router.push(`/generatedForm?pageCode=${pageCode}`);
};

 

7.可以将三元表达式简化为逻辑或运算符，使代码更加简洁和易读。

如将

const extendInfoItem = sessionStorage.extendInfoItem
  ? JSON.parse(sessionStorage.extendInfoItem)
  : {};

优化为

const extendInfoItem = JSON.parse(sessionStorage.extendInfoItem || '{}');

如果sessionStorage.extendInfoItem为假值（如null或undefined），则会返回一个空对象{}。

 

8.使用async/await来处理异步操作，再加上try-catch，使代码更加简洁易读。

如将

const init = () => {
  ActivitiApi.getFormDetail(sessionStorage.pageCode)
    .then(({ data }) => {
      if (data.code === 200) {
        const { column } = JSON.parse(data.data.columnInfo);
        res.value = data.data;
        res.value.columnList = column;
        formOrderData();
      } else {
        Toast.fail(data.message);
      }
    })
    .catch((err) => {
      console.error(err);
    });
};

优化为

const init = async () => {
  try {
    const { data } = await ActivitiApi.getFormDetail(sessionStorage.pageCode);
    if (data.code === 200) {
      const { column } = JSON.parse(data.data.columnInfo);
      res.value = data.data;
      res.value.columnList = column;
      formOrderData();
    } else {
      Toast.fail(data.message);
    }
  } catch (err) {
    console.error(err);
  }
};

 

9.用map循环+join函数代替传统的for循环+substring函数。

如将

let str = "";
for (let user of collectUser.value) {
  str += user.name + ",";
}
str = str.substring(0, str.length - 1);

优化为

let str = collectUser.value.map((user) => user.name).join(",");

 

10.用策略模式优化代码

如将

const onSelect = (item, action) => {
  switch (action.text) {
    case "修改表单":
      modifyFormInfo(item);
      break;
    case "填写人配置":
      configCollectUsers(item);
      break;
    case "管理员配置":
      configAllowUsers(item);
      break;
    case "删除":
      deleteTask(item);
      break;
  }
};

优化为

const onSelect = (item, action) => {
  const actions = {
    修改表单: modifyFormInfo,
    填写人配置: configCollectUsers,
    管理员配置: configAllowUsers,
    删除: deleteTask,
  };
  if (actions.hasOwnProperty(action.text)) {
    actions[action.text](item);
  }
};

 

11.使用逻辑或运算符 || 来处理 sessionStorage.xx 为 0 的情况，避免使用 if 判断语句。

如将

const addNode = () => {
  if (sessionStorage.nodeNo) {
    sessionStorage.nodeNo = Number(sessionStorage.nodeNo) + 1;
  } else {
    sessionStorage.nodeNo = 1;
  }
  router.push("/addApproval");
};

优化为

const addNode = () => {
  sessionStorage.nodeNo = (Number(sessionStorage.nodeNo) || 0) + 1;
  router.push("/addApproval");
};