செயல்தவிர்

Mia Chevalier

சனி, 19 அக்டோபர், 2024 ’அன்று’ பிற்பகல் 1:09:46

வரலாற்றைத் திரும்பப் பெறாமல் உள்ளடக்கப் புதுப்பிப்புகளைக் கையாளுதல்

உடன் பணிபுரியும் டெவலப்பர்கள் திருப்திகரமான புதுப்பிக்கும் போது கூறுகள் பெரும்பாலும் சிக்கலில் சிக்குகின்றன உள் HTML. உள்ளடக்கத்தை மாறும் வகையில் மாற்றியமைப்பது ஒரு பொதுவான பணியாகும், இது அடிக்கடி செயல்தவிர் ஸ்டேக்கை மீட்டமைப்பதில் விளைகிறது. இது ஏமாற்றமளிக்கிறது, ஏனெனில் இதுபோன்ற புதுப்பிப்புகளுக்குப் பிறகு பயனர்கள் முந்தைய செயல்களைச் செயல்தவிர்ப்பதை இது தடுக்கிறது.

கடந்த காலத்தில், பல டெவலப்பர்கள் நம்பியிருந்தனர் document.execCommand அத்தகைய காட்சிகளைக் கையாள API. எவ்வாறாயினும், MDN போன்ற அதிகாரப்பூர்வ ஆவணங்களில் தெளிவான நவீன மாற்று எதுவும் வழங்கப்படாமல், இந்த முறை கைவிடப்பட்டதாகக் கொடியிடப்பட்டுள்ளது. தெளிவான தீர்வு இல்லாததால், டெவலப்பர்கள் உள்ளடக்கத்தைப் புதுப்பிப்பதற்கும், செயல்தவிர் வரலாற்றைத் தக்கவைப்பதற்கும் வழிகளைத் தேடுகின்றனர்.

இது ஒரு சவாலை உருவாக்குகிறது: நாம் எவ்வாறு புதுப்பிக்க முடியும் உள் HTML அல்லது சமீபத்திய செயல்களைச் செயல்தவிர்க்கும் பயனரின் திறனைப் பாதுகாத்து உள்ளடக்க மாற்றங்களைச் செய்யவா? இது ஒரு முக்கியமான பிரச்சனையாகும், குறிப்பாக பணக்கார டெக்ஸ்ட் எடிட்டர்கள் அல்லது ஊடாடும் இணைய பயன்பாடுகளை உருவாக்கும்போது பயனர் தொடர்புகளின் மீது சிறந்த கட்டுப்பாடு தேவைப்படும்.

இந்தக் கட்டுரையில், செயல்தவிர்க்கும் அடுக்கைக் கையாள அனுமதிக்கும் சொந்த JavaScript API உள்ளதா என்பதை ஆராய்வோம். வரலாற்றை மாற்றும் போது செயல்தவிர்க்க உங்களுக்கு உதவக்கூடிய சாத்தியமான தீர்வுகள் மற்றும் மாற்று வழிகளையும் நாங்கள் விவாதிப்போம் திருப்திகரமான கூறுகள் திறம்பட.

