jQuery 事件有助于编写干净的 JavaScript
5.00/5 (2投票s)
如何编写一些面向对象的 JavaScript。
正如标题所示，这篇博文是关于一些整洁的 JavaScript 代码示例。许多开发者不喜欢 JavaScript 是因为各种原因。我认为 JavaScript 是一种非常酷的语言。为了防止开发者不喜欢它，并鼓励他们展示 JavaScript 的强大之处，我们所有开发者都应该以一种整洁的方式编写 JavaScript。这样，更少的开发者会因此而感到沮丧，从而放弃使用它。
在这篇博文中，我将向您展示如何编写一些面向对象风格的 JavaScript，就像您在 C# 等语言中所知道的那样。我将使用 jQuery 来实现一些整洁的 JavaScript 代码。首先，我将解释我试图用这段代码实现的目标。我想创建两个模块，一个是包含用于发布一些产品的表单的 jQuery 对话框，另一个是显示产品的网格。对于第二个，您可以例如使用 jqGrid。我希望这两个模块能够完全独立地运行，同时又能相互通信。因此，我将使用 jQuery 事件机制。
所以首先，我将创建我的 JavaScript productDialog 模块。
var productDialog = function($){
var self = null;
var dialogForm = null;
var init = function() {
if (self === null) return;
self = this;
initDialog();
};
var initDialog = function() {
dialogForm = $('#productDialogForm');
dialogForm.dialog({
autoOpen: false,
height: 300,
width: 350,
buttons: {
Create: function() {
var valid = true;
//Some form validation, left for brevity
if(valid) {
$.post('someserverurl', formData, postComplete, 'json');
}
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
//remove validation classes from form elements
//left for brevity
}
});
//Do some cool jquery stuff on your form to make it more interactive
//Remove the original submit button because dialog contains one
}
var postComplete = function(data) {
self.trigger('formPostComplete', data); //triggers event
// with the response from the server
};
var show = function(modal) {
if (modal) dialogForm.dialog({ modal: true; });
else dialogForm.dialog({ modal: false; });
dialogForm.dialog('open');
};
return {
init: init,
showModal: show(true),
show: show
};
}(jQuery);
其次，我需要初始化我的产品概览。
var productOverview = function($){
var self = null;
var grid = null;
var init = function() {
if (self === null) return;
self = this;
grid = $('#productsGrid');
//init a jqGrid on some div id grid.jqGrid(....
//or simply init some other things to
//show your products data by doing a $.get(....
//left for brevity
};
var refreshData = function(data) {
//simply call grid.reload() in case of jqGrid,
//or update your products overview by using the data,
//(depends on what your server post returns)
//or do a $.get request or something
};
return {
init: init,
refreshData: refreshData
};
}(jQuery);
为了让它们在特定页面上相互通信，我实现了一个中介者，它将把一些逻辑链接在一起，用于特定页面。乍一看，这似乎有些过度设计，我猜您可能在想为什么不直接在页面本身进行处理。嗯，当您的模块有更多的事件和更多的逻辑需要链接时，这可能会发展成更大的代码。当页面上的模块数量增加时，您需要一个中心位置来链接所有逻辑。如果这能保持您的代码更整洁，您可以实现更多中介者。
var productMediator = function($) {
var self = null;
var init = function() {
if (self === null) return;
self = null;
productDialog.init();
productOverview.init();
productDialog.bind('formPostComplete', productOverview.refreshData);
$('#createNewProduct').click(productDialog.showModal); //binds buttonclick
};
return {
init: init
}
}(jQuery);
最后，您需要将这些脚本添加到您的页面中。
<!DOCTYPE html>
<html>
<head>
<title>Products</title>
<!-- stylesheets jquery ui and ui dialog-->
<!-- scripts jquery and jquery ui-->
<script src="productDialog.js"></script>
<script src="productOverview.js"></script>
<script src="productMediator.js"></script>
<script>
$(function() {
productMediator.init();
});
</script>
</head>
<body>
<h1>Products<h1>
<button id="createNewProduct">Create new product</button>
<div id="productsGrid">
<!-- Contains your products grid -->
<div>
<form id="productDialogForm">
<label for="name">Name</label>
<input id="name" name="name" />
<label for="price">Price</label>
<input id="price" name="price" />
<label for="category">Category</label>
<input id="category" name="category" />
<button type="submit">Create</button>
</form>
</body>
</html>
结论
这段代码看起来并不令人沮丧，我希望对您来说也是如此。除了中介者之外，我在这里展示的模块可以彼此独立使用。您可以将它们与一些 MVC3 部分轻松组合，这些部分包括 HTML 例如。您可以控制在返回值中哪些方法是公开可见的。我希望我降低了您自己编写 JavaScript 应用程序的门槛。也许很快，您就会开始编写一些很酷的 Windows 8 JavaScript 应用程序。
像往常一样，如果您喜欢这篇文章，请分享它！如果您不喜欢，也请分享它 :).