thắc mắc Hỏi mấy bác học IT, làm sao để hiểu được Code của người khác??

George Clement Perkins said:

Thế mới vào bác đọc từ đâu mà hiểu được? Bác biết nó chạy từ đâu đến đâu ko

Click to expand...

HaLinhNHP said:

Nắm vững kiến thức cơ bản, đọc hiểu chậm từng dòng code sẽ làm công việc gì

Sent from Xiaomi Redmi 7 using vozFApp

Click to expand...

George Clement Perkins said:

Thấy vẫn khó đọc quá thím, có cách nào tổng quan 1 chút ko?
Như hồi nãy em Google 1 bài viết, nó đưa ra 1 đoạn code ví dụ, mà đọc code ví dụ em còn ko hiểu luôn ấy

https://vntalking.com/bo-tu-khoa-else-trong-ham-if.html

Click to expand...

George Clement Perkins said:

Bác có viết ra giấy ko, hay đọc nhớ trong đầu luôn

Click to expand...

George Clement Perkins said:

Như tít, em code theo Youtube, nhìn họ code đến đâu làm theo đến đó nên còn hiểu. Mà em tưởng tượng cái đống này là của người khác chứ ko phải em thì chắc éo bao giờ em hiểu nổi đang làm cái gì luôn, dù ông thầy organize code rất tốt

Có trick nào để đọc code dễ hiểu ko các bác

JavaScript:

class Workout {
    date = new Date();
    id = (Date.now() + '').slice(-10);
    constructor(coords, distance, duration) {
        this.coords = coords;       // [lat, lng]
        this.distance = distance;   // in km
        this.duration = duration;   // in min
    }
    _setDescription() {
        const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        this.description = `${this.type[0].toUppercase()}${this.type.slice(1)} on ${months[this.date.getMonth()]} ${this.date.getDate()}`;
    }
}

class Running extends Workout {
    type = 'running';
    constructor(coords, distance, duration, cadance) {
        super(coords, distance, duration);
        this.cadance = cadance;
        this.calcPace();
        this._setDescription();
    }
    calcPace() {
        // min/km
        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();
        this._setDescription();
    }
    calcSpeed() {
        // km/h
        this.speed = this.distance / (this.duration / 60);
        return this.speed;
    }
}

const run1 = new Running([39, -12], 5.2, 24, 178);
const cycling1 = new Running([39, -12], 27, 95, 523);

// console.log(run1, cycling1);

// APPLICATION ARCHITECTURE
const form = document.querySelector('.form');
const containerWorkouts = document.querySelector('.workouts');
const inputType = document.querySelector('.form__input--type');
const inputDistance = document.querySelector('.form__input--distance');
const inputDuration = document.querySelector('.form__input--duration');
const inputCadence = document.querySelector('.form__input--cadence');
const inputElevation = document.querySelector('.form__input--elevation');

class App {
    #map;
    #mapEvent;
    #workouts = [];

