复杂对象中的javascript自引用
我重构了一些冗余的旧javascript代码。我们的页面使用旧版本的Select2,并在多个地方填充新的Select2下拉/搜索框 我使用了冗余的代码,并用代码构建了一个对象。对象在某些函数中具有自引用 当我使用对象时,我会制作对象的浅拷贝。我担心的是,副本中的自引用可能会指向原始对象的元素,而不是副本的元素 有什么更好的方法来构造此对象,使浅拷贝不指向原始对象 我做了几个小时的研究。由于不知道谷歌到底用了什么词,因此很难对其进行研究。如果这件事很容易解决,请原谅 我确实在复杂对象中的javascript自引用,javascript,javascript-objects,jquery-select2,Javascript,Javascript Objects,Jquery Select2,我重构了一些冗余的旧javascript代码。我们的页面使用旧版本的Select2,并在多个地方填充新的Select2下拉/搜索框 我使用了冗余的代码,并用代码构建了一个对象。对象在某些函数中具有自引用 当我使用对象时,我会制作对象的浅拷贝。我担心的是,副本中的自引用可能会指向原始对象的元素,而不是副本的元素 有什么更好的方法来构造此对象,使浅拷贝不指向原始对象 我做了几个小时的研究。由于不知道谷歌到底用了什么词,因此很难对其进行研究。如果这件事很容易解决,请原谅 我确实在getters和对象中
getters
和对象中的自引用上回顾了MDN。我明白,但我不知道如何使用它
ajax: {
main: function () {
let results = (mainObject.ajax.type.toLowerCase === 'new' ? mainObject.ajax.resultNew : mainObject.ajax.resultPreExisting);
if (typeof (results) != 'function') {
mainObject.error;
}
ajaxObj = {
url: someOutSideVariableForURL,
dataType: "json",
quietMillis: 100,
data: function (c, d) {
return {
searchFor: c,
maxPerPage: 30,
page: d
};
},
results: results
}
return ajaxObj;
},
type: "",
resultNew: function (e, d) {
//new result function
var c = {
results: e.results,
more: false
};
if (d < e.info.totalPages) {
c.more = true;
}
if (c.results.length) {
$("#someIDTag input[name=firstStuff_" + mainObject.idCount + "]").data("hasResults", true);
}
return c;
},
resultPreExisting: function (e, d) {
// Pre existing result function
var c = {
results: e.results,
more: false
};
if (d < e.info.totalPages) {
c.more = true;
}
$("#someIDTag input[name=firstStuff_" + mainObject.idCount + "]").data("hasResults", false);
if (c.results.length) {
$("#someIDTag input[name=firstStuff_" + mainObject.idCount + "]").data("hasResults", true);
}
return c;
}
},
createSearchChoice: function (d) {
var c = {
hasResults: $("#someIDTag input[name=firstStuff_" + mainObject.idCount + "]").data("hasResults"),
results: null
};
if ($.trim(d).length) {
c.results = {
id: 0,
text: d
};
}
return c.results;
},
error: function(){
alert("mainObject improper configuration")
return null
},
formatResult: function (item, container, escapeMarkup) {
var d = {
response: item.text,
markup: []
};
window.Select2.util.markMatch(d.response, escapeMarkup.term, d.markup);
if (item.id == 0) {
d.response += '<br/><i style="font-size:0.8em;"><i class="icon-plus-sign"></i> Add new stuff</i>';
} else {
d.response = d.markup.join("");
}
if (item.data && item.data.businessFunctions.length) {
d.response += '<br /><span style="font-size:0.75em;opacity:0.55;">(' + item.data.businessFunctions + ")</span>";
}
return d.response;
},
formatSearching: function () {
return ' <i class="icon-spinner icon-spin"></i> Searching stuff...';
},
formatSelection: function (item, container) {
$("#someOtherIDTag input[name=stuff_" + mainObject.idCount + "]").val(item.text);
$("#someOtherIDTag input[name=stuff_other_" + mainObject.idCount + "]").val(item.id);
if (item.id == 0) {
$(container).append('<i class="pull-right" style="font-size:0.8em;color:#049cdb;font-weight:bold;"><i class="icon-warning-sign"></i> New</i>');
}
return item.text;
},
getIdCount: function(){ //tried this but do not know how to use it properly
return this.idCount
},
idCount: 0,
initSelection: function (c, d) {
d({
id: $("input[name=dealCompanyID_" + mainObject.idCount + "]").val(),
text: c.val()
});
},
S2Base: {
dropdownCssClass: SELECT2FIXED,
placeholder: "",
minimumInputLength: 2
}
}
// As you can see mainObject is accessed in a few places. Please remember this is not my code. I am just trying to refactor it into an object as the project expands.
// This is how I use the object (and this is done a few times each time with a different name for newCopyObject):
$(".someClass").each(function(){
const newCopyObject = {...mainObject};
newCopyObject.idCount = fromDataAttrOnHTMLNode;
newCopyObject.ajax.type = 'new';
$(this).select2({
...newCopyObject.S2Base,
formatSearching: newCopyObject.formatSearching,
initSelection: newCopyObject.initSelection,
ajax: newCopyObject.ajax.main(),
createSearchChoice: newCopyObject.createSearchChoice,
formatResult:newCopyObject.formatResult,
formatSelection: newCopyObject.formatSelection
});
});
// ...do a bunch of other things
ajax:{
main:函数(){
让结果=(mainObject.ajax.type.toLowerCase=='new'?mainObject.ajax.resultNew:mainObject.ajax.resultPreExisting);
if(类型(结果)!=“函数”){
mainObject.error;
}
ajaxObj={
url:someOutSideVariableForURL,
数据类型:“json”,
安静百万:100,
数据:功能(c,d){
返回{
搜索:c,
马克斯佩奇:30,
页码:d
};
},
结果:结果
}
返回ajaxObj;
},
类型:“,
结果新:函数(e,d){
//新结果函数
变量c={
结果:e.results,
更多:错误
};
如果(d 添加新内容';
}否则{
d、 response=d.markup.join(“”);
}
if(item.data&&item.data.businessFunctions.length){
d、 响应+='
('+item.data.businessFunctions+”);
}
返回d.response;
},
FormatSearch:函数(){
返回“搜索内容…”;
},
formatSelection:函数(项、容器){
$(“#someOtherIDTag输入[name=stuff#”+mainObject.idCount+“]”)val(item.text);
$(“#someOtherIDTag输入[name=stuff_other_u“+main object.idCount+“]”)val(item.id);
如果(item.id==0){
$(容器).append('New');
}
返回item.text;
},
getIdCount:function(){//尝试了此操作,但不知道如何正确使用它
返回此.idCount
},
idCount:0,
初始化选择:函数(c,d){
d({
id:$(“输入[name=dealCompanyID_u“+mainObject.idCount+”])。val(),
正文:c.val()
});
},
S2Base:{
dropdownCssClass:选择2固定,
占位符:“”,
最小输入长度:2
}
}
//正如您所看到的,mainObject在一些地方被访问。请记住这不是我的代码。我只是试图在项目扩展时将其重构为一个对象。
//这就是我使用对象的方式(每次都使用不同的newCopyObject名称执行几次):
$(“.someClass”).each(函数(){
const newCopyObject={…mainObject};
newCopyObject.idCount=fromDataAttrOnHTMLNode;
newCopyObject.ajax.type='new';
$(此选项)。选择2({
…newCopyObject.S2Base,
FormatSearch:newCopyObject.formatSearching,
initSelection:newCopyObject.initSelection,
ajax:newCopyObject.ajax.main(),
createSearchChoice:newCopyObject.createSearchChoice,
formatResult:newCopyObject.formatResult,
formatSelection:newCopyObject.formatSelection
});
});
//…做一些其他的事情
在我看来,您可能需要重构。我不完全明白发生了什么,但是如果mainObject
有对自身的引用,那么在constnewcopyObject={…mainObject}之后
newCopyObject
这些对象的新副本将指向mainObject
使用lodash中的u.cloneDeep或类似的方法将是一种方法。我认为使用ES6类语法可能是重构它的最快和最容易理解的方法(对于下一个程序员来说)<