asp.net - 在重用和逻辑封装方面使用 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# 开发人员，我的想法主要是面向对象的，而 jQuery 是非常过程化的。我了解匿名函数的概念，但总的来说，我的想法仍在尝试制作一个域模型，该模型抽象 UI，然后声明属性或方法。但我真的不确定这是否是 JavaScript 中的方式。还是我太理想了，或者我太努力了，想做出一些不应该是 OO OO 的东西？所以问题是:

• 我是否应该开始使用 JavaScript 原型(prototype)来封装/调整函数并使其更像 OO？以便可以封装 HTML 控件或行为以供重用？
• 或者我应该开始将逻辑封装到 jQuery 插件中吗？但这样代码将 100% 依赖于 jQuery。
• 或任何其他方法？

谢谢。

更新: 我刚找到这个slide这似乎是一个很好的起点。 这也是一个good example我刚刚发现的。还有一个good tutorial由 jQuery 的创造者。

Answer 1

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

这有以下好处

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

我仍然在其中使用 Jquery。

举个例子，如果我有一个基于 javascript 的 widgit，我想使用它，我会创建一个名为 widget 的“对象”，并将其保存在 Widget.js 文件中。小部件对象将具有实例变量、构造函数和公共(public)、私有(private)方法，就像在任何其他 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();