如何编写灵活通用的javascript模块或插件

时间:2014-09-22 10:05:54

标签: javascript jquery

我想编写一个javascript / jquery插件,以便它足够通用,可以在任何框架中使用,例如angularjs,backbonejs,ember等。我应该足够通用,以便它应该使用指令,如果它与angular一起使用与骨干一起使用时的骨干本机功能。有可能,如果是,那么有人可以指导我如何?

1 个答案:

答案 0 :(得分:0)

我能想到的最自然的方式就是用香草JS写它。这将使其在每个框架中都能运行而无需担心它。

如果您想继续这条路线,我会使用驱动程序式实现,您可以将所有内容传递给特定框架的特定驱动程序。您可以为每个驱动程序定义所需的每种方法,然后将呼叫自动转发到正确的驱动程序。

var myPlugin;

(function() {
   myPlugin = function(framework) {
        var me = {},
            framework = framework || 'angular';

        me.frameworks = {
            angular: new AngularDriver,
            backbone: new BackboneDriver,
            ember: new EmberDriver
        };

        // Call a method framework-agnostically
        me.fire = function(method, args) {
            if (!me.frameworks.hasOwnProperty(framework)) {
                console.log('Error: Framework not recognised.');
                return;
            }

            if (!me.frameworks[framework].hasOwnProperty(method)) {
                console.log('Error: Method not found in ' + framework + '.');
                return;
            }

            me.frameworks[framework][method].apply(this, args);
        }

        return me;
    }

    function AngularDriver() {
        var me = {};

        me.test = function() {
            console.log('Hello from the Angular Driver');
        }

        return me;
    }

    function BackboneDriver() {
        var me = {};

        me.test = function() {
            console.log('Hello from the Backbone Driver');
        }

        return me;
    }

    function EmberDriver() {
        var me = {};

        me.test = function(arg) {
            console.log('Hello from the ' + arg + ' Ember Driver');
        }

        return me;
    }
})();

var instance = new myPlugin();
instance.fire('test');
instance = new myPlugin('ember');
instance.fire('test', ['best']);

完全有可能实现myPlugin.fire函数的方式稍微清晰,如果其他人可以改进那一点,那么instance.fire('test', ['best'])的语法会更清晰一点,随意: - )