निर्धारित करें कि जावास्क्रिप्ट सिंटैक्स एसीई

Question

के हैंडलर में मान्य है या नहीं, मैं इंटरैक्टिव जावास्क्रिप्ट संपादन के लिए ACE संपादक का उपयोग कर रहा हूं। जब मैं संपादक को जावास्क्रिप्ट मोड में सेट करता हूं, तो एसीई स्वचालित रूप से निर्धारित करता है कि कोड मान्य है या नहीं, त्रुटि संदेश और पंक्ति संख्या के साथ हाइलाइट किया गया है।

change ईवेंट हैंडलर के दौरान, मैं यह जानना चाहता हूं कि एसीई सोचता है कि कोड मान्य है या नहीं, इससे पहले कि मैं eval() पर प्रयास करता हूं। एक ही तरीका है कि मैंने सोचा था कि मैं यह कर सकता है:

var jsMode = require("ace/mode/javascript").Mode; 
var editor = ace.edit('mycode'), edEl = document.querySelector('#mycode'); 
editor.getSession().setMode(new jsMode); 
editor.getSession().on('change',function(){ 
    // bail out if ACE thinks there's an error 
    if (edEl.querySelector('div.ace_gutter-cell.ace_error')) return; 
    try{ 
    eval(editor.getSession().getValue()); 
    }catch(e){} 
}); 

हालांकि

:

1. एक विशेष वर्ग के साथ यूआई में एक तत्व की उपस्थिति पर लीनिंग बहुत नाजुक, लगता है, लेकिन अधिक महत्वपूर्ण बात,
2. पार्सिंग के लिए दृश्य अद्यतन change कॉलबैक होता है।

इस प्रकार, मैं वास्तव में (पहले जावास्क्रिप्ट कार्यकर्ता में किक देरी) से अधिक 500ms इंतजार करना:

editor.getSession().on('change',function(){ 
    setTimeout(function(){ 
    // bail out if ACE thinks there's an error 
    if (edEl.querySelector('div.ace_gutter-cell.ace_error')) return; 
    try{ 
     eval(editor.getSession().getValue()); 
    }catch(e){} 
    },550); // Must be longer than timeout delay in javascript_worker.js 
}); 

वहाँ एक बेहतर तरीका है, जे एस मोड के लिए एक गैर-दस्तावेजी एपीआई में कुछ, यह पूछने के लिए कि क्या कोई त्रुटि है या नहीं?

Answer 1

ऐस (एक worker में) आंतरिक रूप JsHint उपयोग करता है और जैसा कि आप फ़ाइल में देख सकते हैं वहाँ उत्सर्जित एक घटना है:

this.sender.emit("jslint", lint.errors); 

आप subscribe कर सकते हैं इस घटना के लिए, या JSHint कोड फोन अपने आप को (यह सुंदर है छोटा) जब आवश्यक हो।

Answer 2

मुझे एक ऐसा समाधान मिला जो शायद डीओएम की तुलना में तेज़ है। संपादक के सत्र में एक एनाटेशन विधि है जिसका आप उपयोग कर सकते हैं। प्रत्येक एनोटेशन में एक प्रकार होता है जो दिखाता है कि वे एक त्रुटि हैं या नहीं।

यहाँ कैसे मैं जहाँ तक मुझे पता है, एनोटेशन के लिए दो अन्य प्रकार के होते हैं 'बदलें'

function callback() { 
    var annotation_lists = window.aceEditor.getSession().getAnnotations(); 
    var has_error = false; 

    // Unfortunately, you get back a list of lists. However, the first list is 
    // always length one (but not always index 0) 
    go_through: 
    for (var l in annotation_lists) { 
     for (var a in annotation_lists[l]) { 
      var annotation = annotation_lists[l][a]; 
      console.log(annotation.type); 
      if (annotation.type === "error") { 
       has_error = true; 
       break go_through; 
      } 
     } 
    } 

    if (!has_error) { 
     try { 
      eval(yourCodeFromTextBox); 
      prevCode = yourCodeFromTextBox; 
     } 
     catch (error) { 
      eval(prevCode); 
     } 
    } 
} 

पर के लिए मेरे कॉलबैक सेट किया गया है: "चेतावनी" और "जानकारी", अगर आप 'उन लोगों की भी जांच करना पसंद है।

मैंने वैश्विक स्तर पर काम करने वाले गंभीर कोड का ट्रैक रखा (अच्छी तरह से, कॉलबैक फ़ंक्शन के दायरे से बाहर) क्योंकि अक्सर कोड में त्रुटियां होंगी लेकिन एनोटेशन की सूची में नहीं। उस स्थिति में, जब त्रुटि कोड को eval'ing, यह कोड होगा और इसके बजाय पुराने कोड eval।

हालांकि ऐसा लगता है कि दो evals धीमे हो जाएंगे, ऐसा लगता है कि प्रदर्शन की तरह यह बुरा नहीं है, अब तक।

Answer 3

वर्तमान सत्र पर परिवर्तन करता है ChangeAnnotation घटनाएं जब एनोटेशन बदलते हैं। इस प्रकार

var annotations = editor.getSession().getAnnotations(); 

चाल करने के लिए लगता है

उसके बाद एनोटेशन की नया सेट प्राप्त किया जा सकता है।यह एक JSON ऑब्जेक्ट देता है जिसमें पंक्तिकुंजी और मान के रूप में एक सरणी है। मूल्य सरणी में एक से अधिक ऑब्जेक्ट हो सकते हैं, इस पर निर्भर करता है कि प्रत्येक पंक्ति के लिए एक से अधिक एनोटेशन हैं या नहीं।

संरचना इस प्रकार है (एक परीक्षण स्क्रिप्ट है कि मैंने लिखा -किसी फ़ायरबग से नकल) है

// annotations would look like 
({ 

82:[ 
    {/*annotation*/ 
     row:82, 
     column:22, 
     text:"Use the array literal notation [].", 
     type:"warning", 
     lint:{/*raw output from jslint*/} 
    } 
], 

rownumber : [ {anotation1}, {annotation2} ], 

... 

}); 

तो ..

editor.getSession().on("changeAnnotation", function(){ 

    var annot = editor.getSession().getAnnotations(); 

    for (var key in annot){ 
     if (annot.hasOwnProperty(key)) 
      console.log("[" + annot[key][0].row + " , " + annot[key][0].column + "] - \t" + annot[key][0].text); 
    } 

}); 

// thanks http://stackoverflow.com/a/684692/1405348 for annot.hasOwnProperty(key) :) 

आप वर्तमान में सभी एनोटेशन की एक सूची देना चाहिए सत्र संपादित करें, जब टिप्पणियां बदलती हैं!

आशा है कि इससे मदद मिलती है!

Answer 4

मैंने पाया आप ऐस 1.1.7 में कार्यकर्ता घटनाओं सदस्यता ले सकते हैं:

जावास्क्रिप्ट कोड के लिए, सदस्यता ले 'jslint' घटना:

session.setMode('ace/mode/javascript}'); 
session.on('changeMode', function() { 
    if (session.$worker) { 
    session.$worker.on('jslint', function(lint) { 
     var messages = lint.data, types; 
     if (!messages.length) return ok(); 
     types = messages.map(function(item) { 
     return item.type; 
     }); 
     types.indexOf('error') !== -1 ? ko() : ok(); 
    }); 
    } 
}); 

JSON कोड के लिए, सदस्यता ले 'त्रुटि' और 'ठीक 'घटना:

session.setMode('ace/mode/json'); 
session.on('changeMode', function() { 

    // session.$worker is available when 'changeMode' event triggered 
    // You could subscribe worker events here, whatever changes to the 
    // content will trigger 'error' or 'ok' events. 

    session.$worker.on('error', ko); 
    session.$worker.on('ok', ok); 
});