கட்டளை	பயன்பாட்டின் உதாரணம்
window.getSelection()	இந்த கட்டளை பயனரால் செய்யப்பட்ட தற்போதைய தேர்வை (எ.கா., தனிப்படுத்தப்பட்ட உரை அல்லது கேரட் நிலை) மீட்டெடுக்கிறது. உள்ளடக்கத்தை மாற்றும் முன் மாநிலத்தை காப்பாற்ற இது அவசியம் திருப்திகரமான உறுப்பு.
getRangeAt()	குறிப்பிட்ட ஒன்றைத் தருகிறது வரம்பு தேர்வில் இருந்து பொருள். உறுப்பு உள்ளடக்கத்தில் புதுப்பிப்புகளைச் செய்வதற்கு முன், கேரட் அல்லது உரை வரம்பு இருப்பிடத்தைப் பிடிக்க இது பயன்படுகிறது.
பிறழ்வு கண்காணிப்பாளர்	DOM இல் மாற்றங்களைக் கண்டறிய API பயன்படுத்தப்படுகிறது. இந்த சூழலில், இது a க்குள் ஏற்படும் மாற்றங்களைக் கண்காணிக்கிறது திருப்திகரமான உறுப்பு, வரலாற்றை செயல்தவிர்க்காமல் மாற்றங்களுக்கு எதிர்வினையாற்ற அனுமதிக்கிறது.
கவனிக்க ()	இணைந்து பயன்படுத்தப்படுகிறது பிறழ்வு கண்காணிப்பாளர், இந்த முறை எந்த மாற்றங்களுக்கும் இலக்கு உறுப்பைக் கண்காணிக்கத் தொடங்குகிறது (எ.கா., குழந்தை உறுப்புகள், உரை உள்ளடக்கம்) மற்றும் அதற்கேற்ப செயல்படும்.
execCommand()	இந்த நீக்கப்பட்ட கட்டளை HTML அல்லது உரையை திருத்தக்கூடிய பகுதியில் செருகுவது போன்ற உலாவி-நிலை செயல்பாடுகளை செயல்படுத்துகிறது. நிராகரிக்கப்பட்டாலும், இது இன்னும் பழைய சூழல்களில் செயல்தவிர்க்க மற்றும் வடிவமைப்பு நோக்கங்களுக்காகப் பயன்படுத்தப்படுகிறது.
அகற்றுAllRanges()	இந்த கட்டளை தற்போதைய அனைத்து உரை தேர்வுகளையும் அழிக்கிறது. ஏற்கனவே உள்ள தேர்வுகளுடன் முரண்படுவதைத் தவிர்க்க, முந்தைய கேரட் அல்லது தேர்வு நிலையை மீட்டமைக்கும் போது இது முக்கியமானது.
addRange()	ஆவணத்தில் சேமிக்கப்பட்ட தேர்வு வரம்பை மீட்டெடுக்கிறது. இது ஒரு பிறகு பயன்படுத்தப்படுகிறது உள் HTML உள்ளடக்க மாற்றங்களுக்குப் பிறகு கேரட் அல்லது பயனர் தேர்வு அப்படியே இருப்பதை உறுதிசெய்ய புதுப்பிக்கவும்.
மிகுதி()	தனிப்பயன் செயல்தவிர் அடுக்கில் புதிய நிலையைச் சேர்க்கிறது. இந்த அடுக்கு பல பதிப்புகளை சேமிக்கிறது திருப்திகரமான உறுப்பின் HTML, பயனர் தங்கள் செயல்களை பின்னர் செயல்தவிர்க்க அனுமதிக்கிறது.
பாப்()	தனிப்பயன் செயல்தவிர் அடுக்கிலிருந்து மிகச் சமீபத்திய நிலையை அகற்றி, அதை மீண்டும் பயன்படுத்துகிறது திருப்திகரமான கடைசி மாற்றத்தை செயல்தவிர்ப்பதற்கான உறுப்பு.

திருப்திகரமான கூறுகளில் ஸ்டாக்கை செயல்தவிர்ப்பதற்கான ஜாவாஸ்கிரிப்ட் தீர்வுகளைப் புரிந்துகொள்வது

