当前位置：首页 > news >正文

用户界面创建一个新的运动类型

news 2025/7/9 6:32:51

● 现在我们需要根据我们之前规划的架构步骤来实现在用户界面创建一个运动类型
● 首先我们在要获取用户在表单中输入的数据

 //从表单中获取数据const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;

● 然后针对与不同的运动类型来判断用户的输入是否正确

//如果是跑步运动类型，创建跑步运动对象if (type === 'running') {const cadence = +inputCadence.value;if (!Number.isFinite(distance) || //输入的必须是属于否则报错!Number.isFinite(duration) ||!Number.isFinite(cadence))return alert('输入的值必须是数字！');}//如果是骑行运动类型，创建骑行运动对象if (type === 'cycling') {const elevation = +inputElevation.value;if (!Number.isFinite(distance) ||!Number.isFinite(duration) ||!Number.isFinite(elevation))return alert('输入的值必须是数字！');}

在这里插入图片描述

● 上面的写法明显违背了我们的不重复原则，所以我们更换一种写法

//提交表单之后生成新的运动_newWorkout(e) {
//判断输入的值是否为数字,...inputs是一个剩余参数语法，把所有参数都放在一个数组里面const validInputs = (...inputs) =>//every方法，判断数组中的每个元素是否都满足条件，都满足返回true，否则返回falseinputs.every(inp => Number.isFinite(inp));e.preventDefault(); //组织表单默认行为//从表单中获取数据const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;//如果是跑步运动类型，创建跑步运动对象if (type === 'running') {const cadence = +inputCadence.value;if (//判断输入的值是否为数字!validInputs(distance, duration, cadence))return alert('输入的值必须是数字！');}//如果是骑行运动类型，创建骑行运动对象if (type === 'cycling') {const elevation = +inputElevation.value;if (!validInputs(distance, duration, elevation))return alert('输入的值必须是数字！');}

● 当然，这些数据并不是只要是数字就行了，还要不是负数，我们用相同的方法来书写

_newWorkout(e) {//判断输入的值是否为数字,...inputs是一个剩余参数语法，把所有参数都放在一个数组里面const validInputs = (...inputs) =>//every方法，判断数组中的每个元素是否都满足条件，都满足返回true，否则返回falseinputs.every(inp => Number.isFinite(inp));//判断输入的值是否为正数const allPositive = (...inputs) => inputs.every(inp => inp > 0);e.preventDefault(); //组织表单默认行为//从表单中获取数据const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;//如果是跑步运动类型，创建跑步运动对象if (type === 'running') {const cadence = +inputCadence.value;if (//判断输入的值是否为数字!validInputs(distance, duration, cadence) ||!allPositive(distance, duration, cadence))return alert('输入的值必须是数字且必须为正数！');}//如果是骑行运动类型，创建骑行运动对象if (type === 'cycling') {const elevation = +inputElevation.value;if (!validInputs(distance, duration, elevation) ||!allPositive(distance, duration))return alert('输入的值必须是数字且必须为正数！');}

在这里插入图片描述

● 现在我们就需要创建运动对象，并将数据存入进去

 const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;const { lat, lng } = this.#mapEvent.latlng; //获取点击地图的经纬度let workout;//如果是跑步运动类型，创建跑步运动对象if (type === 'running') {const cadence = +inputCadence.value;if (//判断输入的值是否为数字!validInputs(distance, duration, cadence) ||!allPositive(distance, duration, cadence))return alert('输入的值必须是数字且必须为正数！');workout = new Running([lat, lng], distance, duration, cadence); //创建跑步运动对象}//如果是骑行运动类型，创建骑行运动对象if (type === 'cycling') {const elevation = +inputElevation.value;if (!validInputs(distance, duration, elevation) ||!allPositive(distance, duration))return alert('输入的值必须是数字且必须为正数！');workout = new Cycling([lat, lng], distance, duration, elevation); //创建骑行运动对象}//创建新的对象到workout数组中this.#workouts.push(workout);

在这里插入图片描述

数据已经正常可以拿到了；

● 然后通过修改type，来改变CSS样式

class Running extends Workout {//继承Workout类type = 'running';constructor(coords, distance, duration, cadence) {super(coords, distance, duration); //调用父类构造函数this.cadence = cadence;this.calcPace();}//计算配速calcPace() {this.pace = this.duration / this.distance;return this.pace;}
}class Cycling extends Workout {type = 'cycling';constructor(coords, distance, duration, elevationGain) {super(coords, distance, duration);this.elevationGain = elevationGain;this.calcSpeed();}//计算速度calcSpeed() {this.speed = this.distance / (this.duration / 60);return this.speed;}
}renderWorkoutMarker(workout) {L.marker(workout.coords).addTo(this.#map).bindPopup(L.popup({maxWidth: 250,minWidth: 100,autoClose: false,closeOnClick: false,className: `${workout.type}-popup`,})).setPopupContent('运动').openPopup();}
}