iUI, jQTouch, WPTouch, PhoneGap, XUI, iWebkit, Rhodes, gwt-mobile... Quando começamos a nos maravilhar com o fato de os aplicativos móveis da web estarem repletos de vários frameworks e bibliotecas de classes, na verdade, os principais frameworks da web apenas começaram seu Campos móveis: versão Touch do YUI3.2 do Yahoo, jQueryMobile do jQuery, ExtJS integrando JQTouch e o framework Sencha Touch lançado pela biblioteca Raphaël. . .
A renomeação de ExtJs para Sencha realmente me chocou. Afinal, eu já fui um fã da estrutura ExtJs. Na verdade, não é fácil para uma estrutura tão pesada mudar repentinamente e se desenvolver na direção do toque móvel. Não deixe de ficar maravilhado com o impacto das grandes mudanças que estão por vir.
OK, aqui não quero apresentar a você a comparação de uso e desempenho de várias estruturas de aplicativos móveis da web. Apenas influenciado pelos ExtJs, e querendo saber até onde já havia ido, e melhor acumular experiência front-end, comecei a imaginar o que deveria ser um bom framework de aplicação web mobile, e comecei a tentar implementá-lo. Reinventar a roda é apenas se forçar a entender esse campo mais profundamente, não ser arrogante o suficiente para desafiar qualquer coisa. Assim, após análise e comparação, o resumo é o seguinte:
1. Leve
Este deve ser o ponto mais importante na estrutura de aplicativos móveis. Não pense na popularidade de 3G e WiFi. As condições nacionais são condições nacionais. É difícil para a maioria dos usuários baixar seus arquivos CSS e JS de 100K em 3 segundos. Portanto, nossa estrutura de aplicativos móveis deve ser o mais leve possível e todos os métodos de nomenclatura e implementação de funções devem ser tão concisos e altamente compactados quanto possível. Jogue fora os efeitos especiais e componentes de aplicativos da web para PC, não adicione 7,80K de jQuery.js à sua página apenas para um efeito de menu.
2. Compatibilidade com navegadores móveis convencionais
Com tantas plataformas e navegadores móveis, é difícil para seu aplicativo móvel se comportar de forma consistente em todos os navegadores. Às vezes, você precisa carregar arquivos de estilos diferentes para navegadores diferentes ou executar funções diferentes para obter o efeito. Portanto, nossa estrutura deve ter um método que possa identificar vários navegadores convencionais. Para ser mais específico, sua estrutura deve ser capaz de distinguir entre iPhone, iPad, Android, Windows Phone, etc. OK, para ser mais específico para o país, QQ mobile. navegador e UCWeb. A última coisa a notar é que tentamos não usar o método AU para julgar aqui, porque o avigator.userAgent de cada navegador não é confiável. Aqui você pode consultar a ideia do mooltools para julgar os navegadores e aplicá-lo. para o nosso campo móvel.
3. Seletor poderoso
Pode-se dizer que o seletor é a alma da estrutura. As pseudoclasses CSS3 avançadas serão amplamente utilizadas em futuros aplicativos móveis da web. Portanto, nossa estrutura deve ser capaz de percorrer e localizar tantas tags HTML5 e pseudoclasses CSS3 com a mesma rapidez. possível, mesmo que sejam como E:first-of-type é uma estrutura que não é suportada por seletores jquery.
4. Efeito de animação de página
Diferente dos aplicativos da web para desktop, os aplicativos móveis são muito mais deslumbrantes em termos de efeitos de troca de página, como: alternância deslizante, pop-up de máscara, fade-in e fade-out, tela inicial, efeitos de zoom, zoom out no iPhone, etc. Dê uma olhada nas definições CSS de animações fadein e zoomin