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

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.
• 还是其他方法？

谢谢.

更新:我刚刚发现这张幻灯片,这似乎是一个很好的起点.这也是我刚刚发现的一个很好的例子.这是jQuery创建者的一个很好的教程.

Answer 1

我发现的用于代码重用、处理客户端 ID 等的最佳技术是在我的 Javascript 中引入一种更加面向对象的方法。

这样做有以下好处

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

我仍然在其中使用 Jquery。

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