iUI, jQTouch, WPTouch, PhoneGap, XUI, iWebkit, Rhodes, gwt-mobile... 웹 모바일 애플리케이션이 다양한 프레임워크와 클래스 라이브러리로 가득 차 있다는 사실에 놀라기 시작했을 때 실제로 주요 웹 프레임워크는 이제 막 시작되었습니다. 모바일 필드: Yahoo YUI3.2의 터치 버전, jQuery의 jQueryMobile, JQTouch를 통합한 ExtJS 및 Raphaël 라이브러리에서 출시된 Sencha Touch 프레임워크. . .
ExtJ를 Sencha로 이름을 바꾼 것은 정말 충격이었습니다. 결국 저는 ExtJs 프레임워크의 팬이었습니다. 이렇게 무거운 프레임워크가 갑자기 모바일 터치 방향으로 발전하는 것은 정말 쉽지 않습니다. 앞으로 다가올 모바일 애플리케이션의 큰 변화에 놀라지 마세요.
좋습니다. 여기서는 다양한 웹 모바일 애플리케이션 프레임워크의 사용법과 성능 비교를 소개하고 싶지 않습니다. 단지 ExtJ의 영향을 받아 내가 어디까지 왔는지 알고 싶고 프론트엔드 경험을 더 잘 쌓고 싶어서 좋은 웹 모바일 애플리케이션 프레임워크가 무엇인지 상상하기 시작했고, 그것을 구현해 보기 시작했습니다. 바퀴를 재발명한다는 것은 무엇이든 도전할 만큼 오만하지 않고 이 분야를 더 깊이 이해하도록 강요하는 것입니다. 그래서 분석하고 비교한 결과 요약하면 다음과 같습니다.
1.경량
이것이 모바일 애플리케이션 프레임워크에서 가장 중요한 점이어야 합니다. 3G 및 WiFi의 인기를 생각하지 마십시오. 국가 상황은 대부분의 사용자가 3초 내에 100K CSS 및 JS 파일을 다운로드하기 어렵습니다. 따라서 모바일 애플리케이션 프레임워크는 최대한 가벼워야 하며 모든 이름 지정 및 기능 구현 방법은 최대한 간결하고 압축률이 높아야 합니다. PC 웹 애플리케이션 특수 효과 및 구성 요소를 버리고, 단지 메뉴 효과를 위해 페이지에 7,80K의 jQuery.js를 추가하지 마세요.
2. 주류 모바일 브라우저와의 호환성
모바일 플랫폼과 브라우저가 너무 많아서 모바일 애플리케이션이 모든 브라우저에서 일관되게 작동하기가 어렵습니다. 때로는 효과를 얻기 위해 다양한 브라우저에 대해 서로 다른 스타일 파일을 로드하거나 서로 다른 기능을 실행해야 합니다. 따라서 우리 프레임워크에는 다양한 주류 브라우저를 식별할 수 있는 방법이 있어야 합니다. 구체적으로 말하면 귀하의 프레임워크는 iPhone, iPad, Android, Windows Phone 등을 구별할 수 있어야 합니다. 국가별로 더 구체적으로 말하면 QQ 모바일입니다. 브라우저와 UCWeb. 마지막으로 주목해야 할 점은 각 브라우저의 avigator.userAgent가 매우 신뢰할 수 없기 때문에 여기서는 AU 방법을 사용하지 않으려고 한다는 것입니다. 여기서는 mooltools의 아이디어를 참조하여 브라우저를 판단하고 적용할 수 있습니다. 우리의 모바일 분야로.
3. 강력한 선택기
선택자는 프레임워크의 핵심이라고 할 수 있습니다. CSS3 고급 의사 클래스는 향후 웹 모바일 애플리케이션에서 광범위하게 사용될 것입니다. 따라서 우리 프레임워크는 최대한 많은 HTML5 태그와 CSS3 의사 클래스를 빠르게 탐색하고 찾을 수 있어야 합니다. 가능한 한 E:first-of-type과 같더라도 jquery 선택기에서 지원하지 않는 구조입니다.
4. 페이지 애니메이션 효과
데스크톱 웹 애플리케이션과 달리 모바일 애플리케이션은 슬라이딩 전환, 마스크 팝업, 페이드 인 및 페이드 아웃, 스플래시 화면, 확대, iPhone의 축소 효과 등과 같은 페이지 전환 효과 측면에서 훨씬 더 눈부십니다. 페이드인 및 확대/축소 애니메이션에 대한 CSS 정의를 살펴보세요.