You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
15 KiB
135 lines
15 KiB
# ការផ្លាស់ប្តូរកូដនិងការចេញតំណាងឯកសារ
|
|
|
|
## គោលបំណងសិក្សា
|
|
|
|
ដោយបំពេញភារកិច្ចនេះ អ្នកនឹងអនុវត្តជំនាញអភិវឌ្ឍន៍សូហ្វវែរ ដែលអ្នកអភិវឌ្ឍន៍វិជ្ជាជីវៈប្រើប្រាស់ជារៀងរាល់ថ្ងៃ។ អ្នកនឹងរៀនរៀបចំកូដសម្រាប់ការថែរក្សា បន្ថយការប្រហែលគ្នាតាមរយៈការបង្ហាញ abstraction ហើយចេញតំណាងឯកសារការងាររបស់អ្នកសម្រាប់អ្នកអភិវឌ្ឍន៍នៅអនាគត (រួមទាំងខ្លួនអ្នកផងដែរ)។
|
|
|
|
កូដស្អាត ដែលមានការចេញតំណាងឯកសារល្អ គឺសំខាន់សម្រាប់គម្រោងអភិវឌ្ឍន៍វេបពិតនៅពិភពលោក ដែលមានអ្នកអភិវឌ្ឍន៍ជាច្រើនបានសហការនិងកូដច្រើនកំពុងអភិវឌ្ឍទៅតាមពេលវេលា។
|
|
|
|
## មូលដ្ឋានភារកិច្ច
|
|
|
|
ឯកសារ `app.js` របស់កម្មវិធីធនាគាររបស់អ្នកបានកើនឡើងយ៉ាងខ្លាំងជាមួយមុខងារចុះឈ្មោះ ចូលរាល់ថ្ងៃ និងផ្ទាំងគ្រប់គ្រង។ ដល់ពេលអ្នកត្រូវផ្លាស់ប្តូរកូដនេះដោយប្រើប្រាស់វិធានការអភិវឌ្ឍវិជ្ជាជីវៈដើម្បីបង្កើនភាពងាយស្រួលក្នុងការអាន ភាពងាយក្នុងការថែរក្សា ហើយកាត់បន្ថយការប្រហែលគ្នា។
|
|
|
|
## សេចក្ដីណែនាំ
|
|
|
|
បម្លែងកូដ `app.js` បច្ចុប្បន្នរបស់អ្នក ដោយអនុវត្តបច្ចេកទេសផ្លាស់ប្តូរចម្បងបីនេះ៖
|
|
|
|
### 1. ដកស្រង់អថេរតម្លៃកំណត់កំណត់រចនាសម្ព័ន្ធ
|
|
|
|
**ភារកិច្ច**៖ បង្កើតផ្នែករចនាសម្ព័ន្ធនៅខាងលើឯកសាររបស់អ្នក មានអថេរតម្លៃដែលអាចប្រើប្រាស់ឡើងវិញ។
|
|
|
|
**និយមន័យអនុវត្ត៖**
|
|
- ដកស្រង់ URL មូលដ្ឋាន API របស់ម៉ាស៊ីនមេ (ដែលប្រើដោយដាក់លេខថតដោយដៃនៅច្រើនកន្លែង)
|
|
- បង្កើតអថេរតម្លៃសម្រាប់សារកំហុសដែលបង្ហាញក្នុងមុខងារច្រើនដង
|
|
- ពិចារណាដកស្រង់ផ្លូវថ្នាក់និងអត្តសញ្ញាណធាតុដែលប្រើបន្ដទៀតជាច្រើនដង
|
|
|
|
**រចនាសម្ព័ន្ធគំរូ៖**
|
|
```javascript
|
|
// ការកំណត់តម្លៃរឹង
|
|
const API_BASE_URL = 'http://localhost:5000/api';
|
|
const ROUTES = {
|
|
LOGIN: '/login',
|
|
DASHBOARD: '/dashboard'
|
|
};
|
|
```
|
|
|
|
### 2. បង្កើតមុខងារស្នើសុំនៃឯកតាភាពរួមតែមួយ
|
|
|
|
**ភារកិច្ច**៖ កសាងមុខងារ `sendRequest()` ដែលអាចប្រើឡើងវិញ ដើម្បីកាត់បន្ថយកូដប្រាក់ប្រេីរវិញនៅចន្លោះ `createAccount()` និង `getAccount()`។
|
|
|
|
**តម្រូវការ:**
|
|
- គ្រប់គ្រងស្នើសុំទាំង GET និង POST
|
|
- រួមបញ្ចូលការគ្រប់គ្រងកំហុសបានត្រឹមត្រូវ
|
|
- គាំទ្រផ្លូវ URL ខុសៗគ្នា
|
|
- ទទួលបានទិន្នន័យទំហំពុំបានបន្ទាន់ក្នុងស្នើសុំ
|
|
|
|
**និយមន័យហត្ថលេខាមុខងារ៖**
|
|
```javascript
|
|
async function sendRequest(endpoint, method = 'GET', data = null) {
|
|
// ការអនុវត្តរបស់អ្នកនៅទីនេះ
|
|
}
|
|
```
|
|
|
|
### 3. បន្ថែមការចេញតំណាងឯកសារកូដវិជ្ជាជីវៈ
|
|
|
|
**ភារកិច្ច**៖ ចេញតំណាងឯកសារកូដរបស់អ្នកជាមួយមតិយោបល់ច្បាស់លាស ដែលពន្យល់ពី "ហេតុផល" នៅពីក្រោយលីចចរិតរបស់អ្នក។
|
|
|
|
**ស្តង់ដាឯកសារយោង៖**
|
|
- បន្ថែមឯកសារមុខងារពន្យល់ពីគោលបំណង ប៉ារ៉ាម៉ែត្រ ហើយតំលៃត្រឡប់
|
|
- រួមបញ្ចូលមតិយោបល់នៅជាប់សន្លឹកសម្រាប់លីចចរិតស្មុគស្មាញឬច្បាប់អាជីវកម្ម
|
|
- ក្រុមមុខងារពាក់ព័ន្ធជាមួយក្បាលផ្នែក
|
|
- ពន្យល់ពីបទបញ្ជាកូដមិនច្បាស់ប្រូផ្លែតឬការផុសបញ្ហាសំរាប់កម្មវិធីរុករក
|
|
|
|
**រចនាសម្ព័ន្ធឯកសារគំរូ៖**
|
|
```javascript
|
|
/**
|
|
* Authenticates user and redirects to dashboard
|
|
* @param {Event} event - Form submission event
|
|
* @returns {Promise<void>} - Resolves when login process completes
|
|
*/
|
|
async function login(event) {
|
|
// វಿರច្ឆ័យការដាក់សំណុំបែបបទផ្ទាល់ខ្លួនដើម្បីដោះស្រាយជាមួយ JavaScript
|
|
event.preventDefault();
|
|
|
|
// ការអនុវត្តរបស់អ្នក...
|
|
}
|
|
```
|
|
|
|
## វិស័យជោគជ័យ
|
|
|
|
កូដដែលបានផ្លាស់ប្ដូររបស់អ្នកគួរតែបង្ហាញពីប្រព័ន្ធអភិវឌ្ឍវិជ្ជាជីវៈដូចតទៅ៖
|
|
|
|
### ការអនុវត្តល្អឧទាហរណ៍
|
|
- ✅ **អថេរ**៖ អានសម្រាប់ខ្សែអក្សរល្បិចនិង URL ត្រូវបានដកស្រង់ទៅក្នុងអថេរដែលមានឈ្មោះច្បាស់លាស់
|
|
- ✅ **គោលការណ៍ DRY**៖ ទ្រឹស្តីស្នើសុំទូទៅត្រូវបានប្រមូលផ្តុំជាចំណែក `sendRequest()` មួយដែលអាចប្រើឡើងវិញ
|
|
- ✅ **ឯកសារ**៖ មុខងារមានមតិយោបល់ JSDoc ច្បាស់លាស់ពន្យល់ពីគោលបំណងនិងប៉ារ៉ាម៉ែត្រ
|
|
- ✅ **ការរៀបចំ**៖ កូដត្រូវបានចំណាត់ថ្នាក់យ៉ាងត្រឹមត្រូវជាមួយក្បាលផ្នែក និងរចនាសម្ព័ន្ធសមស្រប
|
|
- ✅ **ការគ្រប់គ្រងកំហុស**៖ ការគ្រប់គ្រងកំហុសបានប្រសើរឡើងដោយប្រើមុខងារស្នើសុំនេះថ្មី
|
|
|
|
### ការអនុវត្តគ្រប់គ្រាន់
|
|
- ✅ **អថេរ**៖ តម្លៃដែលត្រូវធ្វើឡើងទីនេះភាគច្រើនត្រូវបានដកស្រង់ ប៉ុន្តែនៅតែមានតម្លៃដាក់ដៃតិចតួច
|
|
- ✅ **ការបំបែក**៖ មុខងារ `sendRequest()` ដែលគ្រាន់តែបង្កើតបានប៉ុន្តែមិនអាចគ្រប់គ្រងករណីពិសេសទាំងអស់
|
|
- ✅ **មតិយោបល់**៖ មុខងារសំខាន់ៗត្រូវបានឯកសារទៅប៉ុន្តែការពន្យល់ខ្លះឆ្ងាយពីពេញលេញ
|
|
- ✅ **ភាពងាយអាន**៖ កូដទូទៅបានរៀបចំបានល្អ មានតែមួយចំនួនត្រូវការកែលម្អបន្ថែម
|
|
|
|
### តំបន់ដែលត្រូវការកែលម្អ
|
|
- ❌ **អថេរ**៖ ខ្សែអក្សរល្បិចនិង URL ខ្លះនៅតែដាក់ដៃនៅទូទាំងឯកសារ
|
|
- ❌ **ការប្រហែលគ្នា**៖ កូដមានការប្រហែលគ្នាដ៏ធំធេងនៅចន្លោះមុខងារដូចគ្នា
|
|
- ❌ **ឯកសារ**៖ ខ្វះមតិយោបល់ ឬមតិយោបល់មិនគ្រប់គ្រាន់ដែលមិនពន្យល់ពីគោលបំណងកូដ
|
|
- ❌ **ការរៀបចំ**៖ កូដខ្វះរចនាសម្ព័ន្ធច្បាស់ និងការចំណាត់ថ្នាក់យ៉ាងត្រឹមត្រូវ
|
|
|
|
## សាកល្បងកូដដែលបានផ្លាស់ប្តូរ
|
|
|
|
បន្ទាប់ពីផ្លាស់ប្តូរ ត្រូវធានាថាកម្មវិធីធនាគាររបស់អ្នកនៅតែធ្វើការបានត្រឹមត្រូវ៖
|
|
|
|
1. **សាកល្បងស្ទើរតែមនុស្ស**៖ ចុះឈ្មោះ ចូល ប្រើផ្ទាំងគ្រប់គ្រង និងការគ្រប់គ្រងកំហុស
|
|
2. **ផ្ទៀងផ្ទាត់ការហៅ API**៖ ផ្ទៀងផ្ទាត់មុខងារ `sendRequest()` របស់អ្នកដំណើរការសម្រាប់ការបង្កើតគណនីនិងការទទួល
|
|
3. **ពិនិត្យសถานភាពកំហុស**៖ សាកល្បងជាមួយព័ត៌មានសម្ងាត់មិនត្រឹមត្រូវ និងកំហុសបណ្ដាញ
|
|
4. **ពិនិត្យលទ្ធផលក្នុងកុងសូល**៖ ទីមិនមានកំហុសថ្មីៗត្រូវបានបង្កើតឡើងក្នុងដំណើរការ
|
|
|
|
## គោលការណ៍ដាក់ស្នើ
|
|
|
|
ដាក់ស្នើឯកសារ `app.js` ដែលបានផ្លាស់ប្តូររបស់អ្នក ជាមួយ៖
|
|
- ក្បាលផ្នែកច្បាស់លាស់ក្នុងការរៀបចំមុខងារផ្សេងៗ
|
|
- រចនាសម្ព័ន្ធកូដ និងការចេញបន្ទាត់យ៉ាងតំរូវការ
|
|
- ឯកសារជាមួយកំណត់ត្រា JSDoc សម្រាប់មុខងារទាំងអស់
|
|
- មតិយោបល់ខ្លីនៅខាងលើបង្ហាញពីវិធីសាស្ត្រផ្លាស់ប្តូររបស់អ្នក
|
|
|
|
**ការប្រកួតប្រជែងបន្ថែម**៖ បង្កើតឯកសារចេញតំណាងឯកសារកូដមួយ (`CODE_STRUCTURE.md`) ដែលពន្យល់ពីរចនាសម្ព័ន្ធកម្មវិធី និងរបៀបដែលមុខងារផ្សេងៗធ្វើការរួមគ្នា។
|
|
|
|
## ការតភ្ជាប់ទៅពិភពលោកពិត
|
|
|
|
ភារកិច្ចនេះស្របទៅនឹងការថែរក្សាកូដដែលអ្នកអភិវឌ្ឍន៍វិជ្ជាជីវៈអនុវត្តជារៀងរាល់ថ្ងៃ។ នៅក្នុងវិស័យ:
|
|
- **ការត្រួតពិនិត្យកូដ** វាយតម្លៃភាពងាយអាន និងភាពងាយក្នុងការថែរក្សា ដូចក្នុងភារកិច្ចនេះ
|
|
- **បំណុលបច្ចេកទេស** ប្រមូលផ្តុំពេលកូដមិនត្រូវបានបញ្ចេញបានល្អជាសារៈសំខាន់
|
|
- **ការសហការក្រុម** ពឹងផ្អែកលើកូដច្បាស់ណែននានិងមានការចេញតំណាងឯកសារល្អដែលសមាសភាពថ្មីអាចយល់បាន
|
|
- **ការជួសជុលកំហុស** ងាយស្រួលក្នុងកូដដែលរៀបចំបានល្អជាមួយការសម្រួលដ៏ត្រឹមត្រូវ
|
|
|
|
ជំនាញដែលអ្នកកំពុងបង្រៀននៅទីនេះ - ដកស្រង់អថេរ កាត់បន្ថយការប្រហែលគ្នា និងសរសេរឯកសារច្បាស់លាស់ - គឺមានសារៈសំខាន់សម្រាប់ការអភិវឌ្ឍន៍សូហ្វវែរវិជ្ជាជីវៈ។
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**ការបដិសេធ**៖
|
|
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលយើងខំប្រឹងអោយបានភាពត្រឹមត្រូវ សូមចំណាំថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមក្នុងភាសាមាតុភូមិគួរត្រូវបានចាត់ទុកជាអាជ្ញាធរមានសុពលភាព។ សម្រាប់ព័ត៌មានសំខាន់ៗ សូមផ្ដល់អាទិភាពការបកប្រែដោយមនុស្សជំនាញវិជ្ជាជីវៈ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែខុសដែលកើតឡើងពីការប្រើប្រាស់ការបកប្រែនេះទេ។
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |