تسهيل تحويل ArrayBuffer إلى سلسلة باستخدام واجهة برمجة التطبيقات Encode (واجهة برمجة التطبيقات)

Jeff Posnick

قبل أكثر من عامَين، وصف ريناتو مانجيني طريقة للتحويل بين ArrayBuffers الأوّلية وتمثيل السلسلة المقابل لهذه البيانات. في نهاية المشاركة، أشار "ريناتو" إلى أنّه يتم حاليًا إعداد مسودة لواجهة برمجة تطبيقات رسمية ومُعيارَة لمعالجة الإحالات الناجحة. أصبحت المواصفات متوفّرة الآن، وقد أضاف كلّ من Firefox وGoogle Chrome واجهتَي TextDecoder وTextEncoder.

كما هو موضّح في هذا العيّنة المباشرة، التي تم اقتباس مقتطف منها أدناه، تسهّل واجهة برمجة التطبيقات Encoding API عملية الترجمة بين وحدات البايت الأوّلية وسلاسل JavaScript الأصلية، بغض النظر عن ترميزات البيانات العادية العديدة التي تحتاج إلى استخدامها.

<pre id="results"></pre>

<script>
    if ('TextDecoder' in window) {
    // The local files to be fetched, mapped to the encoding that they're using.
    var filesToEncoding = {
        'utf8.bin': 'utf-8',
        'utf16le.bin': 'utf-16le',
        'macintosh.bin': 'macintosh'
    };

    Object.keys(filesToEncoding).forEach(function(file) {
        fetchAndDecode(file, filesToEncoding[file]);
    });
    } else {
    document.querySelector('#results').textContent = 'Your browser does not support the Encoding API.'
    }

    // Use XHR to fetch `file` and interpret its contents as being encoded with `encoding`.
    function fetchAndDecode(file, encoding) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', file);
    // Using 'arraybuffer' as the responseType ensures that the raw data is returned,
    // rather than letting XMLHttpRequest decode the data first.
    xhr.responseType = 'arraybuffer';
    xhr.onload = function() {
        if (this.status == 200) {
        // The decode() method takes a DataView as a parameter, which is a wrapper on top of the ArrayBuffer.
        var dataView = new DataView(this.response);
        // The TextDecoder interface is documented at http://encoding.spec.whatwg.org/#interface-textdecoder
        var decoder = new TextDecoder(encoding);
        var decodedString = decoder.decode(dataView);
        // Add the decoded file's text to the <pre> element on the page.
        document.querySelector('#results').textContent += decodedString + '\n';
        } else {
        console.error('Error while requesting', file, this);
        }
    };
    xhr.send();
    }
</script>

يستخدم العيّنة أعلاه ميزة رصد الوظائف لتحديد ما إذا كانت واجهة TextDecoder المطلوبة متوفّرة في المتصفّح الحالي، وتعرض رسالة خطأ في حال عدم توفّرها. في التطبيق الفعلي، ستحتاج عادةً إلى استخدام طريقة تنفيذ بديلة إذا لم تكن ميزة التوافق مع الأجهزة الجوّالة متوفّرة. لحسن الحظ، لا تزال مكتبة ترميز النصوص التي ذكرها "ريناتو" في مقالته الأصلية خيارًا جيدًا. تستخدم المكتبة الطرق الأصلية على المتصفّحات التي تتيحها، وتقدّم polyfills لواجهة برمجة التطبيقات Encoding API على المتصفّحات التي لم تضيفها بعد.

تعديل في أيلول (سبتمبر) 2014: تم تعديل العيّنة لتوضيح التحقّق مما إذا كانت Encoding API متاحة في المتصفّح الحالي.