คำนำ:
เนื่องจากโครงการพัฒนาของ บริษัท ต้องใช้ปลั๊กอินอิโมติคอนจึงอยู่ใน Baidu มาเป็นเวลานาน ปลั๊กอินอิโมติคอนจำนวนมากต้องอ้างอิงไฟล์ JS จำนวนมากและไม่มีการสาธิตแบบสำเร็จรูปที่จะใช้ ปลั๊กอินบางตัวอ้างถึงรูปภาพจำนวนมากและอิโมติคอนแต่ละตัวจะต้องขออีกครั้ง สำหรับฟังก์ชั่นดังกล่าวมันไม่คุ้มค่ากับความพยายามที่จะแนะนำ JS และ IMGs จำนวนมาก ...
ดังนั้นบล็อกเกอร์จึงเขียนรหัส "ปลั๊กอินนิพจน์" ขนาดเล็กเพื่อใช้งานง่ายในอนาคต
การทำงาน
ฟังก์ชั่น: ผ่านรูปแบบอักขระที่สอดคล้องกับนิพจน์ไปยังพื้นหลังพื้นหลังจะส่งคืนสตริงและส่วนหน้าจะแยกวิเคราะห์สตริงลงในนิพจน์ที่สอดคล้องกันเพื่อแสดงบนหน้า
วิธีใช้:
กำหนดค่าพารามิเตอร์ที่ต้องการในตัวเลือก
ตัวเลือก var = {emojiarray: ['angry'], // กรอกข้อมูลใน array ของ emoji strings, [หมายเหตุ: ไอคอนด้านล่างภาพไฟล์ต้นฉบับคุณต้องเขียนสตริงในกล่องสีแดงดูรูปด้านล่างสำหรับรายละเอียด] textareaid: 'emoji-editor' 'emojicontainer', // วัตถุคอนเทนเนอร์ที่เก็บ emoji sendid: 'ส่ง', // ปุ่มเพื่อส่งข้อมูล idemojitranslatecls: 'emoji-comment', // ชื่อคลาสคอนเทนเนอร์ที่ต้องเปลี่ยนเป็น emoji (img) text = emoji ใหม่ (ตัวเลือก); text.init ();ภาพหน้าจอของเอฟเฟกต์โดยประมาณ: (UI สามารถสวยงามตามความต้องการของพวกเขา)
หลังจากคลิกส่งข้อมูลที่ส่งไปยังพื้นหลังคือ:
สามหลักการของปลั๊กอินอิโมติคอน:
•วิธีแสดงการแสดงออก?
CSS Sprites (เทคโนโลยีการรวมรูปภาพ) ตั้งค่าไอคอนพื้นหลังก่อนจากนั้นกำหนดตำแหน่งความกว้างความสูงของไอคอนขนาดเล็กแต่ละตัวและแสดงนิพจน์ที่คุณต้องการแสดง ปัญหาที่พบในช่วงเวลานี้: จะควบคุมขนาดของนิพจน์ที่แสดงได้อย่างไร? สิ่งแรกที่ฉันคิดคือวิธีการขนาดพื้นหลัง แต่มันเป็น "ทางกายภาพ" มากในการกำหนดตำแหน่งของมันใหม่ ต่อมาเมื่ออนาคตมืดฉันพบการแปลงคุณสมบัติ: สเกล (1.5); ในการควบคุมอัตราส่วนการปรับขนาดองค์ประกอบปัจจุบันฮ่าฮ่ารหัสหนึ่งบรรทัดเสร็จสิ้น ~ คุณต้องการให้นิพจน์มีขนาดใหญ่หรือเล็กและคุณไม่พอใจกับขนาดหรือไม่? ทำรหัสทั้งหมดให้เสร็จ•วิธีแสดงอิโมติคอนในกล่องอินพุต?
ตอนแรกฉันเลือก textarea ของอินพุต แต่เมื่อฉันใส่อีโมติคอน "ผนวก" บนกล่องอินพุตไอคอนจะไม่ปรากฏขึ้น ต่อมาฉันลอง div แล้ว "ผนวก" และพบว่าการแสดงออกสามารถแสดงได้สำเร็จ แต่ div ไม่สามารถป้อนข้อความซึ่งไร้ผล ...
แนวคิดเบื้องต้น: ใช้การฟังอินพุตเพื่อเพิ่มค่า textarea ให้กับ DIV ในเวลาจริง ในทำนองเดียวกันสิ่งนี้ไม่ขอบคุณ ~ สำรวจต่อไป ...
ต่อมาฉันค้นพบคุณลักษณะจำนวนมาก เป็นที่ชื่นชอบ = "จริง" และเลือกที่เป็นที่ชื่นชอบอย่างมีความสุข
ในตอนแรกคุณใช้ Span เพื่อโฮสต์ไอคอนอิโมติคอน แต่ถ้าคุณวางภาพด้วยแท็ก div หรือ span แท็กที่เป็นที่ชื่นชอบจะถูกเพิ่มลงใน div/span ล่าสุดโดยค่าเริ่มต้น ... ดังนั้นมันจะทำให้คุณป้อนไอคอนอิโมติคอนแล้วป้อนข้อความ ข้อความสุดท้ายจะอยู่ในช่วง/ช่วงสุดท้ายส่งผลให้ไม่มีการแสดงข้อความ โอเค ... ฉันเหนื่อยมาก ...
เนื่องจากไม่สามารถใช้ Div/Span ได้ให้ใช้แท็ก IMG เพื่อโฮสต์นิพจน์และตอนนี้คุณสามารถป้อนได้ตามปกติ
[ContentEditable มีปัญหารองรับข้อความที่หลากหลายไม่ปลอดภัยและมีประสบการณ์การใช้งานที่ไม่ดี -
ตัวอย่างเช่น: เมื่อผู้ใช้วางพวกเขาจะนำรูปแบบโดยอัตโนมัติ ตัวอย่างมีดังนี้:
นี่คือรหัสจากต้นแบบออนไลน์เพื่อลบฟังก์ชั่นข้อความที่หลากหลาย สำหรับการอ้างอิงเฉพาะ: โพสต์บล็อกหลัก
•วิธีการแปลงรูปภาพและข้อความ?
ในเวลานี้คุณต้องใช้กฎที่มีประสิทธิภาพ ก่อนอื่นใช้ html () เพื่อรับเนื้อหาแล้วประมวลผลเนื้อหา แปลงเป็นข้อความ:
1 content.replace (/<img/b [^>]*/, imgobj [j]) // จับคู่ทั้งหมด <img/> และแทนที่ด้วยรูปแบบที่สอดคล้องกัน
2 imgobj.push (รูปแบบ + img [i] .getAttribute ("alt") + รูปแบบ); // ฉันใช้รูปแบบที่นี่: ดังนั้นจึงเป็นรูปแบบที่คล้ายกับสิ่งนี้: กลัว: เพื่อแปลงเป็นภาพ:
var keys = '//+|-|||| ball | a | ab | abc | abcd | abcd | ยอมรับ ... ' // มีเพียง regex เท่านั้นที่แสดงอยู่ที่นี่ regex = ใหม่ regexp (':(' + คีย์ + '):', 'g'), // จับคู่รูปแบบเช่นนี้: $ (obj [i]). html (). แทนที่ (regex, emoji) // แทนที่ฟังก์ชั่น emoji () รูปแบบ img}รูปแบบรหัสของปลั๊กอินทั้งหมดยังเป็นวิธีทั่วไปของการห่อหุ้ม
// ฟังก์ชั่นแอตทริบิวต์ที่ไม่แน่นอนของวัตถุอีโมจิ emoji (ตัวเลือก) {this.emoji = ตัวเลือก. emojiarray, this.textareaid = ตัวเลือก. textareaid, this.loadid = opotion.loadid, this.sendid = ตัวเลือก. Option.emojitranslatecls;}// ทุกครั้งที่มีการสร้างอินสแตนซ์แอตทริบิวต์ข้างต้นจะถูกสร้างใหม่เพื่อให้สำหรับวิธีการคงที่จะใช้หน่วยความจำมากขึ้น นี่ไม่เป็นมิตรกับสิ่งแวดล้อมหรือมีประสิทธิภาพ ดังนั้นคุณสมบัติและวิธีการที่ไม่เปลี่ยนแปลงเหล่านั้นสามารถกำหนดได้โดยตรงบนวัตถุต้นแบบ ในเวลานี้วิธีการคงที่ทั้งหมดเป็นที่อยู่หน่วยความจำเดียวกันชี้ไปที่วัตถุต้นแบบซึ่งจะช่วยปรับปรุงประสิทธิภาพการทำงาน
emoji.prototype = {init: function () {// ใส่วิธีการเริ่มต้นบางอย่าง this.toemoji (); this.loademoji (); this.bindevent ();}, bindevent: function () {}, toemoji: function () {}, // แปลงข้อมูลเซิร์ฟเวอร์เป็น emoticons totext: function () {} // แปลงเป็น text loademoji: function () {} // โหลดอิโมติคอนตกลงแม้ว่าปลั๊กอินนิพจน์ดังกล่าวจะเสร็จสมบูรณ์ แต่ก็ง่ายที่จะผูกติดอยู่กับมันหรือไม่? ปัจจุบันคุณต้องพึ่งพา jQuery ในขณะนี้ หากคุณมีพลังงานให้ดำเนินการต่อไปยัง Tinker ด้วย O (∩_∩) O ตาม JS ดั้งเดิม รหัสการใช้งานเฉพาะอยู่ใน GitHub ในที่สุดแนบที่อยู่ gitHub: https://github.com/beidan/emoji
ข้างต้นคือการแนะนำ JavaScript ที่บรรณาธิการได้แนะนำให้รู้จักกับคุณเริ่มตั้งแต่ 0 และฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!