vue之代码优化
- 组件名称的优化
- 标签名，文件名， 组件名称统一。
<template>
<su-pager />
</template>
<script>
import suPager from './suPage.vue'
export default {
components:{
suPager
}
}
数据存储优化。
store存放经常变更的变量。vue页面数据优化
data内的数据越少越好， 优点： 性能提升， 代码简洁。
多个同组的字段， 可用对象形式包裹， 例如form内的字段； 优点： 便于扩展内容；
- 链式调用优化-分行
// 不建议
queryUserList() {
this.axios.get('/queryUserList', this.queryOption).then(res => {
}).catch(err => {
}
)
}
// 建议
queryUserList() {
this.axios
.get('/queryUserList', this.queryOption)
.then(res => {
})
.catch(err => {
}
)
}
- 三元优化
- 实例一*
// 不建议
let data = this.radio5 == 1 ? this.diagram.outAmountList : this.radio5 == 2 ? this.diagram.orderTonnageList : this.diagram.orderAmountList
// 优秀
let index = this.radio5 - 1,
data = [this.diagram.outAmountList, this.diagram.orderTonnageList , this.diagram.orderAmountList][index]
- 实例二*
// 不推荐
let userName = localStorage.userName ? localStorage.userName : 'admin'
// 推荐
let userName = localStorage.userName || 'admin'
- 优化判断
- 多重判断，永远将特殊情况放在最前面
// 不推荐
if (res.code == 200) {
localStorage.setItem('Variable1', JSON.stringify(res.data.Variable1))
localStorage.setItem('Variable2', res.data.Variable2)
localStorage.setItem('Variable3', res.data.Variable3)
localStorage.setItem('Variable4', res.data.Variable4)
localStorage.setItem('Variable5', res.data.Variable5)
console.log('登录成功')
} else {
if (res.code == 511) {
console.log('审核中, 请稍候！')
} else if (res.code == 512) {
console.log('审核成功, 欢迎登录！')
} else if (res.code == 513) {
console.log('审核失败, 请重试！')
} else if (res.code == 514) {
console.log('您的账号已被停用！')
}
}
// 推荐
if (res.code == 511) return console.log('审核中, 请稍候！')
if (res.code == 512) return console.log('审核成功, 欢迎登录！')
if (res.code == 513) return console.log('审核失败, 请重试！')
if (res.code == 514) return console.log('您的账号已被停用！')
localStorage.setItem('Variable1', JSON.stringify(res.data.Variable1))
localStorage.setItem('Variable2', res.data.Variable2)
localStorage.setItem('Variable3', res.data.Variable3)
localStorage.setItem('Variable4', res.data.Variable4)
localStorage.setItem('Variable5', res.data.Variable5)
console.log('登录成功')
- 多重if-else与对象判断法
第一种是常见的判断方法，
第二种采用swtich；
第三种采用对象法，判断color是否在对象内，如果在则运行这个值；
//method1
if (color) {
if (color === 'black') {
printBlackBackground();
} else if (color === 'red') {
printRedBackground();
} else if (color === 'blue') {
printBlueBackground();
} else if (color === 'green') {
printGreenBackground();
} else {
printYellowBackground();
}
}
//method2
switch(color) {
case 'black':
printBlackBackground();
break;
case 'red':
printRedBackground();
break;
case 'blue':
printBlueBackground();
break;
case 'green':
printGreenBackground();
break;
default:
printYellowBackground();
}
//method3
var colorObj = {
'black': printBlackBackground,
'red': printRedBackground,
'blue': printBlueBackground,
'green': printGreenBackground,
'yellow': printYellowBackground
};
if (color in colorObj) {
colorObj[color]();
}
还可以用es6来写哦
let currentTab = 'a';
const comparativeTotles = new Map([
['a', () => { console.log("a") }],
['b', () => { console.log("b") }],
['c', () => { console.log("c") }],
['d', () => { console.log("d") }]
])
if (comparativeTotles.has(currentTab)) {
comparativeTotles.get(currentTab);
}
- 更新store的通用方法
const store = new Vuex.Store({
state: {
spread: false
},
mutations: {
updataStore(state, option) {
for (let k in option) {
state[k] = option[k]
}
}
}
})
// 调用，第二个参数中传所有你要更新的store对象即可
this.$store.commit(
'updataStore',
{
userInfo: {
companyId: res.data.companyId,
companyName: res.data.companyName,
userId: res.data.userId,
},
permissions: res.data.permissions
}
)
- indexOf的优化
正常我们可能会使用这种方式
var someText = 'javascript rules';
if (someText.indexOf('javascript') !== -1) {
}
// or
if (someText.indexOf('javascript') >= 0) {
}
这里有更好的方式实现
利用按位取反运算符 (~)运算符，取得负数， 然后使用!！获取boolean值；
var someText = 'text';
!!~someText.indexOf('tex'); // someText contains "tex" - true
!~someText.indexOf('tex'); // someText NOT contains "tex" - false
~someText.indexOf('asd'); // someText doesn't contain "asd" - false
~someText.indexOf('ext'); // someText contains "ext" - true
- 带数字的字符串拼接
明显是第一种看起来更加优雅；
var one = 1;
var two = 2;
var three = '3';
//method 1
var result = ''.concat(one, two, three); //"123"
//method 2
var result = one + two + three; //"33" instead of "123"
//method 3
var result ='' + one + two + three; //"123"
10 vue的链式调用
methods: {
setName(name) {
this.name = name;
return this;
},
setSex (sex) {
this.sex = sex;
return this;
},
init () {
this.setName("张三").setSex ("16")
}
}
- 转换数字
var one = '1';
var numberOne = +one; // Number 1
12、保持函数功能的单一性-函数式编程
Bad:
function emailClients(clients) {
clients.forEach((client) => {
const clientRecord = database.lookup(client)
if (clientRecord.isActive()) {
email(client)
}
})
}
Good:
function emailActiveClients(clients, isActiveClient， email) {
clients
.filter(isActiveClient)
.forEach(email)
}
function isActiveClient(client) {
const clientRecord = database.lookup(client)
return clientRecord.isActive()
}
- 尾调用
f调用后，存在变量m ,n的记录， 但是当g调用完后， 则可以删除f的调用记录， 只保留g调用记录； 这叫做'尾调用优化'， 即只保留内层函数的调用记录。
如果所有函数都是尾调用，那么完全可以做到每次执行时，调用记录只有一项，这将大大节省内存。这就是"尾调用优化"的意义。
function f() {
let m = 1;
let n = 2;
return g(m + n);
}
f();
- 纯函数和非纯函数：
纯函数可以做到自给自足，对测试友好、没有外部依赖，既不受外部环境影响，也不会影响外部环境。
// 纯函数
function add(a) {
var b = 0;
return a + b;
}
// 非纯函数，依赖外部变量
var b = 0;
function add(a) {
return a + b;
}
// 非纯函数，依赖系统时间
function now() {
return new Date();
}
// 非纯函数，依赖随机数
function random(){
return Math.random();
}
//非纯函数，设置外部 cookie
function setCookie(){
document.cookie = "name=Porco";
}
