凡科怎么建设网站,北京冬奥会吉祥物设计制作,国际网站建设公司,网站建设公司 北京前言#xff1a;一个函数应该尽量做一件事情#xff0c;如果非要做多个事情#xff0c;要做函数提取#xff0c;每次迭代应该考虑到是否有重复代码或者可以优化的代码。 长函数#xff1a;长函数的产生#xff1a;
逻辑是平铺直叙的需求迭代没有考虑优化#xff0c;一次… 前言一个函数应该尽量做一件事情如果非要做多个事情要做函数提取每次迭代应该考虑到是否有重复代码或者可以优化的代码。 长函数长函数的产生
逻辑是平铺直叙的需求迭代没有考虑优化一次加一点
一、避免逻辑是平铺直叙
不要把多个逻辑的事情写到一个函数中每个函数只做一件事情。
badCase
methods: {fetchDataAndRender() {// 数据请求axios.get(https://api.example.com/data).then(response {// 数据处理this.data response.data;// DOM操作document.getElementById(result).innerText this.data;// 事件处理document.getElementById(button).addEventListener(click, () {alert(Data loaded successfully!);});}).catch(error {console.error(Error fetching data: , error);});}
}
goodCase
// Good Case
methods: {fetchData() {axios.get(https://api.example.com/data).then(response {this.data response.data;}).catch(error {console.error(Error fetching data: , error);});},renderData() {document.getElementById(result).innerText this.data;},handleButtonClick() {document.getElementById(button).addEventListener(click, () {alert(Data loaded successfully!);});}
}二、函数最大行数
每个语言的设计不太一样每个人对长函数的理解也不同所以说没有一个规范的限制可以给自己设定一个限制前端应尽量保持一个函数不要超过30行。
badCase methods: { registerUser() { const { username, email, password } this.form; if (!username || !email || !password) { alert(所有字段都是必填项); return; } if (!/^\w([\.-]?\w)*\w([\.-]?\w)*(\.\w{2,3})$/.test(email)) { alert(无效的电子邮件地址); return; } if (password.length 6) { alert(密码长度至少为6个字符); return; } // 假设有一个axios实例 this.axios.post(/api/register, { username, email, password }) .then(response { if (response.data.success) { alert(注册成功); this.$router.push(/login); } else { alert(注册失败 response.data.message); } }) .catch(error { console.error(注册出错, error); alert(注册时发生错误请稍后再试); }); } }
goodCase methods: { registerUser() { if (!this.validateForm()) { return; } this.sendRegistrationRequest(); }, validateForm() { const { username, email, password } this.form; if (!username || !email || !password) { alert(所有字段都是必填项); return false; } if (!/^\w([\.-]?\w)*\w([\.-]?\w)*(\.\w{2,3})$/.test(email)) { alert(无效的电子邮件地址); return false; } if (password.length 6) { alert(密码长度至少为6个字符); return false; } return true; }, sendRegistrationRequest() { this.axios.post(/api/register, this.form) .then(response { if (response.data.success) { alert(注册成功); this.$router.push(/login); } else { alert(注册失败 response.data.message); } }) .catch(error { console.error(注册出错, error); alert(注册时发生错误请稍后再试); }); } }
三、避免重复的语句出现if|else居多
遇到简单的if的语句时应当换成三元表达式遇到if|else逻辑相似时应该抽离
badCase data() { return { userRole: admin }; }, computed: { welcomeMessage() { return this.getWelcomeMessage(); } }, methods: { getWelcomeMessage() { let message ; if (this.userRole admin) { message 欢迎管理员; } else if (this.userRole editor) { message 欢迎编辑者; } else if (this.userRole viewer) { message 欢迎查看者; } else { message 欢迎访客; // 假设这里还有其他逻辑导致函数过长 // ...省略其他逻辑 } // 假设这里还有更多的条件判断和逻辑处理 // ...省略 return message; } }
goodCase: data() { return { userRole: admin, roleMessages: { admin: 欢迎管理员, editor: 欢迎编辑者, viewer: 欢迎查看者, } }; }, computed: { welcomeMessage() { // 使用对象查找如果不存在则返回默认消息 return this.roleMessages[this.userRole] || 欢迎访客; } }
}
四、需求迭代是否考虑到了优化
当遇到新的需求迭代避免不了影响之前的函数内的逻辑处理。
前瞻性设计开发一开始是否考虑到如果需求有了迭代是否提前留好了后续的余地童子军军规需求迭代后是否比迭代前的代码更加干净整洁粒度越小越好是否真的做到了每个函数是独立的只做了一件事情
