Um exemplo típico de yepnope.js :
yepnope ({test: modernizr.geolocation, sim: 'normal.js', não: ['polyfill.js', 'wrapper.js']});Este exemplo significa que, se o Modernizr.geolocation for verdadeiro, o Normal.js será carregado, Polyfill.js e Wrapper.js serão carregados.
Yepnope Sintaxe completa :
yepnope ([{test: /* boolean (ish) insira a condição* /, sim: /* array (de strings) | string - recursos carregados quando a condição é verdadeira* /, não: /* array (de strings) | string - Recursos carregados quando a condição é falsa* /, /* matriz (de strings) | String - carregados - carregados quando a condição é falsa* /, /* prata (de scrings) | carregados - carregados quando a condição é falsa. carregado quando a condição é verdadeira e falsa*/, retorno de chamada:/*função (testResult, chave) |Por que usar yepnope :
Apenas 1,6k após o GZIP é menor que a maioria dos carregadores de recursos
Pode carregar CSS e JS
Yepnope passa testes para todos os navegadores que o autor pode encontrar
Yepnope separa completamente o carregamento e a execução de recursos, para que você possa controlar a ordem da execução de recursos
Fornece uma combinação lógica de APIs amigáveis e facilita recursos
Design modular, você pode expandir suas próprias funções (consulte Prefixos e filtros mais tarde)
Incentivar o carregamento sob demanda de recursos
Integrado no modernizr
Por padrão, ele é sempre executado na lista de recursos da Ordem da Lista de Recursos (a Lista de Arquivos Ordem que você fornece)
Ele pode lidar com fallbacks de recursos e ainda prioriza o download de scripts dependentes em paralelo. É mais fácil de entender depois de ler o código:
yepnope ([{load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', complete: function () {if (! window.jquery) {yepnope ('local/jQuery.mins'; 'jQuery.plugin.js', completo: function () {jQuery (function () {jQuery ('div') .plugin ();});Outros carregadores podem ter que lidar com isso:
SOMELOADER ('http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', function () {if (! window.jQuery) {someloader ('local/jQuery.min.js', 'jQuery.plery.plery.plery.plery.plery.plery.plery.plery.plery.plery.plery.plery.plery.plery.plery.plery.plery.ply.Per. O Yepnope falha ao carregar, você só precisa recarregar o recurso de backup, que não afetará a execução de outros arquivos que dependem desse recurso*/} else {Someloader ('jQuery.plugin.js');Deficiências de Yepnope
Nem sempre o mais rápido, como labjs, etc., pode carregar mais rápido que o Yepnope após a otimização, mas você precisa considerar qual carregador usar de acordo com sua situação real.
Você precisa definir determinados cabeçalhos de cache para o recurso (isso é muito importante)
Diferentemente do requerimento e outras bibliotecas de classes que possuem suas próprias ferramentas de geração e APIs ricas, o Yepnope implementa apenas a função básica do carregador.
Por padrão, é sempre executado na ordem da lista de recursos que você fornece, o que pode afetar a velocidade
Exemplo de uso de Yepnope :
Passando em uma corda diretamente
yepnope ('/url/to/your/script.js');Passar em um objeto
yepnope ({load: '/url/to/your/script.js'});Instância da função de retorno de chamada (URL na função de retorno de chamada representa o nome do arquivo de recurso carregado; o resultado representa o resultado do parâmetro de teste; a chave representa a abreviação do nome do arquivo ao usar o mapeamento da chave)
yepnope ({test: window.json, load: '/url/to/your/script.js', retorno de chamada: function (url, resultado, key) {// sempre que isso é executado, seu script acaba de executar. alert ('script.js carregar!');Exemplo de função completa
yepnope ({test: window.json, não: 'json2.js', complete: function () {var data = window.json.parse ('{"json": "string"}');}});Instância de mapeamento de chaves
yepnope( { test : Modernizr.geolocation, yep : { 'rstyles' : 'regular-styles.css' }, nope : { 'mstyles' : 'modified-styles.css', 'geopoly' : 'geolocation-polyfill.js' }, callback : function ( url, result, key ) { if ( key === 'geopoly' ) { alert( 'Este é o geolocalização de poli -alfândega!'Claro que você também pode escrever a função de retorno de chamada como esta:
yepnope ({teste: modernizr.geolocation, sim: {'rstyles': 'syles.css'}, não: {'mstyles': 'modificado-styles.css', 'geopoly': 'geolocation-polyfill.js'}, callback: {' estilos! '3 prefixos fornecidos por yepnope
CSS! Prefixo: qualquer arquivo com sufixo pode ser carregado como um arquivo CSS
yepnope ('css! mystyles.php? versão = 1532');pré -carga! Prefixo: pré -carregue o recurso no cache, mas não execute (execute -o na próxima vez que o carregar)
yepnope ({load: 'pré -ad!ou seja! Prefixo (s): determine se o navegador do IE (além do IE!, Também suporta IE5, IE6, IE7, IE8, IE9, IEGT5, IEGT6, IEGT7, IEGT8, IELT7, IELT8 e IELT9)
yepnope ({load: ['normal.js', 'ie6! ie7! ie-patch.js'] // ie6 ou ie7 apenas (no patch)});