我继承了一个遗留的JS多页应用程序，并且正在考虑将其代码迁移到现代模块化Javascript的想法：
实际上，使用这些技术开始新项目似乎比迁移旧样式要容易得多。
我现在所拥有的是类似的东西
...
<a href="javascript:DoSomething('hey', 25);">Click this !</a>
...
在JS文件中，没有任何上下文的全局函数称为DoSomething。
我读了很多有关松散耦合和模块化JS的文章，但是我不知道如何实际实现像我的愚蠢示例那样的东西，因为它似乎没有任何上下文，然后通过事件和松散附加所有简单的按钮/链接动作耦合使阅读代码和找出简单的动作命令的作用变得更加困难。
假设到处都有大量这样的链接和全局函数，您实际上如何实现这种事情？
编辑：我应该更清楚一些，对不起。实际上，我不能使用任何JS生成的DOM技术（例如Backbone视图等），因为我的所有HTML都是在服务器端生成的（不幸的是，此应用程序中是强制性的），因此问题仍然在于如何有效地提出模块这样的代码，如果它们的大部分工作是响应DOM事件（在服务器端生成的特定预定义元素上），然后以页面更改或AJAX调用的形式将数据发送回服务器。
对于类似于实用程序的模块或与DOM分离的其他内容，很清楚如何实现模块，但是对于与JS不生成的静态DOM绑定的内容呢？
具体来说，在哪里以及如何实现事件处理程序，触发更改DOM元素？等等。
我在2013年必须这样做，这是一项重大任务。RequireJS使您能够将模块分为单独的文件（如果需要），在其中明确列出了依赖性。骨干网可以为您提供一些将事物分解为模型和视图（以及您自己的控件类）的结构。下划线模板可让您制作可以由模型数据填充的干净HTML模板。
真正的答案是，您必须像使用更传统的OOP语言一样思考。例如，调解器模式可让您的模块在保持解耦状态的同时相互通信。
如果您的页面上有一个Click this div，并且在javascript中有一个相应的Click侦听器，该监听器现在将位于简单模板中的Click this div，例如：
<div id="myTarget">Click this</div>
虽然主页可能有类似以下内容：
<div id="myApp"></div>
单击此视图可能会附加到#myApp并使用简单模板的内容填充它。执行此操作的主干视图如下所示：
var myView = Backbone.View.extend({
el: "#myApp",
events: {
"click #myTarget" : "handleClick"
},
handleClick : function(){
// do something
},
render : function(){
this.$el.html(myTemplate);
}
});
冲洗并重复您需要用来填充页面的各种操作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句