● 現(xiàn)在我們需要根據(jù)我們之前規(guī)劃的架構步驟來實現(xiàn)在用戶界面創(chuàng)建一個運動類型
● 首先我們在要獲取用戶在表單中輸入的數(shù)據(jù)

 //從表單中獲取數(shù)據(jù)const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;

● 然后針對與不同的運動類型來判斷用戶的輸入是否正確

//如果是跑步運動類型，創(chuàng)建跑步運動對象if (type === 'running') {const cadence = +inputCadence.value;if (!Number.isFinite(distance) || //輸入的必須是屬于否則報錯!Number.isFinite(duration) ||!Number.isFinite(cadence))return alert('輸入的值必須是數(shù)字！');}//如果是騎行運動類型，創(chuàng)建騎行運動對象if (type === 'cycling') {const elevation = +inputElevation.value;if (!Number.isFinite(distance) ||!Number.isFinite(duration) ||!Number.isFinite(elevation))return alert('輸入的值必須是數(shù)字！');}

● 上面的寫法明顯違背了我們的不重復原則，所以我們更換一種寫法

//提交表單之后生成新的運動_newWorkout(e) {
//判斷輸入的值是否為數(shù)字,...inputs是一個剩余參數(shù)語法，把所有參數(shù)都放在一個數(shù)組里面const validInputs = (...inputs) =>//every方法，判斷數(shù)組中的每個元素是否都滿足條件，都滿足返回true，否則返回falseinputs.every(inp => Number.isFinite(inp));e.preventDefault(); //組織表單默認行為//從表單中獲取數(shù)據(jù)const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;//如果是跑步運動類型，創(chuàng)建跑步運動對象if (type === 'running') {const cadence = +inputCadence.value;if (//判斷輸入的值是否為數(shù)字!validInputs(distance, duration, cadence))return alert('輸入的值必須是數(shù)字！');}//如果是騎行運動類型，創(chuàng)建騎行運動對象if (type === 'cycling') {const elevation = +inputElevation.value;if (!validInputs(distance, duration, elevation))return alert('輸入的值必須是數(shù)字！');}

● 當然，這些數(shù)據(jù)并不是只要是數(shù)字就行了，還要不是負數(shù)，我們用相同的方法來書寫

_newWorkout(e) {//判斷輸入的值是否為數(shù)字,...inputs是一個剩余參數(shù)語法，把所有參數(shù)都放在一個數(shù)組里面const validInputs = (...inputs) =>//every方法，判斷數(shù)組中的每個元素是否都滿足條件，都滿足返回true，否則返回falseinputs.every(inp => Number.isFinite(inp));//判斷輸入的值是否為正數(shù)const allPositive = (...inputs) => inputs.every(inp => inp > 0);e.preventDefault(); //組織表單默認行為//從表單中獲取數(shù)據(jù)const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;//如果是跑步運動類型，創(chuàng)建跑步運動對象if (type === 'running') {const cadence = +inputCadence.value;if (//判斷輸入的值是否為數(shù)字!validInputs(distance, duration, cadence) ||!allPositive(distance, duration, cadence))return alert('輸入的值必須是數(shù)字且必須為正數(shù)！');}//如果是騎行運動類型，創(chuàng)建騎行運動對象if (type === 'cycling') {const elevation = +inputElevation.value;if (!validInputs(distance, duration, elevation) ||!allPositive(distance, duration))return alert('輸入的值必須是數(shù)字且必須為正數(shù)！');}

● 現(xiàn)在我們就需要創(chuàng)建運動對象，并將數(shù)據(jù)存入進去

 const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;const { lat, lng } = this.#mapEvent.latlng; //獲取點擊地圖的經緯度let workout;//如果是跑步運動類型，創(chuàng)建跑步運動對象if (type === 'running') {const cadence = +inputCadence.value;if (//判斷輸入的值是否為數(shù)字!validInputs(distance, duration, cadence) ||!allPositive(distance, duration, cadence))return alert('輸入的值必須是數(shù)字且必須為正數(shù)！');workout = new Running([lat, lng], distance, duration, cadence); //創(chuàng)建跑步運動對象}//如果是騎行運動類型，創(chuàng)建騎行運動對象if (type === 'cycling') {const elevation = +inputElevation.value;if (!validInputs(distance, duration, elevation) ||!allPositive(distance, duration))return alert('輸入的值必須是數(shù)字且必須為正數(shù)！');workout = new Cycling([lat, lng], distance, duration, elevation); //創(chuàng)建騎行運動對象}//創(chuàng)建新的對象到workout數(shù)組中this.#workouts.push(workout);

數(shù)據(jù)已經正?？梢阅玫搅?#xff1b;

● 然后通過修改type，來改變CSS樣式

class Running extends Workout {//繼承Workout類type = 'running';constructor(coords, distance, duration, cadence) {super(coords, distance, duration); //調用父類構造函數(shù)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();}
}

● 下篇文章將在地圖上展現(xiàn)項目，并且消除一些關閉表單的一些小問題