Управление DOM внутри конструктора пользовательских функций - PullRequest
Новая
       19

Управление DOM внутри конструктора пользовательских функций

0 голосов
/ 20 сентября 2018

Я написал конструктор функций с прототипом, который создает изображение SVG и вставляет его в веб-страницу.У меня есть 2 вопроса:

1 Можно ли взять часть кода внутри конструктора, который используется в процессе создания экземпляра, и переместить его в объект-прототип.Насколько я вижу, эти методы-прототипы обычно используются с уже созданными экземплярами, например var a = [2,3,4]; a.reverse()

2 Можно ли манипулировать объектами DOM таким образом внутри конструктора функции?Объекты DOM не являются нативными объектами js, они являются хост-объектами вне js-engine. Они аналогичны объектам js, но созданы браузером где-то еще

Ниже приведен код: 

function Sektor(selector, options) {
// Find a DOM object representing the HTML element with the supplied selector
// create a property called element
// This DOM object is assigned to the element property
  this.element = document.querySelector(selector);

// Some default values in case nothing is supplied
  const defaultOptions = {
    size: 100,
    circleColor: '#b3c9e0'
  };

// Merge options with default ones
  options = Object.assign(defaultOptions, options);
	
// Circle dimensions
  options.center = options.size / 2;
  options.radius = options.center;
  
// create a property called options
  this.options = options;

// Get SVG
  const svg = this.getCircle();

// SVG is injected into the DOM element with JavaScript
  this.element.innerHTML = svg;
}

// Assigning a method to the constructor's prototype
// This method generates SVG
Sektor.prototype.getCircle = function() {
  const options = this.options;
  return `
  <svg class='Sektor' viewBox='0 0 ${options.size} ${options.size}'> 
  <circle class='Sektor-circle' fill=${options.circleColor} cx='${options.center}' cy='${options.center}' r='${options.radius}' />
  </svg>
  `;
};


var sektor = new Sektor( '.example-one', { circleColor: '#7da385' } );
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Draw</title>
	<style>
body {
	margin: 0;
	padding: 0;
}

.examples {
	display: flex;
	justify-content: space-between;
	padding: 20px;
}

.example {
	margin: 0px auto;
}

.Sektor {
	width: 200px;
	height: 200px;
	background-color:#f2f2f2;
}
	</style>
</head>
<body>
	<div class='examples'>
		<div class='example'>
			<div class='example-one'></div>
		</div>
	</div>		
	<script src='sektor.js'></script>
</body>
</html>
...