jQuery版web网页Pos机练习总结

1,项目介绍:  

先对这个练习项目做一个大概的介绍:商店里进行购物结算时会使用收银机(POS)系统，这台收银机会在结算时根据客户的购物车(Cart)中的商品(Item)和商店和正在进行的优惠活动(Promotion)进行结算和打印购物清单。已知该商店正在对部分商品进行"买二赠一"的优惠活动。我们需要实现一个名为printInventory函数，该函数能够将指定格式的数据作为参数输入，然后在浏览器的控制台中输出结算清单的文本。web版具体项目需求请看卡片:

https://trello.com/b/GnmBAyPK/pos.

2,时间计划:

       本次练习要求先做一个时间计划,锻炼我们的时间掌控能力.我做的计划如下:

内容	计划时间(小时)	实际时间(小时)
学习jQuery	5	4
搭建项目和jQuery框架	0.5	1.5
界面设计	2	2
逻辑设计	2	3.5
走查	0.5	3
bug时间	2

完成这个项目的时间超出了计划时间两小时左右,虽然没有在计划时间内完成项目,但我还是中收获不少.有一种时间紧迫感很好.相信接下来的项目中我能更好的把握时间和项目进度.

3,jQuery学习总结:

学习资源:

https://www.codeschool.com/

jQuery是一个javascript框架.它能轻易的操作任意DOM元素,而且兼容各种浏览器.

（1、注册事件的函数:

$(document).ready(function(){
           alert("hello world！");
       });

可简写为:

$(function(){});

（2、选择器:

选择器是jQuery很重要的,jQuery能够通过选择器选择DOM元素,然后对其进行操作.格式:将需要选择的元素写入函数$()中,$为jQuery()的缩写.选择器元素主要是DOM的标签元素和css元素.例:

 $('div') //选择所有的div元素  
 $('#hello')//选择ID为hello的网页元素 
 $('.hello')//选择class为hello的网页元素 

 （3、显示和隐藏元素:

例:

$("#hide").click(function(){
  $("p").hide();//显示
});

$("#show").click(function(){
  $("p").show();//隐藏
});

  （4、获取页面内容:

text(); //设置或返回所选元素的文本内容

html();//设置或返回所选元素的内容（包括 HTML 标记）

val();//设置或返回表单字段的值

 4,用jQuery编写webPos:

(1,用yeoman搭建项目:

通过终端打开开一个目标路径,新建项目文件夹并进入.输入:

yo webapp

 如果没装yo或者没装webapp generater就按我的linux环境搭建文章安装.

(2,界面设计:

因为在学习jQuery的时候发现它有显示和隐藏两个函数.所以我就将pos机的写成了一个页面,分布在几个不同的div中,通过click事件对元素实现显示和隐藏,这样会少去一些页面之间的数据操作.例:通过点击主页上的按钮进入商品列表页面:

$("#product_list").hide();
    $("#shopping_car").hide();
    $("#payment_page").hide();
    $("#home").find("button").on('click',function(){
        $("#home").hide();
        $("#product_list").show();
        $('#bar').find('li').removeClass("active");
        $('#bar').find('li').eq(2).addClass("active");
        product_list();
    });

 (3,生成商品列表页:

首先定义一个类,有商品的各种属性:

function Item(barcode,sort, name, unit, price) {
    this.barcode = barcode;
    this.sort = sort;
    this.name = name;
    this.unit = unit;
    this.price = price || 0.00;
}

定义一个方法实现调用上面的类生成一组商品信息:

function loadAllItems() {
    return [
        new Item('coke','饮料', '可口可乐', '瓶', 3.00),
        new Item('sprite','饮料', '雪碧', '瓶', 3.00),
        new Item('apple','水果', '苹果', '斤', 5.50),
        new Item('lychee','水果', '荔枝', '斤', 15.00),
        new Item('battery','生活用品', '电池', '个', 2.00),
        new Item('instant_noodles','食品','方便面', '袋', 4.50)
    ];
}

然后写了一个方法生成商品信息并添加到页面中:

var product_list = function(){
    var allItems = loadAllItems(),
        button = '<button type="button" class="btn btn-info">加入购物车</button>';
    var bar =$("#product_list").find("tr").first().html();
    $("#product_list").find("table").html('<tr>'+bar+'</tr>');
    _(allItems).each(function(item){
        var table_row = "<tr>"+
            "<td>"+item.sort+"</td>"+
            "<td>"+item.name+"</td>"+
            "<td>"+item.unit+"</td>"+
            "<td>"+item.price+"</td>"+
            "<td>"+button+"</td>"+
            "</tr>";
        $("#product_list").find("table").append(table_row);
    });

   (4,加入购物车,显示购物车数量:

绑定'加入购物车'按钮函数,通过按钮遍历父元素,找到相应的商品的名字,然后把它的数量加一:

 $('#product_list').find('button').on('click',function(){
        var name = $(this).closest('tr').find('td').eq(1).text();
        add_num(name);
        refresh_car_num();
    });

 add_num()加入购物车:

var add_num = function(item){
    var lists = JSON.parse(localStorage.lists );
    lists[item] = parseInt(lists[item])+1;
    localStorage.lists = JSON.stringify(lists);
};

  refresh_car_num(),刷新购物车数量;

var refresh_car_num = function(){
    var lists = JSON.parse(localStorage.lists );
    var num = 0;
     _(lists).each(function(list){
        num = list+num;
    });
    $('#bar').find('#car_number').text(num);
};

 (5,商品促销计算:

赠送的商品数量为:parseInt(number/3);//parseInt()为对数字取整

 

 (6,项目GitHub地址:

https://github.com/zhangkehbg/web_pos.git

总结:

这个pos机项目主要用到了jquery中的选择器查找修改和添加页面元素,页面跳转用到了jquery的hide和show函数.对jquery有了初步了解.