去除魔法数字

• 什么是魔法数字？

在编程的领域中指莫名其妙出现的数字，其意义需要通过详细的阅读代码才能理解。一般魔法数字都是需要使用枚举变量来替换的。

html
<div style="padding: 10px 0;">                题型：                <label :for="'subjecttype_'+type.val" v-for="type in subjectlist">                    <input :id="'subjecttype_'+type.val" v-model="subjectType" :value="type.val" name="subjecttype"                        type="radio">                    {{type.label}}                </label></div>
//这里的type.val后的值 为数字0 直接来理解代码会不明白着这0代表的什么的意义 需要通过枚举变量来代替
<div style="padding: 10px 0;" v-if='type.val===ENUM_SUBJECTTYPE.DANXUAN'>                选项：               <ul style="padding: 10px 50px;">                   <li>A.<input type='text'><button>删除</button></li>                   <li>B.<input type='text'><button>删除</button></li>                   <li>C.<input type='text'><button>删除</button></li>                   <li>D.<input type='text'><button>删除</button></li>               </ul> </div>

JS
 let vm = new Vue({        el: '#app',        data() {            return {                subjectType: '',                subjectlist : [{                label: "单选题",                val: 0            },            {                label: "多选题",                val: 1            }, {                label: "判断题",                val: 2            }, {                label: "简答题",                val: 3            }]          }        },    })

• 去除魔法数字

修改后的代码

JS
const ENUM_SUBJECTTYPE = {        DANXUAN:0,        DUOXUAN:1,        PANDUAN:2,        JIANDA:3    }
//混入全局
Vue.mixin({        data(){            return{                ENUM_SUBJECTTYPE            }        }    })
let vm = new Vue({        el: '#app',        data() {            return {                subjectType: '',                subjectlist: []            }        },        created() {            this.subjectlist = [{                label: "单选题",                val: ENUM_SUBJECTTYPE.DANXUAN            },            {                label: "多选题",                val: ENUM_SUBJECTTYPE.DUOXUAN            }, {                label: "判断题",                val: ENUM_SUBJECTTYPE.PANDUAN            }, {                label: "简答题",                val: ENUM_SUBJECTTYPE.JIANDA            }]        }    })