Управление DOM внутри конструктора пользовательских функций
Я написал конструктор функций с прототипом, который создает изображение 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>