    constructor() {
        this._getPosition();
        form.addEventListener('submit', this._newWorkout.bind(this));

        // đổi option sẽ đổi nội dung 1 ô
        inputType.addEventListener('change', this._toggleElevationField);
    }
    _getPosition() {
        if (navigator.geolocation) // Check if support on old browser
            navigator.geolocation.getCurrentPosition(this._loadMap.bind(this),
                function () {                                   // 2nd function triggered when fail to get location
                    alert('Could not get your position');
                });
    }
    _loadMap(position) { // 1st function triggered when get location success
        const { latitude } = position.coords;
        const { longitude } = position.coords;

        const coords = [latitude, longitude];

        this.#map = L.map('map').setView(coords, 13);

        L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
            maxZoom: 20,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
        }).addTo(this.#map);

        // Handling click on map
        this.#map.on('click', this._showForm.bind(this));     // Click vào 1 điểm sẽ trả về 1 Event

    }
    _showForm(mapE) {
        this.#mapEvent = mapE;
        console.log(mapE);
        form.classList.remove('hidden');
        inputDistance.focus();                 // Đặt con trỏ vào form input này
    }
    _toggleElevationField() {
        inputElevation.closest('.form__row').classList.toggle('form__row--hidden');
        inputCadence.closest('.form__row').classList.toggle('form__row--hidden');
    }
    _newWorkout(e) {
        const validInput = (...inputs) => inputs.every(inp => Number.isFinite(inp));
        const allPositive = (...inputs) => inputs.every(inp => inp > 0);
        e.preventDefault();

        // Get data from form
        const type = inputType.value;
        const distance = +inputDistance.value;
        const duration = +inputDuration.value;
        const { lat, lng } = this.#mapEvent.latlng;  // lấy thông tin toạ độ trong event đó
        let workout;

        // If activity is running, add running Object
        if (type === 'running') {
            const cadance = +inputCadence.value;
            // Check if data is valid
            if (!validInput(distance, duration, cadance) ||
                !allPositive(distance, duration))
                return alert('input has to be positive number!');

            workout = new Running([lat, lng], distance, duration, cadance);
        }

        // If activity is cycling, add running Object
        if (type === 'cycling') {
            const elevation = +inputElevation.value;
            // Check if data is valid
            if (!validInput(distance, duration, elevation) ||
                !allPositive(distance, duration))
                return alert('input has to be positive number!');

            workout = new Cycling([lat, lng], distance, duration, elevation);
        }

        // Add new Object to workout array
        this.#workouts.push(workout);
        console.log(workout);

        // Render workout on map and marker
        this._renderWorkoutMarker(workout);

        // Render workout on list
        this._renderWorkout(workout);

        // Hide form + Clear input fields
        inputDistance.value = inputCadence.value = inputDuration.value = inputElevation.value = '';

    }
    _renderWorkoutMarker(workout) {
        L.marker(workout.coords).addTo(this.#map)       // add marker
            .bindPopup(                        // tạo popup vào Marker này
                L.popup({                      // Phần popup option
                    maxWidth: 250,             // các option này tìm trong docs của Leaflet
                    minWidth: 100,
                    autoClose: false,
                    closeOnClick: false,
                    className: `${workout.type}-popup`,
                })
            )
            .setPopupContent('workout')                  // Thay đổi nội dung cho popup
            .openPopup();
    }
    _renderWorkout(workout) {
        const html = `
        <li class="workout workout--${workout.type}" data-id="${workout.id}">
          <h2 class="workout__title">${workout.description}</h2>
          <div class="workout__details">
            <span class="workout__icon">${workout.type === 'running' ? '🏃‍♂️' : '🚴‍♀️'}</span>
            <span class="workout__value">${workout.distance}</span>
            <span class="workout__unit">km</span>
          </div>
          <div class="workout__details">
            <span class="workout__icon">⏱</span>
            <span class="workout__value">${workout.duration}</span>
            <span class="workout__unit">min</span>
          </div>
          `
        if (workout.type == 'running')
            html += `
            <div class="workout__details">
            <span class="workout__icon">⚡️</span>
            <span class="workout__value">${workout.pace.toFixed(1)}</span>
            <span class="workout__unit">min/km</span>
          </div>
          <div class="workout__details">
            <span class="workout__icon">🦶🏼</span>
            <span class="workout__value">${workout.cadance}</span >
            <span class="workout__unit">spm</span>
          </div >
        </li >
            `;
        if (workout.type == 'running')
            html += `
            <div class="workout__details">
            <span class="workout__icon">⚡️</span>
            <span class="workout__value">${workout.speed.toFixed(1)}</span>
            <span class="workout__unit">km/h</span>
          </div>
          <div class="workout__details">
            <span class="workout__icon">⛰</span>
            <span class="workout__value">${workout.elevationGain}</span>
            <span class="workout__unit">m</span>
          </div>
        </li>
            `;
        form.insertAdjacentHTML('afterend', html);
    }
}

const app = new App();

Click to expand...

xike456 said:

Ngoại đạo t còn hiểu. Đếu hiểu ông học hành kiểu gì.

Click to expand...

Just Saying said:

Đây này.
Bạn đọc từ đây này.
const app = new App();
Sau đó mò đến Class App xem nó làm gì. Rồi tượng tự mấy thằng Class khác được tạo trong Class App này.

Click to expand...

HaLinhNHP said:

Mà nhìn như này, các bác nghĩ front end có nên viết theo functional programming ko, nhìn class có cáu this mà loạn lên

Sent from Xiaomi Redmi 7 using vozFApp

Click to expand...

var TrafficLight = function () {
    var count = 0
    // default state = green
    var currentState = new Green(this);
    this.change = function (state) {
        // limits number of changes
        if (count++ >= 10) return;
        currentState = state;
        currentState.go();
    }
    this.start = function () {
        currentState.go();
    }
}
var Red = function (light) {
    this.light = light
    this.go = function () {
        console.log(("Red --> for 1 minute"))
        light.change(new Green(light));
    }
}
var Yellow = function (light) {
    this.light = light;
 
    this.go = function () {
        console.log("Yellow --> for 10 seconds")
        light.change(new Red(light));
    }
};
var Green = function (light) {
    this.light = light;
 
    this.go = function () {
        console.log("Green --> for 1 minute");
        light.change(new Yellow(light));
    }
};

FaithHope said:

Chạy thì console.log lúc chạy nó in ra console trong f12 của trình duyệt kìa bác. Bật f12, ctrl + p tìm file source của đoạn code trên rồi đặt debug, xong f12 lại xem debug từ từ thôi.

Click to expand...

George Clement Perkins said:

Vâng để em tìm hiểu lại cái tool debug của Chrome

Click to expand...

spam102 said:

Khoảng 5 năm trước dc 1 ông PSE chỉ 1 chiêu xài cả đời làm web developer.

Join dự án web có sẵn thì cứ theo route mà đọc, màn hình nào cần chỉnh sửa cái gì thì cứ theo cái route mà tìm sẽ tới đúng địa chỉ cần tìm để fix cho đúng.

Còn code muốn hiểu thì phải quen thuộc với cú pháp của nó đã, quen thuộc với cú pháp rồi thì mới tính tới chuyện hiểu dc logic của nó. Nó giống như học tiếng Anh vậy phải biết từ mới trước thì mới mong hiểu được cái nội dung của đoạn văn.

Và thêm cái nữa đưa code lên đây không có highlight, indent gì thì không đọc nổi.

Sent from Samsung Note 20 Ultra via nextVOZ

Click to expand...

anhtuanat said:

Mất căn bản basic rồi, vote học lại từ đầu. Giải thích từ ngọn thì vỡ mồm ae

Click to expand...