Estrutura JavaScript "Thin" para script de navegador cruzado?

StackOverflow https://stackoverflow.com/questions/3400762

Pergunta

Existe uma estrutura JavaScript que se concentra em estender o JavaScript, nivelando as diferenças de implementação? Não quero dizer uma estrutura que simplesmente fornece a mesma funcionalidade entre diferentes navegadores, mas algo que faz os navegadores fora do padrão se comportarem como se fossem compatíveis com padrões.

Basicamente, eu quero algo que faça por JavaScript o que ie7.js faz por MSIE ou o que html5shiv Faz para os elementos HTML5. Ou as várias soluções alternativas para soquetes ou tela da web.

Eu acho que o jQuery e seu alcão poderiam fazer o truque, mas eu prefiro algo que me permita escrever normal, JavaScript compatível com padrões como se não houvesse diferenças entre os navegadores.

EDIT: Como todas as outras respostas parecem apontar que, sim, o jQuery é JavaScript e, sim, a maioria das estruturas de JavaScript tenta melhorar a compabilidade do navegador, deixe-me esclarecer o que quero dizer.

As diferenças entre as implementações de JavaScript entre diferentes navegadores não têm muito a ver com o próprio idioma nos dias de hoje. Além de alguns métodos internos ausentes em navegadores mais antigos, os tipos também se comportam da mesma forma. Mas ainda existem diferenças, especialmente entre o atual status quo (Chrome/Firefox/Safari) e as versões herdadas de MSIE (ou seja, MSIE 7). Mais notavelmente, o DOM tende a ter peculiaridades sutis menos ou mais sutis à sua API.

Não quero apenas uma estrutura que me permita escrever JavaScript que funcione na maioria dos navegadores. Esses são um centavo a uma dúzia. Eu quero uma camada fina que me permita escrever código que funcione em navegadores modernos e navegadores herdados. JQuery, dojo, etc, vão além disso e fornecem suas próprias APIs únicas em vez de unificar as existentes.

Dizer "Use JQuery" é como dizer que eu deveria usar Rich Ajax Platform (ou outras estruturas de geração de código) Se eu quiser evitar diferenças de renderização entre navegadores. Eu não quero um "substituto", eu quero um "bugfix" (não literalmente).

Edit2: Só para dirigir o ponto para casa: não estou procurando nenhuma estrutura. Estou profundamente familiarizado com o jQuery, tentei Yui e atualmente estou pensando em experimentar Dojo. Eu simplesmente não quero uma estrutura "boa". Eu quero um que se encaixe na minha descrição muito específica. Tudo bem se não houver nada parecido, embora seja interessante saber por que não (por exemplo, razões técnicas, não "todo mundo está muito ocupado usando jQuery").

Foi útil?

Solução

Há muito tempo que se passou desde que essa pergunta foi feita, mas talvez seja útil para alguém: recentemente, um grupo de desenvolvedores do Financial Times criou uma espécie de poli -preenchimento universal que apenas remete as partes necessárias para diferentes navegadores. http://cdn.polyfill.io/v1/docs/

Outras dicas

Se você é tão minimalista em seu pensamento quanto sua postagem sugere, pode tentar compilar sua própria micro-biblioteca que fornece funcionalidade de navegador cruzado para algumas das divergências mais irritantes, como AddEventListener vs. AnextEvent, gettagsbyclassName vs. sem método, Rolando disparidades, dimensões da janela etc. A maioria das disparidades JavaScript são realmente disparidades nos métodos DOM de qualquer maneira, e a lista, embora longa, não precisa ser compilada de uma só vez. Adicione suas próprias funções de navegador cruzado à medida que elas aparecem na sua codificação.

Além disso, use jQuery.

Todas as bibliotecas JavaScript tentam "nivelar o campo de jogo", permitindo que você escreva código JavaScript compatível com navegador limpo.

Alguns dos mais populares:

Protótipo

Mootools

Scriptaculous

jQuery (Meu favorito pessoal)

Não há chance de alcançar exatamente o que você deseja. O IE não expõe os protótipos dos nós DOM, então você não tem como estendê -los sem fazê -lo para cada nó individual. Além disso, geralmente é (talvez sempre?) Não é possível substituir as propriedades somente leitura existentes de objetos host, como os nós DOM no IE, para que você não possa corrigir as propriedades DOM implementadas incorretamente nos nós próprios DOM. Mesmo se você apenas consertar os métodos DOM, ainda precisará chamar uma função para fazer isso toda vez que se apossar de uma nova referência de nós:

var el = someNode.nextSibling;
fixUp(el); // Adds missing methods to the element and fixes broken ones
var matchingEls = el.getElementsByClassName("someclass");

Para uma explicação muito boa e detalhada de por que o que você quer é impossível, eu recomendo ter uma leitura sobre isso: http://perfectionkills.com/whats-wrong-with-extend-the-dom/

Não acredito que haja uma estrutura simples "fazer os navegadores se comportar corretamente" - todos eles vão graus bastante significativos além disso.

Dito isto, não há valor em reinventar a roda, por isso pode ser aconselhável investir o tempo em algo como jQuery (talvez usando uma construção mínima personalizada) etc., ao mesmo tempo em que garantem que haja fallbacks sensatos para usuários com JavaScript desativado.

Ao escrever JavaScript "padrão", tendem a definir minhas próprias funções que fornecem implementações de navegador cruzado de recursos comumente usados. addEvent e removeEvent (Existem várias implementações) são exemplos comuns dessa técnica. Eu pesquisei e escrevi várias funções que me permitem chamar uma função para um problema específico, em vez de detectar e executar o código correto a cada passo.

Coisas como obter altura, largura e compensação de um elemento requerem implementações diferentes para diferentes navegadores, mas podem ser facilmente gravadas em uma função e reutilizadas onde você precisar.

Portanto, minha "solução" é em grande parte uma solução de bricolage. Crie um arquivo chamado "utilitários.js" e comece a adicionar funções conforme necessário. addEvent, removeEvent, e um navegador cruzado XMLHttpRequest são um bom lugar para começar. Aqui, vou começar você:

function createXHR()
{
    var xhr;
    if (window.ActiveXObject)
    {
        try
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e)
        {
            alert(e.message);
            xhr = null;
        }
    }
    else
    {
        xhr = new XMLHttpRequest();
    }

    return xhr;
}

Essa função retornará um objeto xmlHttPrequest para uso, como você vê o ajuste. Apreciar.

Editar: Observe que essa abordagem poderia teoricamente agrupar seu espaço para nome. Você pode ser melhor criar um utilities objeto, e chamando utilities.createXHR.

Se eu te entendi corretamente, http://flowjs.com/ Deve estar bem perto do que você está procurando. É o principal objetivo: "FlowJs implementa a API de nível 3 DOM em todos os navegadores modernos"

Você tem isso com jQuery. O uso do jQuery oferece a capacidade de consultar o DOM com a consistência que falta nas diferentes implementações do Browswer. Eu diria isso e o Ajax liga para o maior conjunto de questões com as quais as pessoas lidam no JavaScript hoje em dia.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top