我从函数eqC创建对象ColsProt。
在此函数的构造函数中，我将this.colsO = {};实例化为空。
如果我记录该值 - 它是空的。
如果我尝试运行函数，它会在我的日志this.colsO中填充值this.colsO（实际上它是深度嵌套5个函数），在执行这些函数之前会填充值。它会在任何函数执行之前记录构造函数中已有的值，但前提是代码中的此函数将在feature中执行（如果以后未执行，this.colsO日志为空）。
日志顺序正常，但在日志中我找到this.colsO值，但通常this.colsO对象在第7步之前应为空。
1 constructor this.colsO= undefined
2 constructor this.colsO= { object full of style variables, though should be empty }
2 end of constructor this.idArr= //empty
3 ColsProt.prototype.init this.colsO= { object full of style variables, though should be empty }
3 ColsProt.prototype.init this.idArr = //empty
4 ColsProt.prototype.getVars this.colsO = { object full of style variables, though should be empty }
4f ColsProt.prototype.getVars fullOname = { object full of style variables, though should be empty }
4 ColsProt.prototype.getVars this.idArr= //empty
// repeates several tims
5 ColsProt.prototype.findColumns this.idArr=loccontPck,introPck,servicesPck
5 ColsProt.prototype.findEls this.colsO = { object full of style variables, though should be empty }
5f ColsProt.prototype.findEls fullOname= //undefined
6 ColsProt.prototype.getProps ans= { object with style parameters }
6 ColsProt.prototype.getProps this.colsO= { object full of style variables, though should be empty, the ans is already part of the object, although it is not yet assigned to be }
7 ColsProt.prototype.findEls this.colsO = { object full of style variables, the ones which should be assigned, and the ones which will be assigned in future }
实际上，我需要一个空的this.colsO在一些更深的地方，但它充满了变量，我无法删除它们，因为删除似乎比this.colsO更早填充变量。除此之外，没有任何内容被删除，如果我尝试删除该对象，则会出现一个名为“rem”的新项目。
var ColsProt = function（gO）{
//this.win = $(window); //the window object
//UNC //console.log(' From ColsProt constructor '); // ['ecols']
this.colCss = null;
if( (gO['colCss']!==undefined) && (gO['colCss']!==null) ) { this.colCss = gO['colCss']; }
this.mode = 'dev'; // 'prod'|'dev'; //the main difference is on resize events. In once case the different stylesheet is included. In another case - the stylesheet is generated and window is reset
if( (gO['mode']!==undefined) && (gO['mode']!==null) ) { this.mode = gO['mode']; }
this.oNameArr = []; ////oName of [ 'imgO', 'divO', 'oelO']
this.oSelArr = [];
var mi;
//the names of Object which contains images, divs, other elements
//[ { cssSel : ['img'], oName : 'imgO' },
//{ oName : 'oelO', cssSel : [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div //h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ] } // '#'+colid +' h1',
//{ cssSel : ['div:not(:has(img))'], oName : 'divO' } ];
var onm, me, sels;
if ( ( gO['oMap']!==undefined ) && ( gO['oMap']!==null) ) {
this.oNameArr = Object.keys( gO['oMap'] );
for ( onm of this.oNameArr ) {
me = gO['oMap'][onm];
sels = JSON.parse( JSON.stringify ( me['cssSelArr'] ) );
this.oSelArr.push( sels );
} // for ( mi of gO['oMap'] ) {
this.oMap = JSON.parse( JSON.stringify ( gO['oMap'] ) );
} // if ( ( gO['oMap']!==undefined ) && ( gO['oMap']!==null) ) {
else {
this.oNameArr = [ 'imgO', 'divO', 'oelO' ];
this.oSelArr = [ ['img'], ['div:not(:has(img))'], [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ] ];
this.oMap = {
//'imgO' : { cssSelArr:['img'], rules:{ adj:150, mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0} },
'imgO' : { cssSelArr:['img'], rules:{} }, //adj is top and bottom padding
//'divO' : { cssSelArr:['div:not(:has(img))'], rules:{ mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0 },
'divO' : { cssSelArr:['div:not(:has(img))'], rules:{adj:20} },
//'oelO' : { cssSelArr : [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ], rules:{ adj:150, mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0} }
'oelO' : { cssSelArr : [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ], rules:{ adj:12 } }
};
}
/*this.oNameSelMap = {};
for ( mi of this.oMap ) {
var oName = this.oMap['oName'];
var cssSelArr = this.oMap['cssSel'];
this.oNameSelMap['oName'] = cssSelArr;
} */
//class of images, which are very reduced in size, but enlarge in case of column resizing
this.imgClass = null;
if( (gO['imgClass']!==undefined) && (gO['imgClass']!==null) ) { this.imgClass = gO['imgClass']; }
//ids of topdiv elements, mostly images, where you should not apply any styling, nto to make spaces
this.topDivsIds=null;
if( (gO['topDivsIds']!==undefined) && (gO['topDivsIds']!==null) ) { this.topDivsIds = gO['topDivsIds']; }
this.stSettStr='';
if( (gO['stSettStr']!==undefined) && (gO['stSettStr']!==null) ) { this.stSettStr = gO['stSettStr']; } ////console.log('this.stSettStr='); //console.log(this.stSettStr);
this.cusIdMap = null; this.cusIdArr=[];
if( (gO['cusIdMap']!==undefined) && (gO['cusIdMap']!==null) ) {
this.cusIdMap = gO['cusIdMap'];
this.custIdArr = Object.keys(this.cusIdMap);
}
this.styleDataFname = 'coffStyleSett170926.json';
if( (gO['styleDataFname']!==undefined) && (gO['styleDataFname']!==null) ) { this.styleDataFname = gO['styleDataFname'] +'.json'; }
this.tallestColId = ""; //id of tallest column
this.shorterCalIdArr = [];
this.colsOdif = {}; //this.colsOdif[id] = diff;
this.stSettStr = '';
if ( ( this.stSettStr!==undefined ) && ( this.stSettStr!==null ) && ( this.stSettStr.length > 0 ) ) { this.colsSettO = JSON.parse( this.stSettStr ); }
//this.colsSettO = { ecols:{}, objectName:'colsSettO' }; //contains settings data
//this.colsO = { ecols:{}, objectName:'colsO' }; //is filled with current data in function init() -- //contains id : { hBefore, hAfter, bhighest, imgFallArr
console.log('1 constructor this.colsO='); console.log(this.colsO); //empty
this.colsO = {};
console.log('2 constructor this.colsO='); console.log(this.colsO); // filled with variables
//this.colsO['ecols'] = {};//contains this.colsO['ecols'][id] [ parameters for equal columns, like diff, L ]..
var on;
for ( on of this.oNameArr ) { this.colsO[on] = {}; }
//console.log(' before the init, in constructor this.idArr=' + this.idArr.toString() ); undefined
this.idArr = []; //ids of columns
console.log('2 end of constructor this.idArr=' + this.idArr.toString() );
//this.oiDivAdj = 20; //maximum size to increase the div ( currently is applied to margin// REFACTOR to be able to apply to border or to padding
//this.oiAdj = 12; //maximum size to increase the element. Make different size for p, ul li, a etc....
//this.imgAdj = 200; //amoun to strech, add borders, etc to images
//UNC //console.log( 'this.colsSettO=' ); //console.log(this.colsSettO);
//UNC //console.log( 'this.colsO=' ); //console.log(this.colsO);
} // var ColsProt = function( gO ) {
ColsProt.prototype.init = function() {
console.log( ' 3 ColsProt.prototype.init this.colsO=' ); console.log( this.colsO );
console.log( ' 3 ColsProt.prototype.init this.idArr=' + this.idArr.toString() );
this.getVars( this.colsO );
}
ColsProt.prototype.getVars = function (fullOname) {
console.log( ' 4 ColsProt.prototype.getVars this.colsO=' ); console.log( this.colsO );
console.log( ' 4f ColsProt.prototype.getVars fullOname=' ); console.log( fullOname );
console.log( ' 4 ColsProt.prototype.getVars this.idArr=' + this.idArr.toString() );
//this.findColumns();
//this.findColumns2(this.colCss);
this.findColumns(this.colCss);
var colid, oName, css, cssStr;
for( colid of this.idArr ) {
for ( oName of this.oNameArr ) {
if ( ( this.colsO[oName]===undefined ) || ( this.colsO[oName]===null ) ) { this.colsO[oName] = {}; }
if ( ( this.colsO[oName]['cssSelArr']===undefined ) || ( this.colsO[oName]['cssSelArr']===null ) ) {
var cssSelArr = this.oMap[oName]['cssSelArr'];
////console.log( '154 From ColsProt.prototype.getVars, before this.findEls. cssSelArr = ' ); //console.log( cssSelArr );
this.findEls( { colid:colid, cssSelArr:cssSelArr, oName:oName, fullOname:fullOname } );
} // if ( ( this.colsO[oName]['cssSelArr']===undefined )
} // for ( oName of [ 'imgO', 'divO', 'oelO'] ) {
} // for( let colid of this.idArr ) {
}
ColsProt.prototype.findColumns = function() {
var css;
for( css of this.colCss ) {
var that = this;
$(css).each( function () {
var id = $(this).attr('id');
that.idArr.push(id);
}); // $(css).each( function () {
} // for( css of this.colCss ) {
console.log( ' 5 ColsProt.prototype.findColumns this.idArr=' + this.idArr.toString() );
} //ColsProt.prototype.findColumns = function() {
////get data for oName and colid.
//(i) this can be used for downlaoding to StyleSettingsFile ( fullOname = ,
//(ii) or For adjusting style settings
//cold - id of the column div.pck
//Gell all images
//var css = [ '#'+colid +' img'];
//var css = ['#'+colid +' div:not(:has(img))'];
//var css = this.oiEls //for ( sel of this.oiEls ) {
//oName = imgO | divO | oiO
//fullOname - object, which will containt the selected information
ColsProt.prototype.findEls = function( gO ) {
console.log( ' 5 ColsProt.prototype.findEls this.colsO=' ); console.log( this.colsO ); //filled, but hsould be empty
console.log( ' 5f ColsProt.prototype.findEls fullOname=' ); console.log( fullOname ); //filled, but hsould be empty
var colid, css, oName, fullOname; var berr = false;
if( (gO!==undefined) && (gO!==null) ) {
if ( ( gO['colid']!==undefined) && (gO['colid']!==null) ) {
colid = gO['colid']; } else { berr = true; }
if ( ( gO['cssSelArr']!==undefined) && (gO['cssSelArr']!==null) ) {
css = gO['cssSelArr']; } else { berr = true; }
if ( ( gO['oName']!==undefined) && (gO['oName']!==null) ) {
oName = gO['oName']; } else { berr = true; }
if ( ( gO['fullOname']!==undefined) && (gO['fullOname']!==null) ) {
fullOname = gO['fullOname']; } else { berr = true; }
} // if( (gO!==undefined) && (gO!==null) ) {
else {
berr = true;
//UNC //console.log(' ERROR, ERROR ');
}
if(!berr) {
//UNC //console.log( '349 From ColsProt.prototype.findEls colid='+colid+', css='+css+', oName='+oName );
// find elements for given oName and columnid //oName is the name of css rule, like 'img', 'ul', etc...
var citem;
var tmpO = {}; var tmpOcss = {};
//remove the same elements
var uOcss = {}; var uO = {};
var int, inu;
//push to this.fullOname[oName][colid]
var iu, citem;
var selO = {}; var selOcss = {};
var cnt = 0;
for ( citem of css ) {
var that = this;
$( '#' + colid).find(citem).each( function() {
cnt++;
if( $(this).length > 0 ) {
if( $(this).length == 1 ) {
tmpO[cnt] = $(this);
tmpOcss[cnt] = citem;
} // if( $(this) == 1 ) {
//separate between different items, and items having the same selector like ul li
else if ( $(this).length > 1 ) {
var elemcopy = $(this);
$(this).each ( function() {
var that = $(this);
$(elemcopy ).each ( function() {
var buniq = true;
////console.log( '140 that=' ) ; //console.log( that );
////console.log( '140 this=' ) ; //console.log( $(this) );
//UNC //console.log( '349 citem='+citem+' !that.is( $(this) ) =' ); //console.log( !that.is( $(this) ) );
if( !that.is( $(this) ) ) {
tmpO[cnt] = $(this);
tmpOcss[cnt] = citem;
buniq = false;
} // if( !that.is( $(this) ) ) {
if(buniq) {
tmpO[cnt] = $(this);
tmpOcss[cnt] = citem;
} // if(buniq) {
} ); // $(elem).each ( function() {
} ); // $(elem).each ( function(elem) {
} // else if ( elem.length > 1 ) {
} // if( $(this) > 0 ) {
} ); // $( css ).each( function() {
} // for (citem of css ) {
////console.log('tmpArr'); //console.log(tmpArr);
//UNC //console.log('tmpO'); //console.log(tmpO);
////console.log('tmpOcss'); //console.log(tmpOcss); //
//remove the same elements
for ( int of Object.keys(tmpO) ) {
var elt = tmpO[int];
var cc = tmpOcss[int]; //css condition
var L = Object.keys(uO).length;
if( L > 0 ) {
var bnew = true;
//for ( let elu of uArr ) {
for ( let inu of Object.keys(uO) ) {
var elu = uO[inu];
if ( elt.is(elu) ) { bnew = false; }
// removes the same parent chldrens // if ( $(e1).parent().children().is($(e2)); )
//because you need to apply margin only once to div div a, not as many times as there are <a> elements
if ( elt.parent().children().is(elu) ) { bnew = false; }
} // for ( let elu of uArr ) {
if ( bnew ) {
//uArr.push(elt);
uOcss[int] = cc; uO[int] = elt;
}
} // if ( uArr.length > 0 ) {
else {
//uArr.push(elt)
uOcss[int] = cc; uO[int] = elt;
}
} // for ( let elt of tmpArr ) {
//UNC //console.log('uO'); //console.log(uO);
//UNC //console.log('uOcss'); //console.log(uOcss);
////console.log('uArr'); //console.log(uArr);
////console.log('uOcss'); //console.log(uOcss); //console.log('uO'); //console.log(uO);
//gett properties and push to fullArr
if( (fullOname[oName]===undefined) || (fullOname[oName]===null) ) {
fullOname[oName] = {};
}
if( (fullOname[oName][colid]===undefined) || (fullOname[oName][colid]===null) ) {
fullOname[oName][colid] = {};
}
if( (fullOname['map']===undefined) || (fullOname['map']===null) ) {
fullOname['map'] = {};
}
if( (fullOname['map'][oName]===undefined) || (fullOname['map'][oName]===null) ) {
fullOname['map'][oName] = {};
}
if( (fullOname['map'][oName][colid]===undefined) || (fullOname['map'][oName][colid]===null) ) {
fullOname['map'][oName][colid] = {};
}
var idMap = {};
var cssMap = {};
var classMap = {};
var id, css, cls;
for ( iu of Object.keys( uO ) ) {
var el = uO[iu]; //elements
var css = uOcss[iu];
////console.log('289 css=' + css );
var propO = this.getProps( {el:el,css:css} );
//UNC //console.log('propO='); //console.log(propO);
//fullOname[oName][colid].push( propO );
if(iu=="rem") { console.log("ERROR iu = rem propO="); console.log(propO); }
fullOname[oName][colid][iu] = propO;
if( (propO['id']!==undefined) && (propO['id']!==null) ) {
id = propO['id'];
if( (fullOname['map'][oName][colid]['id']==undefined) || (fullOname['map'][oName][colid]['id']==null) ) { fullOname['map'][oName][colid]['id'] = {}; }
if( (fullOname['map'][oName][colid]['id'][id]==undefined) || (fullOname['map'][oName][colid]['id'][id]==null) ) { fullOname['map'][oName][colid]['id'][id] = []; }
fullOname['map'][oName][colid]['id'][id].push(iu);
}
if( (propO['css']!==undefined) && (propO['css']!==null) ) {
css = propO['css'];
if( (fullOname['map'][oName][colid]['css']==undefined) || (fullOname['map'][oName][colid]['css']==null) ) { fullOname['map'][oName][colid]['css'] = {}; }
if( (fullOname['map'][oName][colid]['css'][css]==undefined) || (fullOname['map'][oName][colid]['css'][css]==null) ) { fullOname['map'][oName][colid]['css'][css] = []; }
fullOname['map'][oName][colid]['css'][css].push(iu);
}
if( (propO['cls']!==undefined) && (propO['cls']!==null) ) {
cls = propO['cls'];
if( ( fullOname['map'][oName][colid]['setCl']==undefined) || (fullOname['map'][oName][colid]['setCl']==null) ) { fullOname['map'][oName][colid]['setCl'] = {}; }
if( ( fullOname['map'][oName][colid]['setCl'][cls]==undefined ) || ( fullOname['map'][oName][colid]['setCl'][cls]==null ) ) { fullOname['map'][oName][colid]['setCl'][cls] = []; }
fullOname['map'][oName][colid]['setCl'][cls].push(iu);
} // if( (propO['cls']!==undefined) && (propO['cls']!==null) ) {
} // for ( int of Object.keys(tmpO) ) {
if( (fullOname['ecols']===undefined) || (fullOname['ecols']===null) ) { fullOname['ecols']={}; }
if( (fullOname['ecols'][oName]===undefined) || (fullOname['ecols'][oName]===null) ) { fullOname['ecols'][oName]={}; }
if( (fullOname['ecols'][oName][colid]===undefined) || (fullOname['ecols'][oName][colid]===null) ) { fullOname['ecols'][oName][colid]={}; }
fullOname['ecols'][oName][colid]['elArrL'] = Object.keys( uO ).length;
}// if berr
//console.log('ColsProt.prototype.findEls = fullOname='); console.log(fullOname);
console.log( ' 7 ColsProt.prototype.findEls this.colsO=' ); console.log( this.colsO ); //here should be filled
console.log( ' 7f ColsProt.prototype.findEls this.colsO=' ); console.log( this.colsO ); //here should be filled
}; // ColsProt.prototype.findEls = function(colid, css, oName ) {
ColsProt.prototype.getProps = function( gO ) {
var el, css; var berr = false;
if ( (gO!==undefined) && (gO!==null) ) {
if ( ( gO['el']!==undefined) && (gO['el']!==null) ) {
el = gO['el']; } else { berr = true; }
if ( ( gO['css']!==undefined) && (gO['css']!==null) ) {
css = gO['css']; } else { berr = true; }
} // if( (gO!==undefined) && (gO!==null) ) {
else { berr = true;
console.log(' ERROR , ERROR ');
}
if(!berr) {
var mT = parseInt ( el.css('margin-top') );
var mR = parseInt ( el.css('margin-right') );
var mB = parseInt ( el.css('margin-bottom') );
var mL = parseInt ( el.css('margin-left') );
var bT = parseInt ( el.css('border-top') );
var bR = parseInt ( el.css('border-right') );
var bB = parseInt ( el.css('border-bottom') );
var bL = parseInt ( el.css('border-left') );
var pT = parseInt ( el.css('padding-top') );
var pR = parseInt ( el.css('padding-right') );
var pB = parseInt ( el.css('padding-bottom') );
var pL = parseInt ( el.css('padding-left') );
var id = el.attr( 'id' );
var cls = el.attr( 'class' );
var width = el.width();
var height = el.height();
var boxSizing = el.attr( 'box-sizing' );
var css = css;
var ans = { mT:mT, mR:mR, mB:mB, mL:mL, bT:bT, bR:bR, bB:bB, bL:bL, pT:pT, pL:pL, pB:pB, pR:pR, id:id, cls:cls, width:width, height:height, boxSizing:boxSizing, css:css };
console.log( ' 6 ColsProt.prototype.getProps ans=' ); console.log( ans );
console.log( ' 6 ColsProt.prototype.getProps this.colsO=' ); console.log( this.colsO ); //filled, but hsould be empty
return ans;
}
}; // ColsProt.prototype.getProps = function( el) {
//主脚本的一部分，用于初始化对象
var oMap = {
//'imgO' : { cssSelArr:['img'], rules:{ adj:150, mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0} },
imgO : { cssSelArr:['img'], rules:{} }, //adj is top and bottom padding
//'divO' : { cssSelArr:['div:not(:has(img))'], rules:{ mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0 },
divO : { cssSelArr:['div:not(:has(img))'], rules:{adj:20} },
//'oelO' : { cssSelArr : [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ], rules:{ adj:150, mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0} }
oelO : { cssSelArr : [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ], rules:{ adj:12 } }
};
var cusIdMap = {};
var topDivsIds = [ 'loccontPck', 'locontPckItem', 'introPck', 'imgPckiEyePckItem', 'servicesPck', 'carePgPckItem' ]; //do not apply to values for these items
var botDivsIds = [];
//var stSettStr = from C:\Bitnami\wampstack-7.0.22-1\apache2\htdocs\type70823\src\HotColImgBundle\Resources\actions\person\certifOfficer2\settings\StyleData_certifO.json
//var stSettStr = "";
var stSettStr =$( "#stSettStr" ).text();
//console.log('stSettStr='); console.log(stSettStr);
var eqC = new ColsProt( { colCss:['.pck' ], cusIdMap:cusIdMap, oMap:oMap, topDivsIds:topDivsIds, botDivsIds:botDivsIds, stSettStr:null, styleDataFname:'coffStyleSett170926', mode:'dev' } );
eqC.init();