试图将modenizr代码转换为jquery

时间:2013-11-19 18:23:22

标签: javascript jquery

我正在尝试理解这个modenizr代码正在做什么,所以我可以简化它并将其转换为jquery调用我的click事件。

这是当前的modenizr代码:

(function(window, document, undefined) {

var transformProp = window.Modernizr.prefixed('transform'),
    transitionProp = window.Modernizr.prefixed('transition'),
    transitionEnd = (function() {
        var props = {
            'WebkitTransition' : 'webkitTransitionEnd',
            'MozTransition'    : 'transitionend',
            'OTransition'      : 'oTransitionEnd otransitionend',
            'msTransition'     : 'MSTransitionEnd',
            'transition'       : 'transitionend'
        };
        return props.hasOwnProperty(transitionProp) ? props[transitionProp] : false;
    })(),

    hasTT = transitionEnd && transitionProp && transitionProp;

var log = function(obj)
{
    if (typeof window.console === 'object' && typeof window.console.log === 'function') {
        window.console.log(obj);
    }
};

window.App = (function()
{

    var _init = false, app = { };

    app.init = function()
    {
        if (_init) {
            return;
        }
        _init = true;

        app.win    = $(window);
        app.docEl  = $(document.documentElement);
        app.bodyEl = $(document.body);

        app.docEl.addClass('js-ready js-' + (hasTT ? 'advanced' : 'basic'));

        var menuLinkEl = $('#menu-link'),
            menuEl = $('#menu'),
            wrapEl = $('#wrap');

        var closeMenu =function()
        {
            if (hasTT) {
                menuEl.one(transitionEnd, function(e) {
                    app.docEl.removeClass('js-offcanvas');
                });
            } else {
                app.docEl.removeClass('js-offcanvas');
            }
            app.docEl.removeClass('js-menu');
        };

        var openMenu = function()
        {
            app.docEl.addClass('js-offcanvas js-menu');
        };

        menuLinkEl.on('click', function(e)
        {
            if (app.docEl.hasClass('js-menu')) {
                closeMenu();
            } else {
                openMenu();
            }
            e.preventDefault();
        });



    };

    return app;

})();


})(window, window.document);

我尝试转换除转换之外的所有内容(hasTT)我的转换是否有效以及如何转换hasTT调用?

我的尝试:

var appWin    = $(window);
var appDocEl  = $(document.documentElement);

appDocEl.addClass('js-ready js-' + (hasTT ? 'advanced' : 'basic'));

var menuLinkEl = $('#menu-link'),
    menuEl = $('#menu'),
    wrapEl = $('#wrap');

var closeMenu =function() 
{
    /* how do I determine hasTT ? */
    if (hasTT) {
        menuEl.one(transitionEnd, function(e) {
            appDocEl.removeClass('js-offcanvas');
        });
    } else {
        appDocEl.removeClass('js-offcanvas');
    }
    appDocEl.removeClass('js-menu');
};

var openMenu = function(){
    appDocEl.addClass('js-offcanvas js-menu');
};

menuLinkEl.on('click', function(e){
    if (appDocEl.hasClass('js-menu')) {
        closeMenu();
    } 
    else {
        openMenu();
    }
    e.preventDefault();
});

我目前正在加载它:

$(document).ready(function() {

    loadMain();
});

function loadMain() {

        Modernizr.load([
            {
             load: [
                    'http://localhost/js/main.js'
                ],
                complete: function()
                {
                    window.App.init();
                }
            }
        ]);
    }

0 个答案:

没有答案