JavaScript防御性编程

简单聊一下防御性编程,初衷是开发人员为了防止自己被裁员,而将代码编写为只有自己能看懂。如何只有自己能看懂?方法多种多样,但不能将简单问题复杂化,比如:编写一堆无效的逻辑关系,或将业务复杂化。下面介绍一种方式,既能通过代码审查,又能提高代码水平。

以vue为例,以下是计算所有产品价格:

computed: {
        extraPrice() {
            try {
                return (
                    let cPrices = 0;
                    this.cProducts.forEach((item) => {
                        cPrices = cPrices + item.num * item.price;
                        //或 cPrices += item.num * item.price;
                    });
                    this.aProduct.num * this.aProduct.price + 
                    this.bProduct.num * this.bProduct.price + 
                    cPrices
                );
            } catch (e) {
                console.log('价格计算有误');
                return 0;
            }
        }
}

上面代码简单明了,大部分开发人员都能读懂,那么有没有高级一点的写法,当然有:

computed: {
        extraPrice() {
            try {
                return (
                    this.aProduct.num * this.aProduct.price + 
                    this.bProduct.num * this.bProduct.price + 
                    this.cProduct.reduce((total,item) => total + item.num * item.price,0)
                );
            } catch (e) {
                console.log('价格计算有误');
                return 0;
            }
        }
}

对于不经常使用reduce的开发人员,需要先理解该函数。但要说代码的可读性,这段代码也没问题,简单明了。

简而言之,多使用高级函数,符号简写等等。

相关推荐
赵啸林3 分钟前
npm发布插件超级简单版
前端·npm·node.js
我码玄黄36 分钟前
THREE.js:网页上的3D世界构建者
开发语言·javascript·3d
罔闻_spider37 分钟前
爬虫----webpack
前端·爬虫·webpack
吱吱鼠叔38 分钟前
MATLAB数据文件读写:1.格式化读写文件
前端·数据库·matlab
爱喝水的小鼠1 小时前
Vue3(一) Vite创建Vue3工程,选项式API与组合式API;setup的使用;Vue中的响应式ref,reactive
前端·javascript·vue.js
小晗同学1 小时前
Vue 实现高级穿梭框 Transfer 封装
javascript·vue.js·elementui
WeiShuai1 小时前
vue-cli3使用DllPlugin优化webpack打包性能
前端·javascript
Wandra1 小时前
很全但是超级易懂的border-radius讲解,让你快速回忆和上手
前端
forwardMyLife1 小时前
element-plus的面包屑组件el-breadcrumb
javascript·vue.js·ecmascript
ice___Cpu1 小时前
Linux 基本使用和 web 程序部署 ( 8000 字 Linux 入门 )
linux·运维·前端