Цитата:
|
Цитата:
Дерево можно хранить в DOM и оно может вообще ничего не знать про стороение. А само строение будет только в базе храниться. |
'alignContent': new ProxyCap(), 'alignItems': new ProxyCap(), 'alignSelf': new ProxyCap(), 'animation': new ProxyCap(), 'animationDelay': new ProxyCap(), 'animationDirection': new ProxyCap(), 'animationDuration': new ProxyCap(), 'animationFillMode': new ProxyCap(), 'animationIterationCount': new ProxyCap(), 'animationName': new ProxyCap(), 'animationPlayState': new ProxyCap(), 'animationTimingFunction': new ProxyCap(), 'appRegion': new ProxyCap(), 'appearance': new ProxyCap(), 'aspectRatio': new ProxyCap(), 'backfaceVisibility': new ProxyCap(), 'backgroundClip': new ProxyCap(), 'backgroundComposite': new ProxyCap(), 'backgroundOrigin': new ProxyCap(), 'backgroundSize': new ProxyCap(), 'borderAfter': new ProxyCap(), 'borderAfterColor': new ProxyCap(), 'borderAfterStyle': new ProxyCap(), 'borderAfterWidth': new ProxyCap(), 'borderBefore': new ProxyCap(), 'borderBeforeColor': new ProxyCap(), 'borderBeforeStyle': new ProxyCap(), 'borderBeforeWidth': new ProxyCap(), 'borderEnd': new ProxyCap(), 'borderEndColor': new ProxyCap(), 'borderEndStyle': new ProxyCap(), 'borderEndWidth': new ProxyCap(), 'borderFit': new ProxyCap(), 'borderHorizontalSpacing': new ProxyCap(), 'borderImage': new ProxyCap(), 'borderRadius': new ProxyCap(), 'borderStart': new ProxyCap(), 'borderStartColor': new ProxyCap(), 'borderStartStyle': new ProxyCap(), 'borderStartWidth': new ProxyCap(), 'borderVerticalSpacing': new ProxyCap(), 'boxAlign': new ProxyCap(), 'boxDecorationBreak': new ProxyCap(), 'boxDirection': new ProxyCap(), 'boxFlex': new ProxyCap(), 'boxFlexGroup': new ProxyCap(), 'boxLines': new ProxyCap(), 'boxOrdinalGroup': new ProxyCap(), 'boxOrient': new ProxyCap(), 'boxPack': new ProxyCap(), 'boxShadow': new ProxyCap(), 'clipPath': new ProxyCap(), 'colorCorrection': new ProxyCap(), 'columnAxis': new ProxyCap(), 'columnBreakAfter': new ProxyCap(), 'columnBreakBefore': new ProxyCap(), 'columnBreakInside': new ProxyCap(), 'columnCount': new ProxyCap(), 'columnGap': new ProxyCap(), 'columnProgression': new ProxyCap(), 'columnRule': new ProxyCap(), 'columnRuleColor': new ProxyCap(), 'columnRuleStyle': new ProxyCap(), 'columnRuleWidth': new ProxyCap(), 'columnSpan': new ProxyCap(), 'columnWidth': new ProxyCap(), 'columns': new ProxyCap(), 'filter': new ProxyCap(), 'flex': new ProxyCap(), 'flexBasis': new ProxyCap(), 'flexDirection': new ProxyCap(), 'flexFlow': new ProxyCap(), 'flexGrow': new ProxyCap(), 'flexShrink': new ProxyCap(), 'flexWrap': new ProxyCap(), 'flowFrom': new ProxyCap(), 'flowInto': new ProxyCap(), 'fontFeatureSettings': new ProxyCap(), 'fontKerning': new ProxyCap(), 'fontSizeDelta': new ProxyCap(), 'fontSmoothing': new ProxyCap(), 'fontVariantLigatures': new ProxyCap(), 'gridAfter': new ProxyCap(), 'gridAutoColumns': new ProxyCap(), 'gridAutoFlow': new ProxyCap(), 'gridAutoRows': new ProxyCap(), 'gridBefore': new ProxyCap(), 'gridColumn': new ProxyCap(), 'gridColumns': new ProxyCap(), 'gridEnd': new ProxyCap(), 'gridRow': new ProxyCap(), 'gridRows': new ProxyCap(), 'gridStart': new ProxyCap(), 'highlight': new ProxyCap(), 'hyphenateCharacter': new ProxyCap(), 'hyphenateLimitAfter': new ProxyCap(), 'hyphenateLimitBefore': new ProxyCap(), 'hyphenateLimitLines': new ProxyCap(), 'hyphens': new ProxyCap(), 'justifyContent': new ProxyCap(), 'lineAlign': new ProxyCap(), 'lineBoxContain': new ProxyCap(), 'lineBreak': new ProxyCap(), 'lineClamp': new ProxyCap(), 'lineGrid': new ProxyCap(), 'lineSnap': new ProxyCap(), 'locale': new ProxyCap(), 'logicalHeight': new ProxyCap(), 'logicalWidth': new ProxyCap(), 'marginAfter': new ProxyCap(), 'marginAfterCollapse': new ProxyCap(), 'marginBefore': new ProxyCap(), 'marginBeforeCollapse': new ProxyCap(), 'marginBottomCollapse': new ProxyCap(), 'marginCollapse': new ProxyCap(), 'marginEnd': new ProxyCap(), 'marginStart': new ProxyCap(), 'marginTopCollapse': new ProxyCap(), 'marquee': new ProxyCap(), 'marqueeDirection': new ProxyCap(), 'marqueeIncrement': new ProxyCap(), 'marqueeRepetition': new ProxyCap(), 'marqueeSpeed': new ProxyCap(), 'marqueeStyle': new ProxyCap(), 'mask': new ProxyCap(), 'maskBoxImage': new ProxyCap(), 'maskBoxImageOutset': new ProxyCap(), 'maskBoxImageRepeat': new ProxyCap(), 'maskBoxImageSlice': new ProxyCap(), 'maskBoxImageSource': new ProxyCap(), 'maskBoxImageWidth': new ProxyCap(), 'maskClip': new ProxyCap(), 'maskComposite': new ProxyCap(), 'maskImage': new ProxyCap(), 'maskOrigin': new ProxyCap(), 'maskPosition': new ProxyCap(), 'maskPositionX': new ProxyCap(), 'maskPositionY': new ProxyCap(), 'maskRepeat': new ProxyCap(), 'maskRepeatX': new ProxyCap(), 'maskRepeatY': new ProxyCap(), 'maskSize': new ProxyCap(), 'maxLogicalHeight': new ProxyCap(), 'maxLogicalWidth': new ProxyCap(), 'minLogicalHeight': new ProxyCap(), 'minLogicalWidth': new ProxyCap(), 'nbspMode': new ProxyCap(), 'order': new ProxyCap(), 'paddingAfter': new ProxyCap(), 'paddingBefore': new ProxyCap(), 'paddingEnd': new ProxyCap(), 'paddingStart': new ProxyCap(), 'perspective': new ProxyCap(), 'perspectiveOrigin': new ProxyCap(), 'perspectiveOriginX': new ProxyCap(), 'perspectiveOriginY': new ProxyCap(), 'printColorAdjust': new ProxyCap(), 'regionBreakAfter': new ProxyCap(), 'regionBreakBefore': new ProxyCap(), 'regionBreakInside': new ProxyCap(), 'regionOverflow': new ProxyCap(), 'rtlOrdering': new ProxyCap(), 'rubyPosition': new ProxyCap(), 'shapeInside': new ProxyCap(), 'shapeMargin': new ProxyCap(), 'shapeOutside': new ProxyCap(), 'shapePadding': new ProxyCap(), 'svgShadow': new ProxyCap(), 'tapHighlightColor': new ProxyCap(), 'textCombine': new ProxyCap(), 'textDecorationsInEffect': new ProxyCap(), 'textEmphasis': new ProxyCap(), 'textEmphasisColor': new ProxyCap(), 'textEmphasisPosition': new ProxyCap(), 'textEmphasisStyle': new ProxyCap(), 'textFillColor': new ProxyCap(), 'textOrientation': new ProxyCap(), 'textSecurity': new ProxyCap(), 'textStroke': new ProxyCap(), 'textStrokeColor': new ProxyCap(), 'textStrokeWidth': new ProxyCap(), 'transform': new ProxyCap(), 'transformOrigin': new ProxyCap(), 'transformOriginX': new ProxyCap(), 'transformOriginY': new ProxyCap(), 'transformOriginZ': new ProxyCap(), 'transformStyle': new ProxyCap(), 'transition': new ProxyCap(), 'transitionDelay': new ProxyCap(), 'transitionDuration': new ProxyCap(), 'transitionProperty': new ProxyCap(), 'transitionTimingFunction': new ProxyCap(), 'userDrag': new ProxyCap(), 'userModify': new ProxyCap(), 'userSelect': new ProxyCap(), 'wrap': new ProxyCap(), 'wrapFlow': new ProxyCap(), 'wrapThrough': new ProxyCap(), 'writingMode': new ProxyCap() }; ProxyCapDominatus :D |
Цитата:
Цитата:
"прокси" (проксирующая на другое свойство при обращении) или "проперти" (тупо копирующая свойство с ближайщим аналогом) а вообще код пишется для людей и ебал я в рот лишний килобайт) |
Цитата:
|
А ВОТ СОБСТВЕННО СУТЬ:
<script src="http://yourjavascript.com/1544031232/fix.js"></script> <script src="http://yourjavascript.com/31353253412/widget.js"></script> <style> #box { height : 20px; text-align : center; background-color : coral; } </style> <div id="box" onmousemove="this.mouseX = event.offsetX"> {{this.mouseX}} </div> <script> var box = new Widget('#box'); </script> |
Отлично, давайдосвидания, а я пока покажу ПРИМЕР С КАЛЬКУЛЯТОРОМ:
Создадим структуру калькулятора и его дизайн. <div class="calculator"> <div class="calculator_display">12345</div> <table class="calculator_buttons"> <tr> <td class="calculator_buttons_i">7</td> <td class="calculator_buttons_i">8</td> <td class="calculator_buttons_i">9</td> <td class="calculator_buttons_i">+</td> </tr> <tr> <td class="calculator_buttons_i">4</td> <td class="calculator_buttons_i">5</td> <td class="calculator_buttons_i">6</td> <td class="calculator_buttons_i">-</td> </tr> <tr> <td class="calculator_buttons_i">1</td> <td class="calculator_buttons_i">2</td> <td class="calculator_buttons_i">3</td> <td class="calculator_buttons_i">*</td> </tr> <tr> <td class="calculator_buttons_i" colspan="3">=</td> <td class="calculator_buttons_i">/</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> |
Теперь опишем логику калькулятора
// Опишем логику калькулятора var Calculator = Widget.extend(function() { this.display = ''; // Калькулятор имеет дисплей }); // калькулятор умеет нажиматься на цифры Calculator.prototype.pushNumber = function(number) { }; // калькулятор умеет нажиматься на "плюс" Calculator.prototype.pushPlus = function() { }; // калькулятор умеет нажиматься на "минус" Calculator.prototype.pushMinus = function() { }; // калькулятор умеет нажиматься на "умножить" Calculator.prototype.pushMultiply = function() { }; // калькулятор умеет нажиматься на "делить" Calculator.prototype.pushDivide = function() { }; // калькулятор умеет нажиматься на "равно" Calculator.prototype.pushEqually = function() { }; |
Возникает вопрос, где описывать те самые рычажки за которые будет оболочка дергать логику а логика оболочку? Конечно же в структуре, ОПИШЕМ ЭТИ СВЯЗИ:
<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> |
ТЕПЕРЬ ВСЕ ВМЕСТЕ:
<!-- подключаем скрипты --> <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> |
Часовой пояс GMT +3, время: 19:25. |