Чуть больше года назад мое внимание привлек один сайт. На первый взгляд он ничем не отличался от сотен подобных сайтов, но мой коллега заметил множественные обновления небольших модулей при нажатии на функциональные элементы.
Еще одним открытием стало то, что он работает без перегрузок.
Сегодня ни на кого из нас это не произведет большого впечатления, но этот сайт работает уже более 5 лет. После двухдневного анализа сайта мы нашли ответ на вопрос – «Как это работаетЭ» «Центром этого сайта был файл под названием мсаджакс.
js, что побудило нас поискать в Интернете.
Информации было мало, но достаточно, чтобы начать экспериментировать.
Эта библиотека предоставляет набор классов для создания небольших элементов, из которых потом можно собрать полноценный сайт. Чтобы подключить его, просто добавьте его на страницу Менеджер сценариев и зарегистрируйтесь у него Ссылка на сценарий для всех наших файлов.
Приступим к созданию небольшого элемента.
Наш элемент состоит из конструктора и набора методов.Type.registerNamespace('MyNamespace'); // ctor MyNamespace.Widget = function (element, someData) { var t = this; t.template = "<span><label></label></span>"; if (!element) { element = $(t.template); } MyNamespace.Widget.initializeBase(t, [element]); }; //methods MyNamespace.Widget.prototype = { initialize: function () { var t = this; MyNamespace.Widget.callBaseMethod(t, 'initialize'); }, dispose: function () { var t = this; MyNamespace.Widget.callBaseMethod(t, 'dispose'); }, someMethod: function(){ var t = this; } }; MyNamespace.Widget.registerClass('MyNamespace.Widget', Sys.UI.Control);
Конструктор вызывается при попытке создать экземпляр элемента и всегда принимает его в качестве первого параметра.
элемент , это элемент DOM, в котором он будет отображаться.
Далее вызывается инициализация базового класса.
В данном случае это Sys.UI.Control , который мы указали при вызове регистркласс .
Этот метод может принимать интерфейс в качестве третьего параметра, но об этом в следующий раз, если кому-то будет интересен этот пост. В наборе методов всегда есть два метода инициализировать И распоряжаться Из названия понятно, чем они занимаются и описывать их не вижу смысла, могу сказать, что обычно я в инициализировать Я создаю обработчики событий и заполняю нужные мне элементы, а в распоряжаться Описываю логику удаления элемента из ДОМ и отписаться от различных событий.
Мы также можем описать различные методы, которые будут доступны через созданный экземпляр.
Сдавать элемент возможно, используя метод $получить который принимает имя атрибута идентификатор HTML-элемент. Global.widget = new MyNamespace.Widget($get("ID"));
Global.widget.initialize();
Я думаю, что самым большим преимуществом является метод get_element() класса Sys.UI.Control , это позволяет нам работать с нашим элементом как с отдельной сущностью: initialize: function () {
var t = this;
.
$("label",t.get_element()).
html("Hello world!");
}
Мы работаем не со всеми ДОМ , но с небольшой его частью, что только положительно влияет на скорость работы сайта.
В этой библиотеке есть еще один замечательный класс Сис.
EventHandlerList , который можно использовать в качестве хранилища для функций обратного вызова.
BaseControl = function (element) {
var t = this;
BaseControl.initializeBase(t, [element]);
t.handlers = new Sys.EventHandlerList();
};
BaseControl.prototype = {
initialize: function () {
var t = this;
BaseControl.callBaseMethod(t, "initialize");
},
dispose: function () {
var t = this;
t.handlers = null;
BaseControl.callBaseMethod(t, "dispose");
},
addEventHandler: function (name, h) {
var t = this;
t.handlers.addHandler(name, h);
},
removeEventHandler: function (name, h) {
var t = this;
if (t.handlers) {
t.handlers.removeHandler(name, h);
}
},
raiseEventHandler: function (name, args) {
var t = this;
var h = t.handlers.getHandler(name);
if (h) h(args);
}
};
BaseControl.registerClass("BaseControl", Sys.UI.Control);
Наследуя этот класс, мы позволяем нашему элементу уведомлять всех подписчиков об изменениях своего состояния.
Способ вызова абонентов добавитьEventHandler подписаться на интересующее их событие, указав его название.
Здесь есть небольшие трудности, нельзя просто передать ссылку на метод, нужно создать делегат с помощью Function.createDelegate и передать это дальше.
Если мы этого не сделаем, все элементы этого класса получат сообщение об изменении состояния объекта, а мы не преследуем такую цель.
И на последок эти делегаты нужно удалить, иначе вы будете наблюдать непонятное поведение элементов на вашем сайте.
С помощью этой библиотеки моя команда реализовала сайт с очень богатым функционалом и получила очень достойные результаты.
Теги: #ASP.NET #Ajax #.
NET #ASP #ASP
-
Файловая Система Esp32 И Spiffs.
19 Oct, 24 -
Человек, Который Изобрел Стерео
19 Oct, 24 -
Windows Лазурь. Новинки Ноября 2011 Г.
19 Oct, 24
