The right approach to create a complex / nested JavaScript object in another object

The following code is for a brief example of a simple reusable object design. This is a very simple object at the level of one level, put as many details and methods as you want, and just assign them.

function someDesiredReusableType(optionally, pass, ctor, pars, here) { //core obj to return var DesiredTypeCrtor = { propSkiingLocation: "canada", OrderTickets: function(optionally){ var tryRoomWView = optionaly; print( "Dear " + ctor +", your request for " + propSkiingLocation + " is now being processed: an " + tryRoomWView + " request was notified, we understand you have " + pars + " for cross country transportation, confirmation email will be sent " + here + " as soon as we process your order. } } }; return DesiredTypeCrtor } 

Here is an example of this use:

  var DesrVacSkC = someDesiredReusableType("could really help!",null, "mr. Bean", "my mini", " Fun@bbc.co.uk ") //oh..almost forgot DesrVacSkC.OrderTickets(); 

Like this figurative object, it’s actually not as simple as I used in my code, it works the way it is (I have not tried this actual one, as this is just an example.)

But this next setting, which similarly uses the same approach, is somewhat buggy.

This is an example for an object that I have successfully and in the blink of an eye implemented as a nested object, using the same approach as the buggy object, which I don’t understand why they applied the wrong approach to the browser.

 //this is an important one, a smart property / value holder I came up with and does work perfectly, as a nested member. function Rprp(parVal) { var cretdprp = { propVal: parVal, propValAsint: parseInt(parVal) }; return cretdprp; } 

But the following, below, is missing because it lacks the right approach to initialize ownedFefCollCore

Uncaught TypeError: Cannot read property "HElmTColl" undefined

// It is important that it was launched as very good, adding it to the object below until I add the member ownedFefCollCore .

 function CreateFileEditForm_Manager() { //as i do usually base/inner/creator and a return obj var Repo = { CsDataLocals: { GetCurLastfileId:Rprp($("#HLocModelData_LastFileId").val()) }, FormFldNames: { JRdrData_FileName: "JRdrData_FileName" }, //this is my bugg ! with and without new keyword & as function or Object!! ownedFefCollCore: new FefCollCore(), //and this is the line that chrome get is anger on --> all day long FeFDivWFldsColl: this.ownedFefCollCore.HElmTColl, FeFDivWFlds_IdColl: this.ownedFefCollCore.HElmT_IdColl, FeFDivWFldsCollAdd: function (parId, parFefDivWrpDivflds) { this.ownedFefCollCore.CollAdd(parId, parFefDivWrpDivflds); }, / ........ //some more code was removed trying to keep it as short as possible } //fefa stands for fileRecord Edit Form , core just says nothing, is there to imply the 'thing' is to be shared between variation of instances from the base object 

In my research, I found the following approach for less constructive constructions with errors, but even this does not fix the error. And it was found among some others, such as Object.create()

 var FefCore = JClassProto({ initialize: function () { this.HElmTColl = new Array();//was originally [] ... //i changed because i wanted to eliminate any doubt that it one of the reasons my code is ... Somewhere undefined , now i know (pretty sure they might be little different but both are ok.) it not it. this.HElmT_IdColl = new Array(); this.CollAdd = function (parId, parHElmT) { this.HElmTColl.push(parHElmT); this.HElmT_IdColl.push(parId); } this.Coll_Remove = function (parHElmT) { this.HElmTColl.pop(parHElmT); } // this is the first move, if a new object(which is an element in the array) about to be created, // call this to make sure not exist for i create do this.ElmObjCanCreate = function (parId) { return this.getIndexOfValuInDivWFldsColl(parId) < 0; } this.HElmTColl_FindById = function (parId) { var collindexofCurFileReadyDivWrpFlds = this.getIndexOfValuInDivWFldsColl(parId); return this.HElmTColl[collindexofCurFileReadyDivWrpFlds]; } this.getIndexOfValuInHElmTColl = function (parId) { return $.inArray(parId, this.HElmT_IdColl); } } }); 

And last but not least, my source code (right after trying to create it as a base / shared object).

 function FefCollCore() { this.Cr = { HElmTColl: new Array(), HElmT_IdColl: new Array(), CollAdd: function (parId, parHElmT) { this.HElmTColl.push(parHElmT); this.HElmT_IdColl.push(parId); }, Coll_Remove: function (parHElmT) { this.HElmTColl.pop(parHElmT); }, CollNeedCreate: function (parId) { return this.getIndexOfValuInDivWFldsColl(parId) < 0; }, HElmTColl_FindById: function (parId) { var collindexofCurFileReadyDivWrpFlds = this.getIndexOfValuInDivWFldsColl(parId); return this.HElmTColl[collindexofCurFileReadyDivWrpFlds]; }, getIndexOfValuInHElmTColl: function (parId) { return $.inArray(parId, this.HElmT_IdColl); } }; return this.Cr; } 
+5
source share
2 answers
  //and this is the line that chrome get is anger on --> all day long FeFDivWFldsColl: this.ownedFefCollCore.HElmTColl, 

If you interpret the question correctly, you can try setting FeFDivWFldsColl as a function that returns this.ownedFefCollCore.HElmTColl

 var FefCore = function() { this.e = new Array(); this.e.push(2); } function CreateFileEditForm_Manager() { var Repo = { a: 0, b: 1, c: new FefCore(), // set `FeFDivWFldsColl` value as a function d: function() { // `this.c` : `new FefCore()` , `this.ce` : `new Array()` return this.ce } }; return Repo } var Fef = new CreateFileEditForm_Manager(); console.log(Fef.d()) 
+1
source

 var cont = "...see console"; var DivEmptyhtml = document.createElement('div'); var elmst = document.createElement('style'); function stringcss (){ return ".cssEmptyhtml{ \r\n\tmargin:auto; margin-top:10px; margin-bottom:20px;"+ " text-align:center; top:10px;"+ " width:40%; padding: 5px; height: 100px; " + "background-color:rgb(96,116,243); "+ "color: #B5fee8; "+ "background-image:" + " linear-gradient(to right bottom, #2983bC 24%, #284a4b 77%);"+ " box-shadow: 8px 10px 50px 20px rgb(55, 55, 55); "+ " -webkit-border-radius:10px;border-radius:10px; }"; } //elmst.innerHTML = stringcss(); DivEmptyhtml.innerHTML = cont; DivEmptyhtml.className = "cssEmptyhtml"; DivEmptyhtml.attributes["id"] ="DivEmptyhtml"; $("head").append(elmst); $("body").append(DivEmptyhtml); $(elmst).attr("id","elmst"); //$(".cssEmptyhtml").attr("style",stringcss()); $(elmst).text(stringcss()); var strS, strF, message; var indx = 123; var count = 135; indx = ++count - 1; var init = true; //now me var programSteps = 0; var starting = "starting"; console.log(starting); function Log(strLine) { var d = new Date, DS = d.getSeconds(), Dms = d.getMilliseconds().toString(); console.log("[step#" + (++programSteps) + "] " + DS + "." + Dms.substring(0, 2) + "> " + strLine); } //...see console function LogObj(p_type) { function Fnl_t_t() { this.obj = "\r\n\t\t"; } function Fnl_5xt() { this.obj = "\r\n\t\t\t\t"; } var obj = { doNewLineBold: function(boolPrint, value, value2, value3, value4) { var nlttcopy = this.backnl_t_t.obj; this._nl_t_t = lnobj1.backnl_5xt.obj+ "|========> [ " + value; this._nl_t_t += value2 != "" ? " " + value2 : ""; this._nl_t_t += value3 != "" ? " " + value3 : ""; this._nl_t_t += value4 != "" ? " " + value4 : ""; this._nl_t_t += " ] <=============|" + nlttcopy; if (boolPrint) { Log(this._nl_t_t); return ""; } else return this._nl_t_t; }, doLineBold: function(boolPrint, value, value2, value3, value4) { var nlttcopy = this.backnl_t_t.obj; this._nl_t_t = "|========> [ " + value; this._nl_t_t += value2 != "" ? " " + value2 : ""; this._nl_t_t += value3 != "" ? " " + value3 : ""; this._nl_t_t += value4 != "" ? " " + value4 : ""; this._nl_t_t += " ] <=============|" + nlttcopy; if (boolPrint) { Log(this._nl_t_t); return ""; } else return this._nl_t_t; }, _type: { val: p_type, formated: "" }, doformatedHeader: function() { var splts = this._type.val.split(' '); for (var i = 0; i < splts.length; i++) { this._type.formated += splts[i] + this.ErowR; } return "|========> [ " + this._type.formated + " ] <=============|" + this.backnl_5xt.obj; }, doformatedTail: function() { return this.backnl_5xt.obj + "|========> [ END_ " + this._type.formated + "_END] <=============|" + this.backnl_t_t.obj; }, _nl_t_t: function() { return "\r\n\t\t"; }, backnl_5xt: new Fnl_5xt(), backnl_t_t: new Fnl_t_t(), ErowR: ">", nlArowR : new Fnl_5xt().obj + ">" }; return obj; } var lnobj1 = LogObj("listWcounter1() arr"); //create object #1 var lnobj2 = LogObj("listWcounter2() arr"); //make sure #2 is not a-copy var header1 = lnobj1.doformatedHeader(); var Tail1 = lnobj1.doformatedTail(); var header2 = lnobj2.doformatedHeader(); var Tail2 = lnobj2.doformatedTail(); var nlarowR1 = lnobj1.backnl_5xt.obj + lnobj1.ErowR; var nlarowR2 = lnobj2.backnl_t_t.obj + lnobj2.ErowR; Log(header1 + lnobj1.ErowR + " starting1... " + nlarowR1 + " is init1 ok?, and index1 is Ok? " + indx + Tail1); Log(header2 + lnobj2.ErowR + " starting2... " + nlarowR1 + " is init2 ok?, and index2 is Ok? " + indx + Tail2); var newbold = lnobj1.doLineBold(0, "a", "b", "c", "d") + lnobj1.backnl_5xt.obj; Log("newbold looks Like: " + newbold); lnobj1.doLineBold(1, "A", "B", "C", "D"); lnobj1.doNewLineBold(1, "e", "f", "g", "h"); Log(lnobj1.nlArowR); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
+1
source

Source: https://habr.com/ru/post/1245408/


All Articles