Лучший способ спроектировать JavaScript код UI с ASP.NET с точки зрения повторного использования и логики encapulation?
Я испытываю затруднения при успокаивании к надлежащей практике для UI кодирования JavaScript. Таким образом, я ищу более умный способ сделать вещи. Я использовал jQuery с ASP.NET, и я делал вещи как, ниже которого кажется непрофессиональным и немым. JavaScript программирование UI всегда был таинственным мне. Я знаю, как сделать это, но я никогда не знал, как сделать это правильно.
$(function(){
$('submit').click(function() {
//behaviors, setup styles, validations, blah...
});
});
Проблемы:
- Дублирования кода часто поэтому более трудно поддержать и снова использовать
- С ClientIds сгенерированы ASP.NET, трудно вытянуть блоки кода в отдельные js файлы
- Общие декларации помещаются на основных страницах, однако документ jQuery, готовая функция появляется почти на любых страницах также
Цели:
- Независимая библиотека/платформа JavaScript, так, чтобы было легче переключить платформы в будущем
- Инкапсулируйте/модулируйте логику для легкого повторного использования, так, чтобы на каждой странице, это только были несколько простых строк кода инициализации
- Разделение опасений за легкое обслуживание и удобочитаемость
Вопросы:
Будучи разработчиком C# главным образом моими взглядами является очень OO, и jQuery является очень процедурным. Я понимаю понятие Анонимной функции однако в целом, мой ум все еще пытается сделать модель предметной области, которая абстрагирует UI, затем объявляет свойства или методы. Но я действительно не уверен, является ли это путем в JavaScript. Или я слишком идеален, или я пытаюсь слишком трудно сделать что-то, как что это, как предполагается, не является OO OO? Таким образом, вопросы:
- Я должен начать инкапсулировать/модулировать функции с помощью прототипа JavaScript и делать его немного большим количеством OO как? Так, чтобы средства управления HTML или поведения могли инкапсулироваться для повторного использования?
- Или должен я запускаться инкапсулировать логики в плагин jQuery? Но этот путь код будет на 100% зависеть от jQuery.
- Или какие-либо другие подходы?
Спасибо.
Обновленный: Я просто нашел этот слайд, и это, кажется, хорошая начальная точка. Это - также хороший пример, который я просто нашел. И хорошее учебное руководство создателя jQuery.
4 ответа
Лучший метод, который я нашел для повторного использования кода, работы с идентификаторами клиентов и т.д., - это внедрение более объектно-ориентированного подхода в мой Javascript.
Это дает следующие преимущества
- Легче ввести область видимости и несколько экземпляров одного и того же на одной странице
- Легче управлять фарсом с идентификаторами клиента
Я все еще использую JQuery в этом.
Чтобы привести пример, у меня был виджит на основе javascript. хотел использовать, я бы создал «объект» под названием widget и сохранил его в файле Widget.js. Объект виджета будет иметь переменные экземпляра, конструктор и общедоступные частные методы, как и в любом другом языке OO, например, Widget.js будет выглядеть как
// constructor
function Widget(aFooId,bBarId)
{
// instance variables
var fooId = aFooId;
var barId = bBarId;
// some magic to expose public methods
this.Init = Init;
// public methods
function Init()
{
alert("called init");
}
//private methods
function PrivateMethod()
{
}
}
Вызов на странице aspx будет выглядеть как
var widgetInstance = new Widget("<%=Foo.ClientId%>",<%=Bar.ClientId%>);
widgetInstance.Init();
The ClientId issue is a known one and tough to get around. ASP.NET 4.0 is introducing a ClientIDMode that will let you have some finer-grain control over the final id rendered. ASP.NET MVC would definitely make your client scripting life a lot easier. If this is causing you a lot of grief and waiting for ASP.NET 4.0 or going with ASP.NET MVC are viable options, I would explore those alternatives.
Нет ничего плохого в том, чтобы иметь зависимость от jQuery, он становится де-факто стандартом для клиентских сценариев, и это лучше, чем иметь слишком много абстракций в вашем коде. Таким образом, использование подключаемых модулей jQuery - хороший способ разбивки на модули.
Вы можете обойти проблему ClientId, используя ASP.NET 4.0 (как предлагает Кевин П.) или ссылаясь на элементы, используя 'заканчивается на' подобный селектору
$('input[id$=_ProductName]
, который соответствует концу атрибутов идентификатора, поэтому он будет соответствовать
<span id="ctl00_MyHeader_ProductPanelPlaceholder_ProductName">
, даже если идентификаторы содержащихся элементов управления изменятся.
I thing LiveUI web framework is exactly what are you looking for, please take a look at http://www.codeproject.com/KB/custom-controls/jquery-datepicker-aspnet.aspx