JavaScript Academy · درس

Blobs وعناوين URL للكائنات

أنشئوا عناوين URL للـ blob واستخدموها للتنزيلات.

Blobs وعناوين URL للكائنات درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ما هو Blob؟

يمثل Blob (كائنًا ثنائيًا كبيرًا) بيانات خامًا غير قابلة للتغيير، مثل محتويات الملفات، في الذاكرة. والملفات نوع خاص من Blob له اسم وتاريخ تعديل.

تتيح لك كائنات Blob إنشاء البيانات الثنائية وتقسيمها وتنزيلها داخل المتصفح.

إنشاء Blob

أنشئ Blob من مصفوفة من الأجزاء (السلاسل، والمخازن المؤقتة، وكائنات Blob الأخرى) ومن كائن خيارات يحدد نوع MIME عبر type.

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(blob.size);
console.log(blob.type);

إنشاء Blob من أجزاء متعددة

تُسلسل مصفوفة الأجزاء بالترتيب. ويمكنك المزج بين السلاسل والمصفوفات ذات الأنواع.

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

قراءة Blob

توفر كائنات Blob طرقًا تعتمد على Promise، هي text() وarrayBuffer() وstream()، لقراءة محتوياتها.

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

اقتطاع جزء من Blob

تعيد blob.slice(start, end) كائن Blob جديدًا يغطي جزءًا من الكائن الأصلي، من دون نسخ الكائن بأكمله. وهذا مفيد للتحميلات المجزأة.

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

إنشاء عنوان URL لكائن

تعيد URL.createObjectURL(blob) عنوان URL قصير العمر يشير إلى كائن Blob الموجود في الذاكرة. ويمكنك استخدامه كقيمة لـ img.src، أو للخاصية href في رابط، أو كمصدر لفيديو.

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

معاينة صورة مرفوعة

حوّل ملفًا محددًا إلى عنوان URL لكائن وأسنده إلى عنصر صورة لمعاينته فورًا، من دون الحاجة إلى رحلة ذهاب وإياب إلى الخادم.

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

بدء التنزيل

أنشئ Blob، وأنشئ عنوان URL لكائن، ثم انقر على عنصر ارتساء مؤقت ذي سمة download لحفظ ملف مُنشأ.

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

إلغاء عناوين URL للكائنات

تُبقي عناوين URL للكائنات كائن Blob في الذاكرة حتى تستدعي URL.revokeObjectURL(url). ألغِ العنوان دائمًا عند الانتهاء لتجنب تسرّب الذاكرة.

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

كائنات Blob وJSON

يمكنك إنشاء ملف JSON قابل للتنزيل عن طريق تحويل البيانات إلى سلسلة نصية ثم وضعها في Blob مع نوع MIME الصحيح.

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

أهمية كائنات Blob

تتيح لك كائنات Blob وعناوين URL للكائنات التعامل مع البيانات الثنائية بالكامل على جانب العميل: معاينة الملفات المرفوعة، وإنشاء التنزيلات، وتقسيم الملفات الكبيرة إلى أجزاء. تذكر إلغاء عناوين URL عند الانتهاء. سترسل بعد ذلك الملفات إلى خادم باستخدام fetch.

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

اختبار سريع

بعد استخدام عنوان URL لكائن لتنزيل ملف، ما الذي ينبغي استدعاؤه لتحرير الذاكرة؟

مراجعة: كائنات Blob وعناوين URL للكائنات

لقد تعلمتم التعامل مع البيانات الثنائية:

ينشئ new Blob(parts, { type }) بيانات ثنائية غير قابلة للتغيير.
اقرأ البيانات باستخدام text() وarrayBuffer()، وقسّمها باستخدام slice().
ينشئ URL.createObjectURL عنوان URL بصيغة blob: يمكن استخدامه للمعاينات والتنزيلات.
استدعِ دائمًا URL.revokeObjectURL عند الانتهاء لتحرير الذاكرة.

الأسئلة الشائعة

هل درس «Blobs وعناوين URL للكائنات» مجاني؟

نعم — نص درس «Blobs وعناوين URL للكائنات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «Blobs وعناوين URL للكائنات»؟

أنشئوا عناوين URL للـ blob واستخدموها للتنزيلات. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «Blobs وعناوين URL للكائنات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy