向現有對象添加方法

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 = [];
            });
        }
    };