வழங்கப்பட்டுள்ள ஸ்கிரிப்டுகள் a ஐ மாற்றும் போது செயல்தவிர்க்கும் அடுக்கை இழக்கும் சிக்கலைத் தீர்ப்பதை நோக்கமாகக் கொண்டுள்ளன திருப்திகரமான உறுப்பு உள் HTML. இங்குள்ள முக்கிய பிரச்சனைகளில் ஒன்று, இன்னர்எச்டிஎம்எல் புதுப்பித்தல் உலாவியின் உள் செயல்தவிர் வரலாற்றை நேரடியாக மீட்டமைக்கிறது, இதனால் பயனர்கள் சில டைனமிக் புதுப்பிப்புகளுக்குப் பிறகு தங்கள் மாற்றங்களைச் செயல்தவிர்க்க இயலாது. முதல் தீர்வு பயன்படுத்துகிறது தேர்வு API மற்றும் பிறழ்வு கண்காணிப்பாளர் நாங்கள் இருவரும் உள்ளடக்கத்தைப் புதுப்பித்து, பயனரின் கேரட் நிலை அல்லது தேர்வைப் பராமரிக்க முடியும் என்பதை உறுதிசெய்ய. பயனர் அனுபவத்தை மேம்படுத்த இது மிகவும் முக்கியமானது, குறிப்பாக பணக்கார உரை எடிட்டர்கள் அல்லது பிற ஊடாடும் உள்ளடக்கப் பகுதிகளுடன் பணிபுரியும் போது.

முதல் தீர்வு, ஸ்கிரிப்ட் பயன்படுத்துகிறது window.getSelection() உள்ளடக்கத்தை மாற்றுவதற்கு முன் தற்போதைய பயனர் தேர்வு அல்லது கேரட் நிலையை சேமிக்க. தேவையான புதுப்பிப்புகளைச் செய்த பிறகு, தேர்வு பயன்படுத்தி மீட்டமைக்கப்படும் அகற்றுAllRanges() மற்றும் addRange(). உள்எச்டிஎம்எல்ஐப் புதுப்பித்த பிறகும், உள்ளடக்கத்துடன் தொடர்பு கொள்ளும் பயனரின் திறன் மாறாமல் இருப்பதை இது உறுதி செய்கிறது. இதற்கிடையில், தி பிறழ்வு கண்காணிப்பாளர் DOM இன் மாற்றங்களைக் கண்காணிக்கப் பயன்படுத்தப்படுகிறது, இது செயல்தவிர் வரலாற்றில் குறுக்கிடாமல் எந்த மாற்றங்களுக்கும் பதிலளிக்க அனுமதிக்கிறது. உள்ளடக்க புதுப்பிப்புகள் தானாகவே அல்லது நிகழ்வுகள் மூலம் தூண்டப்படும் சந்தர்ப்பங்களில் இந்த அணுகுமுறை மிகவும் பயனுள்ளதாக இருக்கும்.

இரண்டாவது அணுகுமுறை நீக்கப்பட்டதைப் பயன்படுத்துவதை உள்ளடக்கியது execCommand API, இனி பரிந்துரைக்கப்படாவிட்டாலும், பல உலாவிகளில் இன்னும் பரவலாக ஆதரிக்கப்படுகிறது. இந்த முறை செயல்தவிர்க்க/மீண்டும் செயல்பாடுகளைக் கையாள மிகவும் பாரம்பரியமான வழியை வழங்குகிறது. ஸ்கிரிப்ட் வரிசைகளைப் பயன்படுத்தி தனிப்பயன் செயல்தவிர்ப்பு அடுக்கை உருவாக்குகிறது மற்றும் ஒவ்வொரு புதுப்பித்தலுக்குப் பிறகும் உள் HTML ஐ சேமிக்கிறது. ஒவ்வொரு முறையும் உள்ளடக்கம் மாறும்போது, தற்போதைய நிலை செயல்தவிர்க்கும் அடுக்கில் தள்ளப்படுகிறது, தேவைக்கேற்ப பயனர் முந்தைய நிலைகளுக்குத் திரும்ப முடியும் என்பதை உறுதிசெய்கிறது. இந்த முறை எளிமையானது ஆனால் பயனுள்ளது, இருப்பினும் இது பழைய உலாவி தொழில்நுட்பங்களை நம்பியிருந்தாலும் எதிர்காலத்தில் ஆதரிக்கப்படாது.

