javascript - jQuery 和 Mootools 的不可知 Javascript 框架适配器？

Question

我正准备将我的一系列 jQuery 项目移植到 Vanilla Javascript(纯 javascript，无框架)并且想知道是否有任何现有的[框架适配器/框架不可知适配器]？

例如，我正在设想这样的事情:

// My Project
(function(){
    // Fetch all the elements using Sizzle Selector System
    var $els = Agnostic.find('.penguins');
    $els.hide();

    // Perform a Ajax Request
    Agnostic.ajax({
        dataType: 'json',
        sucess: function(){

        },
        error: function(){

        }
    });
});

/**
 * Our Agnostic Framework
 * Provides a framework agnostic interface for jQuery and MooTools
 */
var Agnostic = {
    framework: null,
    Framework: null,

    /**
     * Initialise our Agnostic Framework
     */
    init: function(){
        switch ( true ) {
            case Boolean(jQuery||false):
                Agnostic.Framework = jQuery;
                Agnostic.framework = 'jQuery';
                break;

            case Boolean(MooTools||false):
                // Check for Sizzle
                if ( typeof Sizzle === 'undefined' ) {
                    throw new Error('MooTools interface requires the Sizzle Selector Engine.');
                }
                Agnostic.Framework = MooTools;
                Agnostic.framework = 'MooTools';
                break;

            default:
                throw new Error('Could not detect a framework.');
                break;
        }
    }

    /**
     * Our Element Object
     * Used to Wrap the Framework's Object to provide an Agnostic API
     */
    Element: {
        /**
         * Create the Element Wrapper
         */
        create: function(Object){
            var El = new Agnostic.Element;
            El.Object = Object;
        },

        /**
         * Hide the Element
         */
        hide: function(){
            switch ( Agnostic.framework ) {
                case 'jQuery':
                    this.Object.hide();
                    break;

                case 'MooTools':
                    this.Object.setStyle('display','none'); 
                    break;
            }
        },

        /**
         * Show the Element
         */
        show: function(){
            switch ( Agnostic.framework ) {
                case 'jQuery':
                    this.Object.show();
                    break;

                case 'MooTools':
                    this.Object.setStyle('display',''); 
                    break;
            }
        }
    },

    /**
     * Fetch elements from the DOM using the Sizzle Selector Engine
     */
    find: function(selector){
        var Element = null;

        // Fetch
        switch ( Agnostic.framework ) {
            case 'jQuery':
                Element = jQuery(selector);
                break;

            case 'MooTools':
                Element = new Elements(new Sizzle(selector)); 
                break;
        }

        // Wrap
        Element = Agnostic.Element.create(Element);

        // Return Element
        return Element;
    },

    /**
     * Perform an Ajax Request
     * We use the jQuery.ajax interface here
     * But they are more or less the same
     */
    ajax: function(request){
        // Send Request
        switch ( Agnostic.framework ) {
            case 'jQuery':
                jQuery.ajax(request);
                break;

            case 'MooTools':
                (new Request(request)).send();
                break;
        }

        // Wrap
        Element = Agnostic.Element.create(Element);

        // Return Element
        return Element;
    }
};

Answer 1

我还没有看到预先打包的“框架桥”。 Nicholas C. Zakas 对从您的应用程序中抽象出框架有一个很好的讨论。关于将框架与应用程序分离的重要性，这非常好而且深入。

http://developer.yahoo.com/yui/theater/video.php?v=zakas-architecture