Eu entendi o que você quer fazer, dá para fazer sim. Implementei aqui rapidinho uma solução prova de conceito:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Negociações</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<script src="js/app/polyfill/es6.js"></script>
</head>
<body class="container" data-controller="NegociacaoController">
<!-- código omitido -->
<!-- scripts anteriores omitidos -->
<script>
document.addEventListener('DOMContentLoaded', function() {
function colocaPrimeiraLetraEmMinusculo(string) {
return string.charAt(0).toLowerCase() + string.slice(1);
}
let nodeList = document.querySelectorAll('[data-controller]');
Reflect.apply(Array.prototype.forEach, nodeList, [function(node) {
let claz = node.dataset.controller;
let clazAsString = window.classes[claz].toString();
window[colocaPrimeiraLetraEmMinusculo(claz)] = new window.classes[claz]();
});
});
</script>
</body>
</html>
Contudo, isso não é suficiente. Quando criar suas classes, você não pode tê-las no escopo global, caso contrário não conseguirá instanciá-las dimanicamente. Aqui, defini a convenção de adicionar as classes window.classes.
Vejamos como fica a declaração de `NegociacaoController':
(function(classes) {
class NegociacaoController {
// código omitido'
}
classes.NegociacaoController = NegociacaoController;
})(window.classes || (window.classes = {}));
Agora você pode filosofar um pouco sobre o código que foi escrito aí.Hehehe.
Eu não fiz isso no treinamento, porque nos módulos futuros eu pretendo usar um sistema de módulo, sendo assim, essa solução é muito custosa.