நவீன ஜாவாஸ்கிரிப்ட் APIகளைப் பயன்படுத்துவதன் மூலம் இரண்டு ஸ்கிரிப்ட்களும் செயல்தவிர்க்கும் அடுக்கைப் பாதுகாப்பதில் கவனம் செலுத்துகின்றன பிறழ்வு கண்காணிப்பாளர் மற்றும் செலக்ஷன் ஏபிஐ அல்லது மரபுக் கருவிகளைப் பயன்படுத்துவதன் மூலம் execCommand. உங்கள் திட்டத்தின் தேவைகளைப் பொறுத்து, இந்த இரண்டு அணுகுமுறைகளுக்கு இடையேயான தேர்வு மாறுபடும். காலப்போக்கில் உருவாகும் என எதிர்பார்க்கப்படும் புதிய திட்டங்கள் அல்லது பயன்பாடுகளுக்கு, முதல் தீர்வு எதிர்காலச் சான்றாகும். மறுபுறம், தி execCommand நவீன ஏபிஐகள் முழுமையாக ஆதரிக்கப்படாத சூழல்களுக்கான ஃபால்பேக் தீர்வை அணுகுமுறை வழங்குகிறது. இரண்டு முறைகளும் செயல்தவிர்ப்பதை நிர்வகிப்பதற்கான முக்கியத்துவத்தைக் காட்டுகின்றன திருப்திகரமான மென்மையான பயனர் அனுபவத்திற்கான கூறுகள்.

ஜாவாஸ்கிரிப்ட் மூலம் திருப்திகரமான கூறுகளில் செயல்தவிர்க்கும் அடுக்கை நிர்வகித்தல்

தேர்வு API மற்றும் MutationObserver ஐப் பயன்படுத்தி முன்-இறுதி தீர்வு

// This script handles innerHTML changes while preserving the undo stack
// It uses the Selection API and MutationObserver for better control

// Get the contenteditable element
const editableElement = document.querySelector('#editable');

// Save user selection (caret position)
function saveSelection() {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
        return selection.getRangeAt(0);
    }
    return null;
}

