Javascript 函数中的相同函数，保留变量/元素

我正在创建一个javascript函数，它创建一个模态。下面是函数：

    function createModal(options) {
        var self = this;
        modalHeaderText = options.header;
        modalBodyText = options.body;
        $modal = $('<div />').addClass('modal').appendTo('body');
        $modalOverlay = $('<div />').addClass('modal-overlay').appendTo($modal);
        $modalContainer = $('<div />').addClass('modal-container').appendTo($modal);
        $modalHeader = $('<div />').addClass('modal-header').addClass(options.headerClass).html(modalHeaderText).appendTo($modalContainer);
        $modalBody = $('<div />').addClass('modal-body').addClass(options.bodyClass).html(modalBodyText).appendTo($modalContainer);
        if (options.buttons) {
            $modalFooter = $('<div />').addClass('modal-footer').appendTo($modalContainer);
            $.each(options.buttons, function(name, buttonOptions) {
                $modalButton = $('<button />').addClass(buttonOptions.class).html(name).appendTo($modalFooter);
                if(buttonOptions.callback) {
                    $modalButton.on('click', function() { 
                        buttonOptions.callback(); 
                    });
                } else {
                    $modalButton.on('click', function(e) { 
                        $modal.remove();
                    });
                };
            });
        };
        $modal.addClass('active');
        if (options.closeOnOverlayClick == true) {
            $modalOverlay.on('click', function(e) {
                $modal.remove();
            });
        };
    };

---

如果我将“var”添加到所有元素中，$modalBody将不会被定义。

因此，除了上面关于不声明

var

的注释外，您还在自变量中存储对

窗口的引用。为了避免这一切，我沿着这条路走下去

快速解释


首先，不要将
此
分配给
自身
，因为
此
是窗口
其次，将所有内容分配给空的
self
对象以及本地变量（以提高可读性）
第三，将
self
var传递回任何按钮回调，以便访问可能需要的模式的任何部分

为子孙后代，包括此处更新的功能：

函数createModal（选项）{
var self={}；
var modalHeaderText=options.header；
var modalBodyText=options.body；
var$modal=self.$modal=$（''）.addClass（'modal'）.appendTo（'body'）；
var$modalOverlay=self.$modalOverlay=$（''）.addClass（'modal-overlay'）.appendTo（$modal）；
变量$modalContainer=self.$modalContainer=$（''）.addClass（'modal-container'）.appendTo（self.$modal）；
self.$modalHeader=$（''）.addClass（'modal-header'）.addClass（options.headerClass）.html（modalHeaderText）.appendTo（$modalContainer）；
self.$modalBody=$（''）.addClass（'modal-body'）.addClass（options.bodyClass）.html（modalBodyText）.appendTo（$modalContainer）；
如果（选项.按钮）{
var$modalFooter=self.$modalFooter=$（''）.addClass（'modal-footer'）.appendTo（$modalContainer）；
$.each（选项.按钮，函数（名称，按钮选项）{
var$modalButton=$（''）.addClass（buttonOptions.class）.html（name）.appendTo（$modalFooter）；
if（buttonOptions.callback）{
$modalButton.on（'click'，function（）{
按钮选项。回调（self）；
});
}否则{
$modalButton.on（'click'，函数（e）{
$modal.remove（）；
});
};
});
};
$modal.addClass（'active'）；
如果（options.closeOnOverlayClick==true）{
$modalOverlay.on（'click'，函数（e）{
$modal.remove（）；
});
};
};
$（'#model'）。在（'click'，函数（e）上{
e、 预防默认值（）；
CreateModel({
标题：“输入您的姓名”，
正文：“”，
按钮：{
“好的”：{
类：“btn btn成功”，
回调：函数（模态）{
var name=modal.$modalBody.find（'.name'）.val（）；
如果（！name）{
CreateModel({
标题：“错误”，
正文：“您必须提供一个名称”，
按钮：{
“好的”：{
类别：“btn”
}
}
});
}否则{
警报（名称）；
};
},
},
“关闭”：{
类：“btn btn错误”
}
}
});
});
因此，除了上面关于不声明
var
的注释外，您还在自变量中存储对
窗口的引用。为了避免这一切，我沿着这条路走下去

快速解释


首先，不要将
此
分配给
自身
，因为
此
是窗口
其次，将所有内容分配给空的
self
对象以及本地变量（以提高可读性）
第三，将
self
var传递回任何按钮回调，以便访问可能需要的模式的任何部分

为子孙后代，包括此处更新的功能：

函数createModal（选项）{
var self={}；
var modalHeaderText=options.header；
var modalBodyText=options.body；
var$modal=self.$modal=$（''）.addClass（'modal'）.appendTo（'body'）；
var$modalOverlay=self.$modalOverlay=$（''）.addClass（'modal-overlay'）.appendTo（$modal）；
变量$modalContainer=self.$modalContainer=$（''）.addClass（'modal-container'）.appendTo（self.$modal）；
self.$modalHeader=$（''）.addClass（'modal-header'）.addClass（options.headerClass）.html（modalHeaderText）.appendTo（$modalContainer）；
self.$modalBody=$（''）.addClass（'modal-body'）.addClass（options.bodyClass）.html（modalBodyText）.appendTo（$modalContainer）；
如果（选项.按钮）{
var$modalFooter=self.$modalFooter=$（''）.addClass（'modal-footer'）.appendTo（$modalContainer）；
$.each（选项.按钮，函数（名称，按钮选项）{
var$modalButton=$（''）.addClass（buttonOptions.class）.html（name）.appendTo（$modalFooter）；
if（buttonOptions.callback）{
$modalButton.on（'click'，function（）{
按钮选项。回调（self）；
});
}否则{
$modalButton.on（'click'，函数（e）{
$modal.remove（）；
});
};
});
};
$modal.addClass（'active'）；
如果（options.closeOnOverlayClick==true）{
$modalOverlay.on（'click'，函数（e）{
$modal.remove（）；
});
};
};
$（'#model'）。在（'click'，函数（e）上{
e、 预防默认值（）；
CreateModel({
标题：“输入您的姓名”，
正文：“”，
按钮：{
“好的”：{
类：“btn btn成功”，
回调：函数（模态）{
var name=modal.$modalBody.find（'.name'）.val（）；
如果（！name）{
CreateModel({
标题：“错误”，
正文：“您必须提供一个名称”，
按钮：{
“好的”：{
类别：“btn”
}
}
});
}否则{
警报（名称）；
};
},
},
“关闭”：{
类：“btn btn错误”
}
}
});
});
只是不在
$modal
变量前面使用
var
，导致它存储在窗口范围内。当下一个$modal关闭时，变量引用的是已删除的元素，因此在第一个modal的
关闭
按钮单击时不会发生任何事情。
只是不在
$modal
变量ca前面使用
var
    $('#modal').on('click', function(e){
        e.preventDefault();
        createModal({
            header      : 'Enter your name',
            body        : '<input type="text" class="name" />',
            buttons     : {
                'OK'    : {
                    class : 'btn btn-success',
                    callback : function() {
                        var name = self.$modalBody.find('.name').val();
                        if (!name) {
                            createModal({
                                header      : 'Error',
                                body        : 'You must provide a name',
                                buttons     : {
                                    'OK'    : {
                                        class : 'btn'
                                    }
                                }
                            });
                        } else {
                            alert(name);
                        };
                    },
                },
                'Close' : {
                    class : 'btn btn-error'
                }
            }
        });
    });

    function createModal(options) {
        var self = this;
        var modalHeaderText = options.header;
        var modalBodyText = options.body;
        var $modal = $('<div />').addClass('modal').appendTo('body');
        var $modalOverlay = $('<div />').addClass('modal-overlay').appendTo($modal);
        var $modalContainer = $('<div />').addClass('modal-container').appendTo($modal);
        var $modalHeader = $('<div />').addClass('modal-header').addClass(options.headerClass).html(modalHeaderText).appendTo($modalContainer);
        var $modalBody = $('<div />').addClass('modal-body').addClass(options.bodyClass).html(modalBodyText).appendTo($modalContainer);
        if (options.buttons) {
            var $modalFooter = $('<div />').addClass('modal-footer').appendTo($modalContainer);
            $.each(options.buttons, function(name, buttonOptions) {
                var $modalButton = $('<button />').addClass(buttonOptions.class).html(name).appendTo($modalFooter);
                if(buttonOptions.callback) {
                    $modalButton.on('click', function() { 
                        buttonOptions.callback(); 
                    });
                } else {
                    $modalButton.on('click', function(e) { 
                        $modal.remove();
                    });
                };
            });
        };
        $modal.addClass('active');
        if (options.closeOnOverlayClick == true) {
            $modalOverlay.on('click', function(e) {
                $modal.remove();
            });
        };
    };

var name = self.$modalBody.find('.name').val();