Цитата:
|
Цитата:
Дерево можно хранить в 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, время: 15:18. |