// Restore user selection
function restoreSelection(range) {
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

// Watch for manual changes without resetting undo stack
const observer = new MutationObserver((mutations) => {
    // Handle content changes
    mutations.forEach((mutation) => {
        console.log('Content changed:', mutation);
    });
});

// Start observing the contenteditable element
observer.observe(editableElement, {
    childList: true,
    subtree: true,
    characterData: true
});

// Apply change without resetting undo stack
function safeInnerHTMLUpdate(newContent) {
    const savedRange = saveSelection();
    editableElement.innerHTML = newContent;
    restoreSelection(savedRange);
}

மற்றொரு அணுகுமுறை: தனிப்பயன் செயல்தவிர் மேலாண்மையுடன் execComand Fallback ஐப் பயன்படுத்துதல்

மாற்று முறை: இணக்கத்தன்மைக்கு execComand ஐ மேம்படுத்துதல்

// Though deprecated, execCommand can still work as a fallback
// This script provides basic undo/redo functionality for innerHTML changes

const editable = document.querySelector('#editable');

// Save changes to a custom undo stack
let undoStack = [];
function saveState() {
    undoStack.push(editable.innerHTML);
    if (undoStack.length > 20) {
        undoStack.shift(); // Limit undo history to 20
    }
}

// Call this function when performing any changes
function updateContent(newHTML) {
    document.execCommand('insertHTML', false, newHTML);
    saveState();
}

// Implement undo function
function undo() {
    if (undoStack.length > 0) {
        editable.innerHTML = undoStack.pop();
    }
}

// Example usage: update content without losing undo stack
editable.addEventListener('input', () => {
    updateContent(editable.innerHTML);
});

திருத்தக்கூடிய HTML கூறுகளில் செயல்தவிர்க்கும் அடுக்கை நிர்வகிப்பதற்கான மேம்பட்ட முறைகள்

செயல்தவிர்க்கும் அடுக்கைக் கையாளும் போது கருத்தில் கொள்ள வேண்டிய மாற்று அம்சம் திருப்திகரமான உறுப்புகள் என்பது உலாவி வரலாற்று APIகளின் சாத்தியமான பயன்பாடாகும். உள்ளடக்கத்துடன் நேரடியாக இணைக்கப்படவில்லை என்றாலும், தி வரலாறு API சில நேரங்களில் மற்ற தீர்வுகளுடன் இணைந்து பயன்படுத்தலாம். அமர்வு வரலாற்றில் ஒரு தனிமத்தின் குறிப்பிட்ட நிலைகளைச் சேமிப்பதன் மூலம், டெவலப்பர்கள் செயல்தவிர்ப்பது போன்ற செயல்பாட்டை கைமுறையாக நிர்வகிக்க முடியும், இருப்பினும் பாரம்பரிய உரை அடிப்படையிலான செயல்தவிர்ப்பு செயல்பாடுகளை எதிர்பார்க்கும் பயனர்களுக்கு இந்த அணுகுமுறை உள்ளுணர்வுடன் இருக்காது.

ஆய்வு செய்ய வேண்டிய மற்றொரு அணுகுமுறை நிகழ்வு பிரதிநிதித்துவம் ஆகும். போன்ற சில விசை அழுத்த நிகழ்வுகளைக் கேட்பதன் மூலம் Ctrl + Z (செயல்தவிர்க்க) அல்லது Ctrl + Y (மீண்டும் செய்ய), தனிப்பயன் செயல்தவிர் நடத்தையை செயல்படுத்த முடியும். இந்த முறை டெவலப்பர்களுக்கு பயனர் அனுபவத்தின் மீது அதிக கட்டுப்பாட்டை வழங்குகிறது. எடுத்துக்காட்டாக, குறிப்பிட்ட HTML மாற்றங்களைத் தேர்ந்தெடுத்து செயல்தவிர்க்கலாம், அதே நேரத்தில் மற்ற, மிகவும் சிக்கலான மாற்றங்களின் ஒருமைப்பாட்டைப் பாதுகாக்கலாம்.

இறுதியாக, React அல்லது Vue.js போன்ற நவீன கட்டமைப்புகள் செயல்பாடுகளை செயல்தவிர்க்க மாற்று வழிகளை வழங்குகின்றன திருப்திகரமான உறுப்புகள். கூறு நிலையைக் கட்டுப்படுத்தி, நேர-பயண முறையைச் செயல்படுத்துவதன் மூலம், DOM அல்லது innerHTML ஐ நேரடியாகக் கையாளாமல், செயல்தவிர்க்கும் பல நிலைகளைக் கையாள முடியும். இந்த முறை மிகவும் விரிவான மாநில மேலாண்மை அமைப்பில் இணைகிறது, இது செயல்தவிர்க்கும் செயல்பாட்டின் முன்கணிப்பு மற்றும் வலிமையை பெரிதும் மேம்படுத்துகிறது.

திருப்திகரமான கூறுகளில் செயல்தவிர்ப்பதை நிர்வகிப்பது பற்றிய பொதுவான கேள்விகள்

செயல்தவிர்க்கும் அடுக்கைக் கையாள மிகவும் பொதுவான வழி எது?
மூலம் பயன்படுத்தப்படும் மிகவும் பொதுவான வழி document.execCommand API, அது இப்போது நிறுத்தப்பட்டாலும்.
செயல்தவிர்க்கும் அடுக்கை நேரடியாக ஜாவாஸ்கிரிப்டில் கையாள முடியுமா?
எந்த நேட்டிவ் APIயும் செயல்தவிர்க்கும் அடுக்கின் நேரடியான கையாளுதலை அனுமதிக்காது. செயல்தவிர்ப்பதை கைமுறையாக நீங்கள் நிர்வகிக்க வேண்டும் அல்லது தனிப்பயன் அடுக்குகள் போன்ற தீர்வுகளைப் பயன்படுத்த வேண்டும்.
எப்படி செய்கிறது MutationObserver செயல்தவிர்க்க உதவுமா?
தி MutationObserver செயல்தவிர் வரலாற்றை மீட்டமைக்காமல் DOM இல் மாற்றங்களைக் கவனிக்கவும் அந்த மாற்றங்களுக்கு எதிர்வினையாற்றவும் உங்களை அனுமதிக்கிறது.
மாற்று வழிகள் என்ன execCommand நிர்வாகத்தை செயல்தவிர்க்க?
மாற்றுகளில் தனிப்பயன் செயல்தவிர்ப்பு அடுக்குகளை உருவாக்குவது அல்லது ரியாக்ட் போன்ற கட்டமைப்பைப் பயன்படுத்துவது ஆகியவை அடங்கும், இது சிறந்த கட்டுப்பாட்டிற்காக உள்நாட்டில் நிலையை நிர்வகிக்கிறது.
தனிப்பயன் செயல்தவிர் நடத்தையை செயல்படுத்த நிகழ்வு கேட்பவர்களை பயன்படுத்த முடியுமா?
ஆம், போன்ற விசை அழுத்த நிகழ்வுகளைக் கேட்பதன் மூலம் Ctrl + Z, குறிப்பிட்ட பயனர் செயல்களுக்கு ஏற்ப உங்கள் சொந்த செயல்தவிர் செயல்பாட்டை நீங்கள் செயல்படுத்தலாம்.

ஜாவாஸ்கிரிப்ட்டில் செயல்தவிர்க்கும் அடுக்கை நிர்வகிப்பதற்கான இறுதி எண்ணங்கள்

உள்ளடக்கத்தை மாறும் வகையில் புதுப்பிக்கும் போது செயல்தவிர்க்கும் அடுக்கைப் பராமரித்தல் திருப்திகரமான உறுப்புகள் தந்திரமானதாக இருக்கலாம், குறிப்பாக execCommand போன்ற நிறுத்தப்பட்ட APIகளுடன். அதிர்ஷ்டவசமாக, தனிப்பயன் செயல்தவிர் அடுக்குகள் மற்றும் MutationObserver போன்ற நவீன நுட்பங்கள் மாற்று தீர்வுகளை வழங்குகின்றன.

பயனர் தேர்வுகளை கவனமாக நிர்வகித்தல் மற்றும் நிகழ்வு அடிப்படையிலான அணுகுமுறைகளைப் பயன்படுத்துவதன் மூலம், செயல்தவிர்ப்பதை திறம்பட பாதுகாக்க முடியும். சிறந்த உரை எடிட்டிங் அல்லது டைனமிக் உள்ளடக்கத்தைக் கையாளும் போது டெவலப்பர்கள் இந்த மாற்றுகளைக் கருத்தில் கொள்ள வேண்டும், இது தடையற்ற பயனர் அனுபவத்தை உறுதி செய்கிறது.

ஜாவாஸ்கிரிப்டில் செயல்தவிர்க்கும் அடுக்கை நிர்வகிப்பதற்கான ஆதாரங்கள் மற்றும் குறிப்புகள்

இந்தக் கட்டுரையில் நீக்கப்பட்ட APIகள் பற்றிய அதிகாரப்பூர்வ ஆவணங்களில் இருந்து தகவலைக் குறிப்பிடுகிறது. மேலும் விவரங்களுக்கு MDN ஆவணத்தைப் பார்க்கவும் execCommand API.
போன்ற நவீன மாற்றுகள் பற்றிய தகவலுக்கு தேர்வு API மற்றும் பிறழ்வு கண்காணிப்பாளர், நீங்கள் மேலும் ஆராயலாம் MDN MutationObserver வழிகாட்டி.
ஜாவாஸ்கிரிப்ட் உள்ளடக்கிய கூறுகளைக் கையாள்வதில் ஆழமாகத் தெரிந்துகொள்ள, பார்க்கவும் W3C HTML எடிட்டிங் APIகள் பக்கம்.