Vedoucí projektu Dojo Toolkit Peter Higgins pracuje na novém vzrušujícím projektu s názvem has.js. Higgins popisuje tento projekt nejlépe:
Jednoduše řečeno, has.js testuje prostředí prohlížeče, aby zjistil, zda prohlížeč podporuje nějakou danou funkci. has.js zahrnuje rostoucí počet testů v mnoha kategoriích, včetně:
- Funkce EcmaScript 5 (Object.freeze, Array.map atd.)
- Funkce CSS (rgba, poloměr okraje atd.)
- HTML5 a pokročilá rozhraní JavaScript API (classList, zástupný atribut atd.)
- Funkce načítání skriptů (odložit, asynchronně)
- Nativní podpora JSON, zvuku a videa
- Podpora XHR
- ...a další!
Pojďme prozkoumat, jak používat has.js, jeho modulární kolekce testů a vytvářet vlastní testy detekce funkcí.
Použití has.js
has.js používá globální funkci has, které předáte řetězec k testování. Pokud bychom chtěli otestovat přítomnost nativně podporované metody Array.forEach, zakódovali bychom:
// If Array.forEach is not present...
if(!has("array-foreach")) {
// ... create it!
Array.prototype.forEach = function() {
// ....
};
}
Řetězec předaný funkci has představuje klíč testu, jak byl definován při vytvoření testu. Jak vypadá skutečná tvorba testu? Pojďme si jeden zopakovat!
Vytvoření testu has.js
Kód za testem Array.forEach je krátký a sladký:
(function(has, addtest, cssprop){
var toString = {}.toString,
EMPTY_ARRAY = [],
FUNCTION_CLASS = "[object Function]";
addtest("array-foreach", function(global, document, anElement){
return toString.call(EMPTY_ARRAY.forEach) == FUNCTION_CLASS;
});
})(has, has.add, has.cssprop);
has.js také poskytuje kontrolu pole ES5, která zahrnuje další testy has:
(function(has, addtest, cssprop){
addtest("array-es5", function(){
return has("array-every") && has("array-filter") && has("array-foreach") &&
has("array-indexof") && has("array-isarray") && has("array-lastindexof") &&
has("array-map") && has("array-reduce") && has("array-reduceright") &&
has("array-some");
});
})(has, has.add, has.cssprop);
Dost jednoduché na vytvoření testů, že? Pojďme vytvořit několik vlastních!
Vytvoření vlastního testu has.js
Jak jste si snad všimli v testech výše, samotný test je ve skutečnosti funkcí, která vrací true, pokud prohlížeč danou funkci podporuje, nebo false, pokud prohlížeč nepodporuje. Vytvořme test, který nám řekne, zda prohlížeč podporuje RGBA.
addtest("css-rgba", function(g, d, el){
var re = /^rgba/,
supported = null;
if(has("css-enabled")){
try{
el.style.color = "rgba(1,1,1,0.5)";
supported = re.test(el.style.color);
el.style.color = "";
}catch(e){}
}
return supported;
});
Test může také vrátit null pokud test nelze použít pro aktuální prohlížeč. Například prohlížeče jiné než IE vrátí pro ActiveX hodnotu null, protože ActiveX je technologie pouze společnosti Microsoft.
Vytváření modulů has.js specifických pro váš projekt může být nejlepší volbou, pokud vaše webová aplikace vyžaduje mnoho různých funkcí. Tyto abstrakce vám mohou umožnit rychlejší kódování aplikace.
has.js roste!
has.js je stále v plenkách, ale tento nástroj má zjevně světlou budoucnost. Krása has.js spočívá v tom, že jeho funkčnost je extrémně užitečná, ale samotné testy se vytvářejí velmi jednoduše. Pokud máte nápady na další testy nebo jednoduše vylepšení has.js, můžete projekt rozvětvit a odeslat žádosti o stažení do hlavního úložiště.