向现有对象添加方法

Question

这是一年多以前我提出的一个问题的演变： 如何在jquery / javascript中使用循环创建方法

我有一个与其他同事共享的代码，因此如果更改不多则更好。 它是这样的：

var scriptList = {
    components : [
        'all'
    ],
    modules : [
        'one',
        'two',
        'three'
    ]
}

function core() {
    var scope = this;

    var promises = [];
    jQuery.each(scriptList, function(key, value) {
        jQuery.each(value, function (index, name) {

            var hookValue = 'hook_'+name,
                stringValue = 'string_'+name,
                argsValue = 'args_'+name;

            scope[name] = function(callback){
                window[hookValue] = jQuery('.js-'+name),
                window[stringValue] = 'js-'+name;
                window[argsValue] = arguments;

                loadAndUse(window[hookValue],key+'/'+name,callback);
            }

            if(key === 'modules'){
                scope[name]();
            }
        });
    });

    jQuery.when.apply(jQuery, promises).then(function() {
        window.executeReady = true;
    });
}

ui = new core();

ui.exec = methodLoader;
ui.exec();

这段代码可以正常工作，因为我可以使用ui.one - ui.two等添加的各种方法，并且如果我执行console.log(ui)也可以在控制台中登录。

在此代码被解雇之前，我现在在HTML页面中还有另一个代码块，它们创建了一个称为exec的方法（始终是ui对象）：

window.executeReady = false;

var ui = {},
    scriptToBeLoaded = [];

var methodLoader = function(){
    var scope = this;

    this.exec = function(module, callback){
        scriptToBeLoaded.push({
            'module'    : module,
            'callback'  : callback
        });

        if(module === undefined){
            console.warn('This module does not exists. Please check the scriptList.');
        } else {
            function waitForList($context, $variable, $callback) {
                if ($context[$variable]) {
                    $callback();
                } else {
                    Object.defineProperty($context, $variable, {
                        configurable: true,
                        enumerable: true,
                        writeable: true,
                        get: function() {
                            return this['_' + $variable];
                        },
                        set: function(val) {
                            this['_' + $variable] = val;
                            $callback();
                        }
                    });
                }
            }

            waitForList(window, 'executeReady', function(){
                for (var i = 0; i < scriptToBeLoaded.length; i++) {
                    ui[scriptToBeLoaded[i].module](scriptToBeLoaded[i].callback);
                }

                scriptToBeLoaded = [];
            });
        }
    };
};

ui = new methodLoader();

由于这段代码，当我console.log(ui); 我看到只有exec方法，其他所有方法都消失了。 虽然，我在core()函数中创建的方法可以正确执行，但ui对象中不存在。

我想编辑HTML页面中的代码，以使ui对象内部都带有exec （在html端创建）的ui对象和其他方法（在js文件中创建）。

我该如何实现？

Answer 1

您可以像这样向现有对象添加新方法。 或者，您可以使用jQuery.extend（）合并两个对象。

var ui = ui || {},
scriptToBeLoaded = [];

ui.exec = function(module, callback){
        scriptToBeLoaded.push({
            'module'    : module,
            'callback'  : callback
        });

        if(module === undefined){
            console.warn('This module does not exists. Please check the scriptList.');
        } else {
            function waitForList($context, $variable, $callback) {
                if ($context[$variable]) {
                    $callback();
                } else {
                    Object.defineProperty($context, $variable, {
                        configurable: true,
                        enumerable: true,
                        writeable: true,
                        get: function() {
                            return this['_' + $variable];
                        },
                        set: function(val) {
                            this['_' + $variable] = val;
                            $callback();
                        }
                    });
                }
            }

            waitForList(window, 'executeReady', function(){
                for (var i = 0; i < scriptToBeLoaded.length; i++) {
                    ui[scriptToBeLoaded[i].module](scriptToBeLoaded[i].callback);
                }

                scriptToBeLoaded = [];
            });
        }
    };