英文:
Getting following Error in javascript code : Do not use 'new' for side effects
问题
以下是您提供的代码的中文翻译部分：
我有一个Vue.js代码，我试图在一个柱状图中表示两个不同瓶子中含有的水和油的百分比。当我启动我的程序时，在我的JavaScript代码中出现以下错误：
不要在副作用中使用'new' (no-new) ，位于src\mixins\charts\BalkenChart.js:15:9：
我不太明白这个错误是指什么。有人可以帮助我吗？
import Chart from 'chart.js'
export default {
name: 'Chart',
props: {
oil: Number,
water: Number
},
mounted() {
this.renderChart()
},
methods: {
renderChart() {
const ctx = document.getElementById('myChart').getContext('2d')
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Oil', 'Water'],
datasets: [{
label: '百分比',
data: [this.oil, this.water],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
}
}
}
在Vue组件中，我有以下代码：
<template>
<div>
<canvas id="myChart" ref="chart"></canvas>
</div>
</template>
<script>
import Chart from '@/components/Chart'
export default {
components: {
Chart
},
data() {
return {
oil: 30,
water: 70
}
},
mounted() {
this.$refs.chart.renderChart()
}
}
</script>
为了解决问题，我为结果分配了一个变量，但是我收到了错误消息，myChart被分配但从未使用。
const myChart = new Chart(ctx, {...} )
希望这能帮助您理解问题并解决它。
英文:
I have a vuejs code with which I try to represent in a bar chart the percentage of water and oil contained in two different bottles.
when i start my program, i get the following error in my javascript code:
Do not use 'new' for side effects (no-new) at src\mixins\charts\BalkenChart.js:15:9:
I don't quite understand what this error refers to. Could someone help me
import Chart from 'chart.js'
export default {
name: 'Chart',
props: {
oil: Number,
water: Number
},
mounted() {
this.renderChart()
},
methods: {
renderChart() {
const ctx = document.getElementById('myChart').getContext('2d')
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Oil', 'Water'],
datasets: [{
label: 'Percentage',
data: [this.oil, this.water],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
}
}
}
In Vue component, I have the following code
<template>
<div>
<canvas id="myChart" ref="chart"></canvas>
</div>
</template>
<scipt>
import Chart from '@/components/Chart'
export default {
components: {
Chart
},
data () {
return {
oil: 30,
water: 70
}
},
mounted () {
this.$refs.chart.renderChart()
}
}
</script>
to solve the problem I assign a variable to the result just like that, but I got the error, myChart ist assigned but never use.
const myChart = new Chart(ctx, {...} )
答案1
得分: 3
new 的目的是从一个 Class 或 构造函数 创建对象。
如果你对生成的对象什么都不做，那创建该对象有什么意义？
显然有 某些 事情发生了，但那是一个副作用，而不是 new 的设计目的。你的 linter 反对这样做。
如果你给一个从未使用过的变量赋值，那么你只是多了一步同样的问题。
如果我们假设该对象是无用的，那么理想的解决方案是重写你的 Chart 函数，使其不需要 new 就能工作。
也可能是创建的对象具有在其他情况下有用的方法，但在这段特定的代码中并不需要。在这种情况下，在你的 linter 中禁用规则可能是合适的。
// eslint-disable-next-line no-new
const myChart = new Chart(ctx, {
英文:
The purpose of new is to create an object from a Class or constructor function.
If you never do anything with the resulting object, then what's the point of creating that object?
Clearly something is happening, but that's a side-effect and not what new is designed for. Your linter is objecting.
If you assign to a variable that you never use, then you have the same issue just one step removed.
If we assume that the object is useless, then the ideal solution is to rewrite your Chart function so that it doesn't need new to work.
It might also be the case that the object created has methods which are useful in other circumstances, but in this particular bit of code aren't needed. In that case, it might be appropriate to disable the rule in your linter.
// eslint-disable-next-line no-new
const myChart = new Chart(ctx, {
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论