代码的坏味道——长函数

前言:一个函数应该尽量做一件事情,如果非要做多个事情,要做函数提取,每次迭代应该考虑到是否有重复代码或者可以优化的代码。

长函数:长函数的产生:

  • 逻辑是平铺直叙的
  • 需求迭代没有考虑优化,一次加一点

一、避免逻辑是平铺直叙

不要把多个逻辑的事情写到一个函数中,每个函数只做一件事情。

badCase:

javascript 复制代码
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:

javascript 复制代码
// 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:

javascript 复制代码
 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:

javascript 复制代码
  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:

javascript 复制代码
 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:

javascript 复制代码
 data() {  
    return {  
      userRole: 'admin',  
      roleMessages: {  
        admin: '欢迎管理员!',  
        editor: '欢迎编辑者!',  
        viewer: '欢迎查看者!',  
      }  
    };  
  },  
  computed: {  
    welcomeMessage() {  
      // 使用对象查找,如果不存在则返回默认消息  
      return this.roleMessages[this.userRole] || '欢迎访客!';  
    }  
  }  
}  

四、需求迭代,是否考虑到了优化?

当遇到新的需求迭代,避免不了影响之前的函数内的逻辑处理。

  • 前瞻性设计:开发一开始是否考虑到如果需求有了迭代?是否提前留好了后续的余地?
  • 童子军军规:需求迭代后,是否比迭代前的代码更加干净整洁?
  • 粒度越小越好:是否真的做到了每个函数是独立的只做了一件事情?
相关推荐
crary,记忆11 分钟前
Angular如何让整个项目的所有页面能够整体缩小一定的比例?
javascript·ecmascript·angular.js
Mintopia25 分钟前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia28 分钟前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo31 分钟前
🔔 Flutter 本地通知: 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊36 分钟前
一、redis安装(单机)和使用
前端·数据库·redis
江城开朗的豌豆38 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
天蓝色的鱼鱼38 分钟前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
你的电影很有趣42 分钟前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
江城开朗的豌豆43 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..44 分钟前
VUE工程化开发模式
前端·javascript·vue.js