Рубрика «javascript» - 408

в 11:08, , рубрики: javascript, jquery, Matreshka, Matreshka.js, альтернативный фреймворк, Веб-разработка

Введение
Наследование
MK.Object
MK.Array
Matreshka.js v0.1
Matreshka.js v0.2
Реализация TodoMVC

Всем привет! В этом кратком посте, представляю на суд общестивенности долгожданную реализацию «Hello, world на стероидах» — TodoMVC на базе фреймворка Матрешка.
Matreshka.js — долгожданная реализация TodoMVC
Напомню, одной из идей Матрешки является удобное связывание данных и HTML элементов с помощью простых функций, которое имеет следующие преимущества перед решением той же задачи в других фреймворках:
1. Никакой логики в HTML коде. Мне, как человеку, который с трепетом относится к JavaScript и HTML, хотелось бы, чтоб язык программирования так и остался языком программировния, я язык разметки — языком разметки.
2. Не нужно отдельно слушать события данных, для того, чтоб обновить UI, и слушать события UI для того, чтоб обновить данные. Это возволяет избежать ошибок, типа «забыл повесить обработчик», так как не приходится хранить в голове несколько сущностей сразу. Вы задаёте правила, как данные синхронизируются с видом, а дальше работаете исключительно с данными.

this.bindElement( 'x', 'select.my-select' );

Подробности в статьях по ссылкам выше.

TodoMVC — эталонное приложение, включающее в себя наиболее распространенные и «неудобные» задачи, у которого есть спецификация и которое призвано помочь программисту выбрать понравившийся фреймворк. На одноименном сайте размещен список реализаций приложения, используя самые популярные фреймворки. На github проекта — больше (папка labs).

Реализацию приложения на базе Матрешки можно посмотреть здесь. А по этой ссылке — исходный код с аннотациями. Для тех, кто предпочитает русский язык английскому, прошу сюда.

Приложение, как вы можете видеть, состоит из трех файлов:
app.js — инициализация глобальных переменных (требуемых спецификацней TodoMVC) и приложения.
todos.js — само приложение (список дел) и коллекция этих дел. Включает в себя основную часть логики приложения и реакцию интерфейса. Там можно увидеть специальный переопределяемый метод itemRenderer, который возвращает HTML узел (или HTML строку), являющийся HTML узлом модели. Напомню, масссив можно менять: добавлять, удалять элементы, сортировать (с помощью методов, позаимстсованных из Array.prototype), UI будет реагировать смотстоятельно, без вмешательства разработчика.
todo.js — элемент коллекции (пункт списка дел).
Читать полностью »

в 6:52, , рубрики: $emit, $rootScope, angular, AngularJS, javascript, инициализация, событие

Если вы уже знаете, что такое AngularJS и пользуетесь им продолжительное время, вероятно перед вами уже стояла задача выполнения неких действий сразу после инициализации приложения. И после прочтения документации вы обнаруживаете, что такого способа “из коробки” нет)
Читать полностью »

в 17:34, , рубрики: CDN, DNS, javascript, Qbaka, Анализ и проектирование систем, ит-инфраструктура, Сетевые технологии

Сегодня один из старейших регистраторов R01 объявил о сбое в DNS.
В связи с этим хочу рассказать вам маленькую поучительную историю о том, как это едва не убило нашу компанию.

По роду деятельности мы saas-аналитика для веба. Наше основное оружие — javascript файл, который собирает статистику. Файл раздается на множество сайтов наших пользователей, поэтому мы обязаны обеспечить его безупречную стабильность, недоступность нашего сайта не должна никак влиять на сайты наших клиентов. И мы потратили много сил на то чтобы обеспечить полную стабильность: положили скрипт в отличный мощный CDN, сделали свой домен, чтобы абстрагировать этот CDN (чтобы можно было в любой момент сменить CDN, если он даст сбой или станет слишком дорогим). Но не учли одну мелочь: DNS-сервер находился у регистратора.
Читать полностью »

в 16:03, , рубрики: dalek.js, javascript, JS, nodejs, Веб-разработка, тестирование, тестирование веб-приложений, фронтенд

