Представляю вам чудоскрипт
http://yourjavascript.com/31353253412/widget.js
Это класс Widget, он позволяет пилить няшные виджеты, и позволяет отделять логику, структуру и дизайн друг от друга)
грубо говоря то к чему ты применяешь Widget начинает понимать {{теги}}
и внутри этих тегов слово this ссылается на тот обьект который возвращает Widget
все просто как часы
И как вы заметили он делает
САМОЕ ГЛАВНОЕ - возвращает все на свои места, логику в javascript структуру в HTML в дизайн в CSS. И делает их независимыми друг от друга и взаимозаменяемыми.
Рассмотрим это на примере калькулятора:
<!-- подключаем скрипты -->
<script src="http://yourjavascript.com/1544031232/fix.js"></script>
<script src="http://yourjavascript.com/31353253412/widget.js"></script>
<!-- описываем структуру калькулятора -->
<div class="calculator">
<div class="calculator_display">{{this.display}}</div>
<table class="calculator_buttons">
<tr>
<td class="calculator_buttons_i" onclick="this.pushNumber(7)">7</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(8)">8</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(9)">9</td>
<td class="calculator_buttons_i" onclick="this.pushPlus()">+</td>
</tr>
<tr>
<td class="calculator_buttons_i" onclick="this.pushNumber(4)">4</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(5)">5</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(6)">6</td>
<td class="calculator_buttons_i" onclick="this.pushMinus()">-</td>
</tr>
<tr>
<td class="calculator_buttons_i" onclick="this.pushNumber(1)">1</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(2)">2</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(3)">3</td>
<td class="calculator_buttons_i" onclick="this.pushMultiply()">*</td>
</tr>
<tr>
<td class="calculator_buttons_i" onclick="this.pushEqually()" colspan="3">=</td>
<td class="calculator_buttons_i" onclick="this.pushDivide()">/</td>
</tr>
</table>
</div>
<!-- описываем дизайн калькулятора -->
<style type="text/css">
.calculator {
-webkit-user-select : none;
width : 150px;
}
.calculator_display {
box-sizing : border-box;
height : 30px;
padding : 5px;
font-size : 20px;
background-color : #009ee1;
}
.calculator_buttons {
width : 100%;
height : 170px;
}
.calculator_buttons_i {
text-align : center;
border : 1px solid #000000;
box-shadow : inset 0 0 5px #000000;
background-color : #a1c736;
cursor : pointer;
-webkit-transition : all 0.2s;
}
.calculator_buttons_i:hover {
background-color : #bbe63f;
}
.calculator_buttons_i:active {
box-shadow : inset 0 0 10px #000000;
background-color : #9cbe33;
}
</style>
<!-- описываем логику калькулятора -->
<script>
var Calculator = Widget.extend(function() {
this.display = ''; // Калькулятор имеет дисплей
});
// калькулятор умеет нажиматься на цифры
Calculator.prototype.pushNumber = function(number) { this.display += number };
// калькулятор умеет нажиматься на "плюс"
Calculator.prototype.pushPlus = function() { };
// калькулятор умеет нажиматься на "минус"
Calculator.prototype.pushMinus = function() { };
// калькулятор умеет нажиматься на "умножить"
Calculator.prototype.pushMultiply = function() { };
// калькулятор умеет нажиматься на "делить"
Calculator.prototype.pushDivide = function() { };
// калькулятор умеет нажиматься на "равно"
Calculator.prototype.pushEqually = function() { };
</script>
<!-- привяжем логику калькулятора к структуре -->
<script> var calculator = new Calculator('.calculator'); </script>
