ส่วนประกอบ JS มักจะมาพร้อมกับอิมเมจ css แต่อาจเป็นเรื่องยากเล็กน้อยที่จะใช้ด้วยวิธีนี้ เพื่อให้ส่วนประกอบเดี่ยวเพียงพอ ฉันจึงเกิดแนวคิดในการรวมอิมเมจ css ใน js จากนั้น ลดจำนวนคำขอลงซะเลย นี่ดูเหมือนจะสำคัญกว่านะ อิอิ
แล้วจะจัดแพ็คเกจอย่างไร แม้ว่าจะมีโซลูชั่นเช่น แพ็คเกจทรัพยากร แต่ผู้ใช้หลักของเรายังคงใช้เบราว์เซอร์ที่ทันสมัยเช่น ie6!
ทางออกของฉัน:
- CSS : CSS สามารถเก็บไว้ใน js เป็นสตริงและเพิ่มลงในเพจแบบไดนามิกด้วย js หน้าอาจไม่เหมาะสำหรับการใช้งาน แต่โดยปกติแล้วส่วนประกอบจะไม่ได้รับผลกระทบ
- image : รูปภาพที่ใช้ใน CSS จะถูกรวบรวมเป็น js โดยใช้ dataURI ( RFC 2397 ) และ MHTML ( RFC 2557 ) ( dataURI และ MHTML ที่เขียนโดย Qin Ge ยังคงแนะนำสำหรับนักเรียนที่ไม่รู้ว่าคืออะไร) หากคุณต้องการเส้นทางที่แน่นอนใน CSS คุณสามารถบันทึก js ได้ หากใช้ js โดยตรง ก็เป็นไปได้ในทางทฤษฎี แต่โดยปกติแล้วจะดีกว่าถ้าเพียงแค่เปลี่ยนชื่อคลาสของ js
- flash : แฟลชบางตัวที่ค่อนข้างเล็ก เช่น ที่เก็บข้อมูล การคัดลอก ฯลฯ สามารถบรรจุได้ อย่างไรก็ตาม ตอนนี้เราสามารถแก้ไขปัญหาที่ไม่ใช่ IE ได้แล้ว ให้ใช้ลิงก์ภายนอก
นี่คือ ตัวอย่างการทดสอบบรรจุภัณฑ์
รายละเอียดและความยุ่งเหยิงบางอย่าง
- การบรรจุรูปภาพทั้งหมดลงใน js นั้นไม่สมเหตุสมผลเลย สิ่งที่บรรจุไว้ควรเป็นรูปภาพที่ต้องใช้
จะดีกว่าไหมถ้าจะแพ็ครูปภาพที่แยกออกไปไว้ในแพ็คเกจอื่นหรือใช้รูปภาพโดยตรง - สามารถบีบอัดรูปภาพก่อนแล้วจึงแก้ไข เครื่องมือบีบอัดรูปภาพที่ฉันเลือกคือ pngout และโดยปกติฉันจะใช้
-s5
มีคนทำการทดสอบบางอย่างแล้ว ข้อมูลที่ไม่มีการบีบอัดใน base64 อาจจะไม่ ทุกคนสามารถตัดสินใจเองได้ - การอ้างอิงรูปภาพซ้ำๆ จะมีขนาดใหญ่มากหากคุณใช้ dataURI โดยตรง และ gzip นั้นโง่เหมือนหมูและจะไม่บีบอัดมัน
ฉันเลือกที่จะบันทึกมันเป็นตัวแปร js ในขณะที่เพื่อนร่วมชั้นของฉันใน Taobao ใช้วิธีการเรียน - MHTML ไม่สามารถแสดงใน ie7+/vista ได้เนื่องจากไม่มีตัวคั่นส่วนท้าย Win03sp2 ขาด
Content-Type และจะทำให้เกิดการแจ้งเตือนด้านความปลอดภัย เหตุผลก็คือ MIME ไม่ใช่มาตรฐานและไม่สามารถละเว้นทุกอย่างได้ - ฉันควรเลือกที่จะรวมทุกอย่างไว้ในไฟล์เดียวหรือรวมเป็นสองไฟล์ตามประเภท MHTML และ dataURI และส่งไฟล์ตาม ua บนเซิร์ฟเวอร์หรืออ่านอย่างชาญฉลาดโดยไลบรารีของคลาส
- มีปัญหาในการใช้ dataURI ในการคอมไพล์ swf ว่ากันว่าไม่มีปัญหากับ fp8 แต่ตอนนี้เป็น fp10 แล้ว
โซลูชันเดี่ยวอีกวิธีหนึ่งคือการรวม js ลงใน swf แต่รู้สึกว่าไม่สอดคล้องกัน
ตัวอย่างหลายส่วน/ที่เกี่ยวข้อง
มันไม่ได้มาตรฐานแต่ก็สามารถทำงานได้ การขึ้นบรรทัดใหม่ก็มีความสำคัญเช่นกัน
ประเภทเนื้อหา: multipart/ related; boundary = "_BAIDU_YOUA_BB_YEP"
--_BAIDU_YOUA_BB_YEP
ประเภทเนื้อหา:image/png
เนื้อหา-ที่ตั้ง:logo.png
เนื้อหา-การถ่ายโอน-การเข้ารหัส:base64
...ฐาน64...
--_BAIDU_YOUA_BB_YEP
ประเภทเนื้อหา:image/png
เนื้อหา-ที่ตั้ง:nono.png
เนื้อหา-การถ่ายโอน-การเข้ารหัส:base64
...ฐาน64...
--_BAIDU_YOUA_BB_YEP--
