JavaScript面向对象编程

 

 

 

　　开发人员不太喜欢去弄脚本，原因很多，比如认为太简单，认为没有挑战性，认为资源比较丰富很容易通过网络就查询到自己想要的，因为没有很好的编译器，不能像程序一样很方便的进行调试。或者就是是些起来也会使用过程化程序设计的思路去做JavaScript开发。这样带来的后果就是程序很难维护。

　　通过以下几种方式，基本上就可以很好的操作JavaScript了。

1. JavaScript的封装
2. JavaScript的扩充
3. JavaScript的继承
4. JavaScript的深拷贝
5. 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;
};