Вы знаете, что такое Selenium и/или PhantomJS? И с чем их едят? Тогда, возможно, вам будет интересен проект Dalek.js — кроссбраузерная утилита для тестирования веб-приложений.

Dalek.js позволяет писать тесты, которые ходят по веб-страничкам, щелкают ссылки, заполняют формы, отправляют данные и делают скриншоты. То же самое и даже больше делают тесты, написанные с использованием Selenium'а или Phantom.js, в чем подвох?

Читать полностью »

в 11:03, , рубрики: ajax, javascript, php, session_write_close
Небольшая предыстория.

У меня есть хобби-проект трекер.ру
Алгоритм такой: пользователь вводит поисковый запрос, этот запрос «на лету» ищет торренты на сторонних трекерах (рутор, рутрекер, tfile и тд).
Для параллельного поиска идет одновременно несколько аякс запросов, которые должны обработаться асинхронно.
Однако, запросы выполнялись синхронно. Если какой-то трекер долго не отдавал ответ, то остальные запросы подвисали и ждали ответа от подвисшего трекера. Общее время выполнение запросов равнялось сумме всех запросов. Хотя, по моим планам общее время должно было равняться самому долгому запросу.
Долго ломал голову, почему так. Грешил на HTTP pipelining. Но, причина оказалась намного банальней. Все дело в сессиях. Дело в том, что сессии в php консистентны и php не даст обратиться другому процессу к уже занятой сессии.
Читать полностью »

в 6:37, , рубрики: bookshelf.js, express.js, javascript, node.js, введение, обзор

В течение последних трех лет можно было заметить всплеск популярности JavaScript. На протяжении многих лет, были многочисленные попытки принятие этого популярного языка на сервере. Наиболее удачный попыткой является платформа Node.js, которая была представлена как быстрый способ написания серверных приложений.

В результате люди начали использовать back end разработку с помощью Node. Одна из самых важных вещей back end системы эффективное взаимодействие с базой данных. Для этого используется ORM( объектно-реляционного отображение). ORM упрощает разработку, позволяет программисту взаимодействовать с базой данных используя объекты. В этой статье мы рассмотрим ORM библиотеку для Node.js — Bookshelf.js.
Читать полностью »

в 3:34, , рубрики: AngularJS, javascript, user experience, Блог компании EastBanc Technologies, оптимизация

Дорогие Хабролюбители, всем привет! Не откроем Америку если скажем, что существуют сотни плагинов и библиотек, которые облегчают специализированные задачи, связанные с построением современных web интерфейсов. Angular один из них, про его производительность писалось много и в большинстве случаев даются рекомендации чего не нужно делать, чтобы все было хорошо.

Основное аргумент, сторонников — медленно работают неправильные приложения, а вот правильные не должны содержать более 2000-3000 элементов. Если содержит больше значит что-то не так. См. например http://iantonov.me/page/angularjs-osnovy.

Аргумент в общем вполне здравый, но всегда есть ситуации, когда нужно написать «неправильное» web приложение потому, что такие требования. В этой статье мы решили рассказать, как раз про такую задачу, и как мы ее решили. На наш взгляд статья будет полезна в большей степени профессиональным веб разработчикам. Итак, наша задача была сделать календарь для системы бронирования для одного спортивного клуба. Календарь отображает семь 12 – часовых блоков, каждый день из которых разделен на 15 минутные интервалы. В блоке может быть от 2-х до 10 DOM элементов. Вроде ничего не предвещало беды, верхняя граница ~3000.
Читать полностью »

в 11:23, , рубрики: development, front-end, javascript, library, parse, plugin, url, web-разработка

image

Доброго времени суток, уважаемые читатели!

Возникла передо мной сегодня задача генерации GET-параметров и всего URL в целом, на стороне клиента, прям вот щас, без возможности «поговорить» с сервером. Сразу оговорюсь, про этот пост я узнал вот прям перед написанием данной статьи ибо сначала закончил писать, а потом уже прибег к поиску, да и пост тот — не со всем про то же самое, что у меня.

Итак, к делу.

Задача и проблемы

Проблемы — те же что и в посте, который я привел выше:

  • Невозможность использовать window.location для «приготовления» URL;
  • Нельзя работать сразу с несколькими window.location в силу политики безопасности браузеров;
  • Отсутствие известных готовых решений ( да и сейчас, уже апосля, я не нашел подобного кода )

