0

我需要设计如何在现有的大型 .NET Web 窗体应用程序中实现 JavaScript 模块模式。目前没有规则，很多 JavaScript 代码使用全局变量。问题还在于服务器和 JavaScript 客户端代码之间的通信，目前许多 JavaScript 函数是从代码隐藏类调用并内联到页面中的。

当前 JavaScript 使用示例

服务器控件将指向某个 JavaScript 文件的链接添加到<head>元素，以便将其下载。该文件包含一个或多个全局函数。然后服务器控制调用的 this 全局函数在需要时调用它们，如下所示：

string script = string.Format("GlobalFunction1('{0}');", param);

这个字符串被插入到<body>HTML 元素中的某个地方。没有规则，服务器可以在需要时调用任何全局函数。

改进的主要目标是：

  • 将服务器端代码与客户端 JavaScript 分开。这意味着对 JavaScript 全局函数没有混乱的内联调用。
  • JavaScript 自运行模块，它们不相互依赖。
  • JS 模块不应该将任何东西暴露给全局范围。
  • 每个 JS 模块只有一个地方来初始化自己。
  • 服务器端应该能够为 JS 模块初始化填充一些参数。
4

1 回答 1

0

这是我带来的方法：

在服务器端会是什么样子

  • 每个控件都有自己的 JavaScript 模块
  • 每个 Control 都包裹在其根<div>元素中。
  • 服务器可以在每个页面生命周期中调用此辅助方法：ScriptModule.AddParam("param_name", "param_value");此参数将pre_render作为 HTML5 的data-属性在事件调用时添加到控件的包装器（div）中。
  • 最后，服务器用ScriptModule.Register("module_name", "path_to_js_file", "controlWrapperId").

这会导致 HTML 中的这些步骤：

  • <script>文件 ( path_to_js_file) 被插入到链接到所需模块文件的页面中。
  • 参数通过data-属性添加到Control的包装器（div）中。
  • 在页面的末尾Core.start("module_name", "controlWrapperId");插入了内联，这开始了模块的初始化。此方法稍后在客户端部分讨论。

在客户端会是什么样子

下载的第一个文件是Core.js文件，它注册了一个用于定义新模块的全局变量Core 。

每个 JavaScript 文件都将被定义为模块。该模块不应该向全局范围公开任何内容，并且应该是自我运行的。模板如下：

// 1. first param is module's name
// 2. than the array with dependencies to helpers modules
// 3. than the callback with following parameters
//    a. jQuery object which references wrapper (i.e. div) of this module
//    b. params hash-object, which contains server parameters from wrapper's -data attributes in format
//       {  'param1_name': 'param_val',
//          'param2_name': 'param2_val'  }
//    c. then the external dependencies to helper modules
Core.htmlModule('mod name', ['external', 'deps'], function ($w, params, external, deps) {
    // Here the module initializes itself
    // it can communicate with other modules through Core.publish(); Core.subscribe();
    // it does not return anything, because it is HTML module and so it does not expose anything
});

第二个参数定义了所谓的帮助模块，用于代码重用。由于普通模块的独立性和无法将某些功能暴露在外部，因此需要共享相同的代码。这可以通过定义帮助模块来实现，该模块可以公开其一些属性，然后从普通模块中引用。

于 2013-09-16T06:10:13.847 回答