记录位操作在前端页面的一种应用场景

        在实际开发中对位操作应用的比较少，今天在项目中发现了一次位操作的实际应用。
场景是：

• 页面有很多图片需要操作员都点击大图查看后，方可进行下一步操作；
• 操作员可以分批次查看（第一次进入看一张，第二次进入看一张都视为有效查看）；
• 当前操作员查看后，其他还是未看，只记录最后一名操作员的查看记录；
• 操作员点击查看大图后，再次点击关闭大图记录当前操作员查看的图片，格式：操作员id:num。

1. 页面初始化渲染

// 待查看的图片map  存储图片id和 已看标识在二进制中是第几位
var db_image_view = "${(image_view)!}";
var image_view_list = "";
var imageViewMap = new Map();
imageViewMap.set("front_pic", "1");
imageViewMap.set("backend_pic", "2");
imageViewMap.set("picId", "3");
imageViewMap.set("imgContent", "4");
imageViewMap.set("facePicBaseInfoAudit", "5");
imageViewMap.set("audit_operator_img", "6");

// 页面初始化渲染已看
function initImageView(id, index) {
    var operator_no = "${(operator_no)!}";
    if (db_image_view.indexOf(operator_no + ":") == -1) {
        db_image_view = "0";
        return;
    }
    image_view_list = db_image_view.substring(operator_no.length + 1, db_image_view.length);
    if (typeof (id) != "undefined") {
        $("#" + id).attr("onload", null);
        if ((1 << index - 1 & image_view_list) > 0) {
            drawImageview(id, 1);
        }
    } else {
        imageViewMap.forEach(function (value, key) {
            if ((1 << (value - 1) & image_view_list) > 0) {
                drawImageview(key, 1);
            }
        });
    }
}

• (1 << (value - 1)：位操作后，当前图片已看占位；eg：value=5，则为操作后为：0001 0000；
• image_view_list：若图facePicBaseInfoAudit未看，则为0000 0000，且(1 << (value - 1) & image_view_list)==0；
  若图facePicBaseInfoAudit已看，则为0001 0000，且(1 << (value - 1) & image_view_list)==16 > 0，此时渲染图片添加已看标识；

2. 点击关闭大图查看触发

// 点击关闭大图查看触发
function updateImageView(id, flag) {
	// 检查图片是否已看，没有已看标识则添加 返回need_update为true
    var need_update = drawImageview(id, flag);
    if (need_update) {
        var old_data = setImageView(getIndexImageView(id), flag);
        if (old_data == image_view_list) {
            return;
        }
        // 更新操作员已看图片标识数据到数据库
        updateClobImageView(old_data, image_view_list);
    }
}

// 获取图片已看位
function getIndexImageView(id) {
    var index = 0;
    imageViewMap.forEach(function (value, key) {
        if (id == key) {
            index = value;
            return;
        }
    });
    return index;
}

// 设置图片已看位
function setImageView(index, flag) {
    var curr_data = image_view_list;
    var index_value = 1 << (index - 1);
    if (flag == 1 && (index_value & image_view_list) == 0) {
    	// 标识页面常量值 当前图片位为已看（数据库值后续更新）
        image_view_list = image_view_list ^ index_value;
    }
    return curr_data;
}
// 更新图片已看位（已看操作员为当前操作员）
function updateClobImageView(old_data, image_view) {
    $.post("/update/updateImageView.json", {
        image_view: image_view,
        user_id: "${(operator_no)!}"
    }, function (data) {
        console.log("image_view:" + old_data + "->" + image_view + "更新成功");
    });
}

function drawImageview(id, flag) {
    /*flag=0 清除标记已看 flag=1 添加标记已看*/
    var self = $("#" + id);
    var need_update = false;
    if (flag == 0) {
        /*将已看标记清除*/
        if (self.hasClass("opened")) {
            self.next().remove();
            self.removeClass("opened");
            need_update = true;
        }
    } else {
        /*添加已看标记*/
        if (!self.hasClass("opened")) {
            var strDiv = "<div class=\"hasView\" style=\" ";
            if (id == "front_pic" || id == "backend_pic") {
                strDiv = strDiv + "top:" + (self.height() - 18) + "px;" + "left:" + (self.width() - 40) + "px;";
            } else if (id == "picId" || id == "imgContent") {
                strDiv = strDiv + "float:left;" + "left:-40px;" + "top:" + (self.height() - 18) + "px;";
            } else if (id == "facePicBaseInfoAudit" || id == "audit_operator_img" || id == "audit_BaseInfoNew_extendIdCertify_img") {
                strDiv = strDiv + "top:-18px;" + "left:" + (self.width() - 40) + "px;";
            }
            strDiv = strDiv + "\">已看</div>";
            self.after(strDiv);
            self.addClass("opened");
            need_update = true;
        }
    }
    return need_update;
}

3. 点击下一步校验

if ((image_view_list & 1) === 0) {
	alertMsg("下一步操作图片A要求必看！");
	return false;
}
if ((image_view_list & (1 << 1)) === 0) {
	alertMsg("下一步操作图片B要求必看！");
	return false;
}
if((image_view_list&(1<<2)) === 0 ){
	alertMsg("下一步操作图片C要求必看！");
	return false;
}
if((image_view_list&(1<<3)) === 0){
	alertMsg("下一步操作图片D要求必看！");
	return false;
}
if((image_view_list&(1<<4)) === 0 ){
	alertMsg("下一步操作图片E要求必看！");
	return false;
}
if((image_view_list&(1<<6)) === 0 ){
	alertMsg("下一步操作图片F要求必看！");
	return false;
}

image_view_list与对应的标识位或操作校验当前图片是否已看