모더니셔 테스트

Question

이 경고는 어떻게 발생합니까?

Modernizr.load([ 
    { 
     test: Modernizr.cssgradients, 
     yep: alert('Supports it!'), 
     nope: alert('Oh, damn! This browser sucks!') 
    } 
]); 

나는 OS X의에 최신 크롬을 사용하고

Answer 1

직접이 alert()를 호출하고 있기 때문에, 그리고 alert() (항상 undefined)의 결과는 yep 및 nope 속성에 할당됩니다. 당신은 기능에 alert() 포장 대신 그 기능을 지정해야합니다

Modernizr.load([ 
    { 
     test: Modernizr.cssgradients, 
     yep: function() { alert('Supports it!') }, 
     nope: function() { alert('Oh, damn! This browser sucks!') } 
    } 
]); 

가 어떻게 yepnope이 작품 아니기 때문에이 여전히이 작동하지 않습니다. 방금 모더 나이저 전통적인 방법을 사용할 수

Modernizr.load([ 
    { 
     test: Modernizr.cssgradients, 
     nope: 'cssgradients-shim.js' //-> load a JS file to draw your gradients 
    } 
]); 

자신을 발견, 당신은 통합 yepnope.js을 사용하지 않으려는 경우 : yep 및 nope는로드 JS 파일에 대한 경로해야한다 :

if (!Modernizr.cssgradients) { 
    alert('Oh, damn! This browser sucks!'); 
} 

Answer 2

yep 및 nope 매개 변수를 인수로 기능을 허용하지 않습니다. test의 성공 여부에 따라로드 할 스크립트를 나타내는 string 또는 array of strings이어야합니다. 자세한 내용은 Modernizr.load의 설명서를 참조하십시오.

Answer 3

yepnope 접두사를 사용하면 사전 정의 된 명명 된 기능을 실행할 수 있습니다. 참고 : OS X의 최신 크롬으로 만 테스트했습니다.

그러나이 기능을 사용하려면 페이지에로드하려는 이미지와 같은 "더미 URL"이 필요합니다 (로고는 좋은 후보자).

또한 Modernizr.load은 yepnope.apply 메서드의 별칭이므로 yepnope을 참조하여 접두사를 추가해야합니다. 물론

/*globals window */ 
(function (Modernizr) { 
    "use strict"; 
    window.yepnope.addPrefix('function', function (resourceObj) { 
     var dummyUrl = 'static/my_logo.png'; 
     resourceObj.noexec = true; 
     window[resourceObj.url](); 
     resourceObj.url = dummyUrl; 
     return resourceObj; 
    }); 
    // predefined functions 
    window.alert_support = function() { 
     window.alert('Supports it!'); 
    }; 
    window.alert_damn = function() { 
     window.alert('Oh, damn! This browser sucks!'); 
    }; 
    window.alert_boom = function() { 
     window.alert('boom'); 
    }; 
    // Modernizer.load is an alias for yepnope. See API at http://yepnopejs.com/. 
    Modernizr.load([{ 
     test: Modernizr.cssgradients, 
     yep: 'function!alert_support', 
     nope: 'function!alert_damn' 
    }, { 
     test: Modernizr.rgba, 
     yep: 'function!alert_boom' 
    }]); 
}(window.Modernizr)); 

, 전역 window 네임 스페이스를 오염하지 않으려면, 당신은 객체에 이름이 지정된 함수를 넣어 window.MyObj[resourceObj.url]();에 window[resourceObj.url]();을 변경할 수 있습니다.

이것의 진정한 힘은 callback입니다. 이름이 지정된 함수는 Modernizr.load을 호출 할 수 있으며 여기에 표시된 일반 함수 실행기보다 더 목적이 많은 접두사를 쓸 수 있습니다.