مقدمة:
نظرًا لأن مشروع تطوير الشركة يتطلب استخدام المكونات الإضافية ، فقد كان على Baidu لفترة طويلة. تحتاج العديد من المكونات الإضافية للتشويه إلى العديد من ملفات JS ، ولا توجد عروض تجريبية جاهزة للاستخدام. تشير بعض المكونات الإضافية إلى العديد من الصور ، ويجب طلب كل عاطفي مرة أخرى. لمثل هذه الوظيفة ، لا يستحق الجهد المبذول لتقديم الكثير من JS و IMGs ...
لذلك ، قام المدون بترميز "مكون إضافي للتعبير" الصغير لسهولة الاستخدام في المستقبل.
وظيفة
الوظيفة: تمرير تنسيق الحرف المقابل للتعبير إلى الخلفية ، وإرجاع الخلفية السلسلة ، وتضع الواجهة الأمامية السلسلة في التعبير المقابل لعرضه على الصفحة.
كيفية استخدام:
تكوين المعلمات المطلوبة في الخيار
VAR OPTION = {exojiarray: ['Angry'] ، // املأ مجموعة من سلاسل الرموز التعبيرية ، [ملاحظة: الرمز أدناه صورة الملف المصدر ، تحتاج فقط إلى كتابة السلسلة في المربع الأحمر ، انظر الشكل أدناه للحصول على تفاصيل] textareaid: 'Emoji-editor' ، "emojicontainer" ، // كائن الحاوية الذي يخزن eMoji sendid: 'send' ، // الزر لإرسال المعلومات idemojitranslatecls: 'exoji-comment' ، // اسم فئة الحاويات التي يجب تحويلها إلى emoji (img) ضرورية فقط لإضافة فئة تلقائيًا: exoji (خيار) ؛ text.init () ؛لقطة شاشة للتأثير التقريبي: (يمكن أن تقوم واجهة المستخدم بالتجميل وفقًا لاحتياجاتهم)
بعد النقر فوق الإرسال ، فإن البيانات المرسلة إلى الخلفية هي:
ثلاثة مبادئ من المكونات الإضافية:
• كيف تعرض التعبيرات؟
css sprites (تقنية تكامل الصور) ، قم أولاً بتعيين أيقونة الخلفية ، ثم حدد الموضع والعرض وارتفاع كل رمز صغير ، وعرض التعبير الذي تريد عرضه. المشاكل التي واجهتها خلال هذه الفترة: كيفية التحكم في حجم التعبير المعروض؟ أول شيء فكرت فيه هو طريقة حجم الخلفية ، لكنها "مادية" للغاية لإعادة تعريف موقعها. في وقت لاحق ، عندما يكون المستقبل مظلمًا ، وجدت تحويل خاصية: مقياس (1.5) ؛ للتحكم في نسبة تحجيم العنصر الحالي ، هاها ، يتم تنفيذ سطر واحد من التعليمات البرمجية ~ هل تريد أن يكون التعبير كبيرًا أو صغيرًا ، وأنت غير راضٍ عن الحجم؟ الحصول على جميع التعليمات البرمجية • كيفية عرض الرموز في مربع الإدخال؟
في البداية اخترت نص الإدخال ، لكن عندما أضع "إلحاق" الرموز على مربع الإدخال ، لم يتم عرض الرمز. في وقت لاحق ، جربت Div ثم "إلحاق" ووجدت أنه يمكن عرض التعبير بنجاح ، لكن Div لم يتمكن من إدخال النص ، الذي كان غير مثمر ...
الفكرة الأولية: استخدم الإدخال الاستماع لإضافة قيمة textarea إلى DIV في الوقت الحقيقي. وبالمثل ، هذا هو النكرة ~ استمر في استكشاف ...
في وقت لاحق اكتشفت عددًا كبيرًا من السمات. قابلة للاستمتاع = "صحيح" ، واختار بسعادة قابلة للضمن.
في البداية ، يمكنك استخدام SPAN لاستضافة أيقونة الرموز ، ولكن إذا وضعت الصورة مع علامات DIV أو SPAN ، فسيتم إضافة قابلة للضمن إلى آخر DIV/Span بشكل افتراضي ... لذلك سيؤدي ذلك إلى إدخال أيقونة الرموز ثم إدخال النص. سيكون النص الأخير في آخر Div/Span ، مما يؤدي إلى عدم عرض نص. طيب ... أنا متعب جدا ...
نظرًا لأن Div/Span غير ممكن ، استخدم علامة IMG لاستضافة التعبير ، والآن يمكنك إدخاله أخيرًا بشكل طبيعي.
[قابلة للاستمتاع به مشكلة ، فإنه يدعم النص الغني ، وغير آمن ، ولديه تجربة مستخدم سيئة. 】
على سبيل المثال: عندما يلصق المستخدمون ، فإنهم سيحضرون التنسيق تلقائيًا. الأمثلة على النحو التالي:
هذا رمز من السيد عبر الإنترنت لإزالة وظيفة النص الغنية. للحصول على مرجع محدد: منشور مدونة رئيسي
• كيفية تحويل الصور والنص؟
في هذا الوقت ، تحتاج إلى استخدام قواعد قوية. استخدم أولاً HTML () للحصول على المحتوى ، ثم معالجة المحتوى. تحويل إلى نص:
1 content.replace (/<img/b [^>]*/، imgobj [j]) // تطابق الكل <img/> واستبدله بالتنسيق المقابل
2 imgobj.push (format + img [i] .getAttribute ("alt") + format) ؛ // أستخدم التنسيق هنا: لذلك فهو شكل مشابه لهذا: Fearful: لتحويله إلى صورة:
var keys = '//+|-|||| ball | a | ab | abc | abcd | abcd | قبول ...' // فقط بعض regex مدرج هنا. regex = new regexp (':(' + keys + '):' ، 'g') ، // تطابق التنسيق مثل هذا: $ (obj [i]). تنسيق IMG المقابل}يعد تنسيق الكود للمكون الإضافي بأكمله طريقة شائعة للتغليف.
. Option.emojitranslatecls ؛}
// في كل مرة يتم إنشاء مثيل ، سيتم تجديد السمات أعلاه ، بحيث تستهلك المزيد من الذاكرة للطرق الثابتة. هذا ليس صديقًا للبيئة ولا فعال. لذلك ، يمكن تعريف تلك الخصائص والأساليب التي لم تتغير مباشرة على كائن النموذج الأولي. في هذا الوقت ، تكون جميع الطرق الثابتة هي في الواقع نفس عنوان الذاكرة ، مما يشير إلى كائن النموذج الأولي ، وبالتالي تحسين كفاءة التشغيل.
Emoji.prototype = {init: function () {// ضع بعض طرق التهيئة this.toemoji () ؛ this.loademoji () ؛ this.bindevent () ؛} ، bindevent: function () {} ، toemoji: function () {} ، // تحويل بيانات الخادم إلى emazicons totext: function () {} // تحويل إلى text loademoji: function () {} // تحميل العواطف}}حسنًا ، حتى إذا تم الانتهاء من هذا المكون الإضافي التعبير ، فهل من السهل أن يتم ربطه به أم لا؟ حاليًا ، تحتاج إلى الاعتماد على jQuery في الوقت الحالي. إذا كان لديك الطاقة ، فاستمر في العبث بـ O (∩_∩) o بناءً على JS الأصلي. رمز التنفيذ المحدد موجود على جيثب. أخيرًا ، قم بإرفاق عنوان github: https://github.com/beidan/emoji
ما سبق هو مقدمة JavaScript التي قدمها لك المحرر ، بدءًا من 0 ، وآمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!