Question

我无法适应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。
或任何其他方法？

谢谢。

更新：我刚发现这个slide，这似乎是一个很好的起点。这也是我刚发现的good example。和jQuery的创建者good tutorial。

Answer 1

ClientId问题是一个众所周知的问题，很难解决。 ASP.NET 4.0引入了一个ClientIDMode，它可以让你对渲染的最终id有一些更精细的控制。 ASP.NET MVC肯定会让您的客户端脚本编写生活更轻松。如果这引起了很多的麻烦并且等待ASP.NET 4.0或者使用ASP.NET MVC是可行的选择，我会探索这些替代方案。

Answer 2

我在代码重用，处理客户端ID等方面找到的最好的技术是在我的Javascript中引入一种更加面向对象的方法。

这有以下好处

更容易在同一页面上引入范围和同一事物的多个实例
更容易管理客户端ID闹剧

我仍然在其中使用Jquery。

所以举一个例子，如果我有一个基于javascript的widgit我想利用我会创建一个名为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();

Answer 3

依赖jQuery没有任何问题，它已经成为客户端脚本的事实标准，而且比代码中有太多的抽象更好。所以使用jQuery插件是一种模块化的好方法。

您可以使用ASP.NET 4.0（如Kevin P建议）解决ClientId问题，或者使用'ends-with'选择器引用元素

$('input[id$=_ProductName]

匹配ID属性的结尾，因此匹配

<span id="ctl00_MyHeader_ProductPanelPlaceholder_ProductName">

即使包含控件的ID发生更改。

Answer 4

我的东西LiveUI web框架正是你在找什么，请看看 http://www.codeproject.com/KB/custom-controls/jquery-datepicker-aspnet.aspx

在重用和逻辑封装方面使用ASP.NET构建JavaScript UI代码的最佳方法是什么？

4 个答案: