JavaScript面向对象编程
开发人员不太喜欢去弄脚本，原因很多，比如认为太简单，认为没有挑战性，认为资源比较丰富很容易通过网络就查询到自己想要的，因为没有很好的编译器，不能像程序一样很方便的进行调试。或者就是是些起来也会使用过程化程序设计的思路去做JavaScript开发。这样带来的后果就是程序很难维护。
通过以下几种方式，基本上就可以很好的操作JavaScript了。
- JavaScript的封装
- JavaScript的扩充
- JavaScript的继承
- JavaScript的深拷贝
- JavaScript的组合
封装（提升代码的重用性，也更加提升可维护性）：
代码
/// <summary>
/// 描述：选择填充产品、并且填充缓存JSON对象
/// 使用位置：产品订单
/// </summary>
function Order(obj) {
this.Obj = obj;
this.OrderJSON = function() {
var str = $("#"+obj.txtDetailID).val();
var json = eval('(' + str + ')');
return json;
}();
this.StockNumberJSON = function() {
var str = $("#"+obj.txtStockNumberID).val();
if(str == "")
return null;
var json = eval('(' + str + ')');
return json;
}();
};
Order.prototype = {
GetOrderDetail: function(orderDetail) {
for (var i = 0; i < this.OrderJSON.OrderDetailList.length; i++) {
var item = this.OrderJSON.OrderDetailList[i];
if (item.ProductID == orderDetail.ProductID && item.ExpiredTime == orderDetail.ExpiredTime) {
return item;
}
}
return null;
},
GetOrderDetailById: function(id) {
for (var i = 0; i < this.OrderJSON.OrderDetailList.length; i++) {
var item = this.OrderJSON.OrderDetailList[i];
if (item.DetailID == id) {
return item;
}
}
return null;
},
AddOrderDetail: function(orderDetail) {
if (this.GetOrderDetail(orderDetail)) {
this.DeleteOrderDetail(orderDetail);
}
this.OrderJSON.OrderDetailList.push(orderDetail);
this.SaveOrder(this.OrderJSON);
},
DeleteOrderDetail: function(orderDetail) {
for (var i = 0; i < this.OrderJSON.OrderDetailList.length; i++) {
var item = this.OrderJSON.OrderDetailList[i];
if (item.ProductID == orderDetail.ProductID && item.ExpiredTime == orderDetail.ExpiredTime) {
this.OrderJSON.OrderDetailList.splice(i, 1);
break;
}
}
this.SaveOrder(this.OrderJSON);
},
DeleteOrderDetailById: function(id) {
for (var i = 0; i < this.OrderJSON.OrderDetailList.length; i++) {
var item = this.OrderJSON.OrderDetailList[i];
if (item.DetailID == id) {
this.OrderJSON.OrderDetailList.splice(i, 1);
break;
}
}
this.SaveOrder(this.OrderJSON);
},
SaveOrder: function(object) {
var jsonStr = JSON.stringify(object);
$("#"+this.Obj.txtDetailID).val(jsonStr);
},
ValidatorInput: function(orderDetail) {
var re = /^[0-9]*[1-9][0-9]*$/;
var result = re.test(orderDetail.QTY);
if (result == false) {
alert('请输入正确数量');
}
// 判断购买的产品数量是否超过库存上限
var stockNumber = this.StockNumberJSON;
for (var i = 0; i < stockNumber.length; i++) {
var item = stockNumber[i];
if (item.ProductID == orderDetail.ProductID && item.ExpiredTime == orderDetail.ExpiredTime && orderDetail.QTY > item.QTY) {
alert('产品数量大于库存剩余数量！');
result = false;
}
}
return result;
},
OrderDetail: function(productId, qty, expiredTime) {
var length = this.OrderJSON.OrderDetailList.length;
var detailId = this.OrderJSON.OrderDetailList.length > 0 ? this.OrderJSON.OrderDetailList[length - 1].DetailID : 1;
var list = new Array();
detailId = detailId + 1;
var entity = {
DetailID: detailId,
ProductID: productId,
QTY: qty,
EmployeeDetailList: list,
ExpiredTime: expiredTime
};
return entity;
},
FullProduct: function() {
var body = "";
var object = this.OrderJSON;
var that = this;
for (var i = 0; i < object.OrderDetailList.length; i++) {
var item = object.OrderDetailList[i];
body += "<tr>";
body += "<td id='" + item.DetailID + "'>" + item.ProductEntity.ProductNO + "</td>";
body += "<td>" + item.ProductEntity.ProductName + "</td>";
body += "<td>" + parseFloat(item.Price).toFixed(2) + "</td>";
body += "<td>" + parseFloat(item.PV).toFixed(2) + "</td>";
body += "<td>" + item.ExpiredTime + "</td>";
body += "<td>" + item.QTY + "</td>";
body += "<td>" + parseFloat(item.QTY * item.Price).toFixed(2) + "</td>";
body += "<td>" + parseFloat(item.QTY * item.PV).toFixed(2) + "</td>";
body += "<td><div class='cssbutton sample25 white'><input id='btnDelete' DetailID=" + item.DetailID + " type='button' value='删除' /></div><div class='cssbutton sample25 white'><input id='btnSearch' DetailID=" + item.DetailID + " type='button' value='查询' /></div></td>";
body += "</tr>";
}
$("#"+this.Obj.ProductBody).html("").append(body);
$("#"+this.Obj.ProductBody).find("input[id=btnSearch]").click(function() {
var id = $(this).attr("DetailID");
var json = that.GetOrderDetailById(id);
var jsonStr = JSON.stringify(json);
window.showModalDialog("http://www.cnblogs.com/../Shop/Order/ShowDealingPV.aspx?json=" + jsonStr, null, "dialogHeight: 500px; dialogWidth: 600px; edge: Raised; center: Yes; help: No; resizable: No; status: No;");
});
$("#"+this.Obj.ProductBody).find("input[id=btnDelete]").click(function() {
var id = $(this).attr("DetailID");
that.DeleteOrderDetailById(id);
that.FullProduct();
});
}
};
2.扩充（有点类似于继承，但不完全是，专业的JavaScript工程师称作扩充，我个人认为就是山寨版的继承）
代码
/// <summary>
/// 模拟实现JavaScript当中的继承
/// </summary>
var Extend = function(destination, source) {
for (var property in source.prototype) {
destination.prototype[property] = source.prototype[property];
}
}
/// <summary>
/// 服务订单继承与产品订单
/// </summary>
Extend(OrderBySevice, Order);
/// <summary>
/// 描述：选择填充产品、并且填充缓存JSON对象
/// 使用位置：服务订单
/// </summary>
function OrderBySevice(obj) {
this.Obj = obj;
this.OrderJSON = function() {
var str = $("#"+obj.txtDetailID).val();
var json = eval('(' + str + ')');
return json;
}();
};
OrderBySevice.prototype.ValidatorInput = function(orderDetail) {
var re = /^[0-9]*[1-9][0-9]*$/;
var result = re.test(orderDetail.QTY);
if (result == false) {
alert('请输入正确数量');
}
return result;
};
