| iKillMaxmaxmaximus | 26.06.2013 00:03 |
Лол это вазе чо такое)? Это нативно будет или чо? Это же ваще ад
web components
Web components нуждаетесь ли вы в них ?
|
Не могу сказать, что жду как манну небесную, но штука прикольная.
|
необъективный опрос, нужно еще два варианта
|
Цитата:
|
не понятно о чем вопрос:
- о стандартизации - ангуляре По большому счету они (веб-компоненты) уже существуют. Разница лишь в том, что у каждого разработчика свой подход к реализации. |
UI например
а вообще у меня вопрос, что такое шадоу дом я не понял, эт он типа не рендерится или чо? |
Лол это вазе чо такое)? Это нативно будет или чо? Это же ваще ад
|
Цитата:
|
Цитата:
|
kobezzza, кстати скоро покажу няшную версию UI 0.7 которая почти дотягивает до ангуляра по функционалу не хватает только шаблонов. но КАК это сделано, с ангуляром не сравнить я лучшего шаблонизатора чем свой вообще ни где не видел.. собственно поэтому и начал его делать) лол
|
Цитата:
Вопрос скорее об идеи заменить стандартные теги своими собственными, при этом ваши теги будут обладают логикой как сейчас jQuery плагины. список технологий растёт шустро от гугла angular, native/polimer, dart webcomponents от мозиллы x-tag, Цитата:
В принципе при поддержки Polimer веб компоненты по стандарту W3C уже могут работать на Chrome Android, Chrome, Canary, Firefox, IE 10+, Safari 6+, Mobile Safari с учётом миграции оперы на webkit думаю и там всё будет ок. |
Мой пост не об ангуляре конкретно, а о том что происходит с веб разработкой вообще.
Цитата:
|
Цитата:
Цитата:
 |
Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
<элемент пошли_все_нафиг_я_самостоятельный="1"> </элемент> :) |
выглядит многообещающе
<element name="my-megabutton" extends="button" constructor="MegaButton">
<template>
<button><content></content></button>
</template>
<script>
MegaButton.prototype = {
megaClick: function(e) {
play('moo.mp3');
}
};
</script>
</element>
http://html5-demos.appspot.com/stati.../index.html#63 http://html5-demos.appspot.com/stati.../index.html#66 |
Угу мне тож нравится, я через pollyfill баловался, фурычит на всех современных браузерах.
Кстатии еще давным давно на IE 5 Можно было сделать вот такую штуку Почти что тоже компонент :)
<html xmlns:b="http://xyz.ru/">
<style type="text/css">
b\:spacer{
display: inline-block;
width: expression(this.width+'px');
height: expression(this.height+'px');
}
</style>
Привет <b:spacer width="200" height="1"></b:spacer>Всем
</html>
|
Цитата:
|
Цитата:
Лишний раз пропиарю своеобразные веб компоненты на jQuery, которые работают уже сейчас. Выглядеть будут так
<demotivator id="t1" title="Узбагойтесь" subtitle="Сделаем вовремя">
<img src="http://im2-tub-ru.yandex.net/i?id=137949638-61-72&n=21"/>
</demotivator>
А работать так
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"> </script>
</head>
<body>
<style>
demotivator{
background-color:black;
display:block;
color:white;
width:250px;
padding:10px;
}
demotivator img{
width:100%;
}
demotivator h1{
text-align:center;
margin:0px;
}
demotivator h2{
text-align:center;
margin:0px;
}
.red{
background-color:red;
}
</style>
<script>
$(function(){
//функция шаблонизатор
function template(data){
return "<h1>"+data.title+"</h1>"+
"<h2>"+data.subtitle+"</h2>"
}
//конструктор плагина
var Plugin=function(el){
el.append(
template({
title:$(el).attr('title')||"",
subtitle:$(el).attr('subtitle')||""
})
);
this.el=el;
}
// прототип плагина
Plugin.prototype={
//демонстрационный метод
red:function(){
this.el.addClass('red');
}
}
//автоматическое создание
$('demotivator').each(function(){
$(this).data('widget', new Plugin( $(this) ) );
})
})
//Тест управления виджетом из вне.
$(function(){
$('#btn1').click(function(){
$('#t1').data('widget').red();
})
})
</script>
<demotivator id="t1" title="Узбагойтесь" subtitle="Сделаем вовремя">
<img src="http://im2-tub-ru.yandex.net/i?id=137949638-61-72&n=21"/>
</demotivator>
<button id="btn1"> Волшебная кнопка </button>
<demotivator id="t2" class="red" title="Уcпакойтесь" subtitle="Сделаем вовремя">
<img src="http://im2-tub-ru.yandex.net/i?id=137949638-61-72&n=21"/>
</demotivator>
</body>
</html>
|
Цитата:
 |
x-repeat (demo)
На днях вернулся к теме веб-компонет. Сделал простой репитер :)
С помощью изменения значения атрибута элемента можно менять кол-во выводимых шаблонов:
<x-repeat count="1">
<!-- html here -->
</x-repeat>
Полный код страницы
<!DOCTYPE html>
<html>
<head>
<title>Web Components: Hello World</title>
<meta charset="utf-8">
<!--<script src="../../node_modules/babel/browser-polyfill.js"></script>-->
<!--<script src="../../node_modules/webcomponents.js/webcomponents.min.js"></script>-->
</head>
<body>
<h1>Web Components: Hello World</h1>
<hr/>
<section>
<h2>Template</h2>
<x-repeat count="1" id="test-repeat">
<span>test_1</span>
<span>test_2</span>
</x-repeat>
</section>
<hr/>
<section>
<h2>Controls</h2>
<label>count</label>
<input type="number" value="1" id="test-input"/>
</section>
<script src="script.js"></script>
<script src="HtmlXRepeatElement.js"></script>
</body>
</html>
Класс, описывающий компонет выглядит так
const TAG_NAME = `x-repeat`;
export default class HtmlXRepeatElement extends HTMLElement {
// [url]https://learn.javascript.ru/webcomponent-core#жизненный-цикл[/url]
render() {
var count = Number(this.getAttribute('count')) || 0;
var fragment = document.createDocumentFragment();
this.innerHTML = null;
for(var i = 0; i < count; i++) {
fragment.appendChild(this.__getTemplate());
}
this.appendChild(fragment);
}
createdCallback() {
// 1: save template
this.__saveTemplate();
}
attachedCallback() {
//2:
this.render();
}
detachedCallback() {
this.__clearTemplate();
}
attributeChangedCallback(name, prevValue, newValue) {
this.render();
}
__saveTemplate() {
var fragment = document.createDocumentFragment();
var childNodes = this.childNodes;
while(childNodes[0]) {
fragment.appendChild(childNodes[0]);
}
this.__template = fragment;
}
__getTemplate() {
return this.__template.cloneNode(true);
}
__clearTemplate() {
this.__template = null;
}
static register(document) {
document.registerElement(TAG_NAME, {
prototype: HtmlXRepeatElement.prototype
});
}
}
Рабочая песочница (es5) (Хром, наверно...). Код es6 + модуль можно посмотреть там же. Разумеется, вся прелесть в том, что таких элементов
<x-repeat count="1">
<!-- html here -->
</x-repeat>
с разным содержимом можно навтыкать на странице сколько угодно) |
Поддержка браузерами с учетом полифилов
Т.е. с приходом веб компонет становятся ненужными React, Angular и прочие. Вероятно, jQuery тоже. TODO: написать TODO list :) |
Цитата:
|
nerv_,
Цитата:
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 14:43. |