[megaupload]

Представляю вам чудоскрипт 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>