Задачи которые я поставил перед собой:

  • Удобный синтаксис
  • Возможность как читать части URL так и изменять их
  • Работа с GET-параметрами
  • Кроссбраузерность и универсальность

Писал я на чистейшем JavaScript, причем без использования prototype.__defineGetter__ или prototype.__defineSetter__ в угоду кроссбраузерности ибо IE < 9 такого не умеет. Более подробно про getters/setters написано в этом посте.

Для тех кому интересно — сядем разберем, а кому надо готовое решение — милости прошу в конец поста, ссылки на скачивание — там.

Приступим! Раньше сядем — раньше выйдем.
Читать полностью »

в 7:42, , рубрики: game development, hate flash, html5, javascript, JS, node.js, Веб-разработка, игра, ненавижу флэш

Node.js + HTML5 + js = online action game

Давно задавался вопросом, а почему же написание онлайн игр на node.js является таким редким явлением, особенно на хабре?
Ведь какие дифирамбы пели ноде при ее появлении, и сколько пророчили хорошего (или нехорошего) сей платформе, а новых продуктов что-то не сильно прибавляется.

Я решил проверить, действительно ли такой подход и игростроению обречен на провал, и почему. Скажу сразу, результаты меня обнадежили!
Под катом подробности и проблемы, с которыми я столкнулся в процессе разработки.
Читать полностью »

в 6:38, , рубрики: javascript, jquery, Matreshka, Веб-разработка

Всем привет. Представляю очередное обновление фреймворка Matreshka.js до версии 0.2. Напомню: Матрешка — фреймворк общего назначения с окрытым исходным кодом, в идеологию которого положено доминирование данных над внешним видом: вы задаёте правила, как интерфейс должен синхронизированться с данными, затем работаете исключительно с данными, кроме случаев, когда событие интерфейса не касается данных (например, щелчек по кнопке или сабмит формы, сами по себе, не меняют данные, а запускают функцию, которая, в свою очередь, работает с данными).

Пример

Матрешка позволяет довольно просто связать данные и элементы представления (например, свойство объекта и значение поля ввода), не заботясь о дальнейшей синхронизации данных и представления. Например, самая простая привязка выглядит так:

<select class="my-select">
	<option>1</option>
	<option>2</option>
	<option>3</option>
</select>

Создаем экземпляр:

var mk = new Matreshka();

Связываем свойство x с элементом .my-select:

mk.bindElement( 'x', '.my-select' );

Меняем данные

mk.x = 2;

После того, как мы присвоим свойству x другое значение, остояние элемента изменися соответствующим образом.
Взгляните на живой пример

Другой важной чертой матрешки являются события (в том числе и кастомные). Например, Матрешка умеет отлавливать изменение значения свойства:

mk.on( 'change:x', function( evt ) {
	alert( 'x изменен на ' + evt.value );
});

Код выведет "x изменен на Привет":

mk.x = 'Привет';

Подробнее об этих и других фичах смотрите по ссылкам выше.

Ссылка на сайт Матрешки. Ссылка на github репозиторий.

Поддержка AMD

Матрешка теперь моддерживает спецификацию определения асинхронных модулей, Asynchronous Module Definition. Другими словами, Матрешка совместима с библиотеками, типа requirejs. Это значит, что теперь можно писать тру-код, не гадящий в глобальное пространство имен. Поддерживается два типа подключения: запрос именованного модуля и запрос безымянного модуля.

Именованные модули:

requirejs.config({
	paths: {
		xclass: 'path/to/matreshka',
		matreshka: 'path/to/matreshka'
	}
});
require(['xclass', 'matreshka'], function(Class, MK) {
	return Class({
		'extends': MK
		//...
	});
});

Но это, скорее, побочный эффыект использования новой файловой структуры проекта. А рекомендованный способ — запрос безымянного модуля:

require(['path/to/matreshka'], function( MK ) {
	return MK.Class({
		'extends': MK
		// ...
	});
});

Как видете, Матрешка содержит свойство Class, которое дублирует функцию, создающую классы: нет нужды запрашивать дополнительный модуль.
Читать полностью »

1...1020...407408409...420430...577
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js