Форум

Malleys · #11 (**permalink**) 13.06.2019, 00:41

Сообщение от ethereal

Это framework. Я не хочу менять что бы не испортить что то.

Так выберите качественный framework, при помощи которого вы сможете решать такие задачи легко... Например, React.js, высокий уровень использования, высокий уровень удовлетворённости. Это технология, которую можно спокойно использовать.

Сложно ли выучить новый framework? На самом деле нет, вот, например, μ-framework hyperapp, я о нём ещё 20 минут назад ничего не знал, решил посмотреть в интернете, какие есть, и был приятно удивлён разнообразию. hyperapp позволяет декларативно описать ваш интерфейс. Легко расширяется при помощи JSX. Ваш пример с использованием hyperapp...

<!DOCTYPE html>
<html lang="en">
<body>
	<div id="app"></div>
	<style>
		ul>li:not(.show) {
			text-decoration: line-through;
		}
	</style>
	<script type="module">
		import { h, app } from "https://unpkg.com/hyperapp@2.0.0-beta.22/src/index.js";
		
		const items = ["text 1", "text 2", "text 3", "text 4"];
		
		app({
			init: () => false,
			view: state => h("ul", {}, items.map(item =>
				h("li", {
					class: state ? "show" : "",
					tabIndex: 0,
					onFocus: state => true,
					onBlur: state => false
				}, item))
			),
			node: document.getElementById("app")
		})
	</script>
</body>

</html>

Насчёт jQuery, те кто его используют, ощущают низкий уровень удовлетворённости. jQuery является технологией, которую лучше избегать в настоящий момент.

рони · #12 (**permalink**) 13.06.2019, 01:16

Malleys,

рони · #13 (**permalink**) 13.06.2019, 12:03

Malleys,
спасибо за hyperapp, но никак не пойму зачем менять DOM по каждому клику, если нужно изменить только класс и чем плохо jQuery?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
        ul>li:not(.show) {
            text-decoration: line-through;
        }
        ul>li:focus{
            outline: none;
        }

    </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
$(() =>{
  const items = ["text 1", "text 2", "text 3", "text 4"],
        html = items.map(text => $("<li>",{tabIndex: 0, text})),
        li = $("<ul>", {html})
        .replaceAll("#app")
        .on("focusin focusout", "li", ({type}) => li.toggleClass("show", type == "focusin")).
        find("li");
});
  </script>
</head>

<body>
<div id="app"></div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript