เว็บแอพพลิเคชั่นโมบายเฟรมเวิร์กคอนเซ็ปต์

iUI, jQTouch, WPTouch, PhoneGap, XUI, iWebkit, Rhodes, gwt-mobile... เมื่อเราเริ่มประหลาดใจที่ แอปพลิเคชันมือถือบนเว็บ นั้นเต็มไปด้วยเฟรมเวิร์กและไลบรารีคลาสที่หลากหลาย อันที่จริง เว็บเฟรมเวิร์ก หลักเพิ่งเริ่มต้น ช่องมือถือ: เวอร์ชัน Touch ของ YUI3.2 ของ Yahoo, jQueryMobile ของ jQuery, ExtJS ที่รวม JQTouch และเฟรมเวิร์ก Sencha Touch ที่เปิดตัวโดยไลบรารี Raphaël - -

การเปลี่ยนชื่อ ExtJs เป็น Sencha ทำให้ฉันตกใจมาก ท้ายที่สุด ฉันเคยเป็นแฟนเฟรมเวิร์กของ ExtJs จริงๆ แล้วมันไม่ใช่เรื่องง่ายเลยที่เฟรมเวิร์กรุ่นเฮฟวี่เวทจะพลิกผันและพัฒนาไปในทิศทางของการสัมผัสบนมือถือ เราทำไม่ได้ ช่วยได้แต่ต้องประหลาดใจกับผลกระทบของแอปพลิเคชันบนมือถือที่กำลังจะเกิดขึ้น

ตกลง ฉันไม่อยากจะแนะนำให้คุณรู้จักกับการเปรียบเทียบการใช้งานและประสิทธิภาพของเฟรมเวิร์กแอปพลิเคชันบนมือถือบนเว็บต่างๆ เพิ่งได้รับอิทธิพลจาก ExtJs และอยากรู้ว่าฉันไปไกลแค่ไหนแล้ว และสั่งสมประสบการณ์ส่วนหน้าได้ดีขึ้น ฉันเริ่มจินตนาการว่าเฟรมเวิร์กแอปพลิเคชันบนมือถือบนเว็บที่ดีควรเป็นอย่างไร และเริ่มพยายามนำไปใช้ การสร้างวงล้อขึ้นมาใหม่เป็นเพียงการบังคับตัวเองให้เข้าใจสาขานี้ให้ลึกซึ้งยิ่งขึ้น โดยไม่หยิ่งพอที่จะท้าทายสิ่งใด ๆ ดังนั้นหลังจากวิเคราะห์และเปรียบเทียบแล้วสรุปได้ดังนี้

1.น้ำหนักเบา

นี่ควรเป็นจุดที่สำคัญที่สุดในกรอบงานแอปพลิเคชันมือถือ อย่าคิดว่าความนิยมของ 3G และ WiFi ถือเป็นเงื่อนไขระดับชาติ เป็นเรื่องยากสำหรับผู้ใช้ส่วนใหญ่ในการดาวน์โหลดไฟล์ CSS และ JS 100K ของคุณภายใน 3 วินาที ดังนั้น กรอบงานแอปพลิเคชันมือถือของเราจึงต้องมีน้ำหนักเบาที่สุดเท่าที่จะเป็นไปได้ และวิธีการตั้งชื่อและฟังก์ชันการใช้งานทั้งหมดจะต้องกระชับและมีการบีบอัดสูงที่สุดเท่าที่จะเป็นไปได้ ทิ้งเอฟเฟกต์พิเศษและส่วนประกอบของเว็บแอปพลิเคชัน PC เหล่านั้น อย่าเพิ่ม jQuery.js จำนวน 7,80K ไปยังเพจของคุณเพียงเพื่อเอฟเฟกต์เมนู

2. ความเข้ากันได้กับเบราว์เซอร์มือถือทั่วไป

ด้วยแพลตฟอร์มและเบราว์เซอร์มือถือจำนวนมาก จึงเป็นเรื่องยากสำหรับแอปพลิเคชันมือถือของคุณที่จะทำงานอย่างสม่ำเสมอบนเบราว์เซอร์ทั้งหมด บางครั้งคุณจำเป็นต้องโหลดไฟล์สไตล์ที่แตกต่างกันสำหรับเบราว์เซอร์ที่แตกต่างกัน หรือใช้ฟังก์ชันที่แตกต่างกันเพื่อให้ได้ผล ดังนั้นเฟรมเวิร์กของเราจะต้องมีวิธีการที่สามารถระบุเบราว์เซอร์กระแสหลักต่างๆ ได้ โดยเฉพาะเฟรมเวิร์กของคุณจะต้องสามารถแยกแยะระหว่าง iPhone, iPad, Android, Windows Phone เป็นต้น ตกลง เพื่อให้เฉพาะเจาะจงกับประเทศมากขึ้น QQ mobile เบราว์เซอร์และ UCWeb สิ่งสุดท้ายที่ควรทราบคือเราพยายามที่จะไม่ใช้วิธี AU เพื่อตัดสินที่นี่ เนื่องจาก avigator.userAgent ของแต่ละเบราว์เซอร์ไม่น่าเชื่อถือมาก ที่นี่ คุณสามารถอ้างถึงแนวคิดของ mooltools เพื่อตัดสินเบราว์เซอร์และนำไปใช้ได้ สู่สนามมือถือของเรา

3. ตัวเลือกอันทรงพลัง

ตัวเลือกอาจกล่าวได้ว่าเป็นจิตวิญญาณของเฟรมเวิร์ก คลาสหลอกขั้นสูงของ CSS3 จะถูกนำมาใช้อย่างกว้างขวางในแอปพลิเคชันมือถือบนเว็บในอนาคต ดังนั้น เฟรมเวิร์กของเราจะต้องสามารถสำรวจและค้นหาแท็ก HTML5 และคลาสหลอก CSS3 ได้จำนวนมากอย่างรวดเร็ว มากที่สุดเท่าที่จะเป็นไปได้ แม้ว่าจะเป็นเช่น E:first-of-type ก็ตาม ก็คือโครงสร้างที่ตัวเลือก jquery ไม่รองรับ

4. เอฟเฟ็กต์ภาพเคลื่อนไหวของหน้า

แตกต่างจากแอปพลิเคชันเว็บบนเดสก์ท็อป แอปพลิเคชันบนมือถือมีความตื่นตามากขึ้นในแง่ของเอฟเฟกต์การสลับหน้า เช่น การสลับการเลื่อน ป๊อปอัปมาส์ก เฟดเข้าและเฟดออก หน้าจอสแปลช ซูมเข้า เอฟเฟกต์ซูมออกบน iPhone เป็นต้น ดูคำจำกัดความ CSS ของภาพเคลื่อนไหว fadein และ Zoomin