实解前端数据处理

总结近期项目中实践的数据处理方法。

一、从链接中获取相关数据

键值对传参

?+key_name=key_value + "&" +key_name=key_value ...
function GetUrlParms() {
    var args = new Object();
    var query = location.search.substring(1);//获取查询串
    var pairs = query.split("&");//在逗号处断开
    for (var i = 0; i < pairs.length; i++) {
        var pos = pairs[i].indexOf('=');//查找name=value
        if (pos == -1) return;//如果没有找到就跳过
        var argname = pairs[i].substring(0, pos);//提取name
        var value = pairs[i].substring(pos + 1);//提取value
        args[argname] = decodeURI(value);//存为属性
    }
    return args;
}

数组传参

?key_value + "&" + key_value +...
function GetUrlParms2() {
    var query = location.search.substring(1);//获取查询串
    if (query === "") return
    var pairs = query.split("&");//在逗号处断开
    return pairs;
}

将获得的数据存储到本地localStorage里，或是拼到链接里使用。

二、ajax基本封装

rootURL按实际设置即可。

function $ajax(url, data, callBack) {
    $.ajax({
        type: "POST",
        url: rootURL + url,
        data: data,
        dataType: "json",
        success: function (data) {
            callBack(data)
        },
        error: function (error) {
            console.log(error);
        }
    });
}

三、将数组对象中的某个属性提取出来放到数组里。

function getObjAttr(data,shuxing_name){
    var _dataArr1 = [];
    $.each(data, function (index, ele) {
         _dataArr1.push(ele[shuxing_name])
    });
    return _dataArr1 
}

array.forEach(callback(currentValue, index, array){
    //do something
}, this)

四、根据后台标识判断内容

function caseMemberUserType(n) {
    switch (n) {
        case 1:
            return "个人";
            break;
        case 2:
            return "经纪人";
            break;
        case 3:
            return "一级**人";
            break;
        case 4:
            return "二级**人";
            break；case null:
            return "未设置";
            break;

    }
}

一些很简单的直接使用三元表达式解决。

五、根据数据判断显示

${data.memberUserType === 100 ? "display:none" : ""}

六、中文按照拼音排序

使用localeCompare()方法来实现中文按照拼音排序
var array = ['白鸽', '麻雀', '大象', '狗', '猫', "鸡"];
array = array.sort(
    function compareFunction(item1, item2) {
        return item1.localeCompare(item2);
    }
);

至于特定的顺序，我也不知道是什么，姑且理解为abcdefghigklmnopqrxtuvwsyz...........

七、将排好序的中文按照abcdefghigklmnopqrxtuvwsyz分组

function pySegSort(arr,empty) {
        if(!String.prototype.localeCompare)
            return null;
        var letters = "*abcdefghjklmnopqrstwxyz".split('');
        var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');

        var segs = [];
        var curr;
        $.each(letters, function(i){
            curr = {letter: this, data:[]};
            $.each(arr, function() {
                if((!zh[i-1] || zh[i-1].localeCompare(this) <= 0) && this.localeCompare(zh[i]) == -1) {
                    curr.data.push(this);
                }
            });
            if(empty || curr.data.length) {
                segs.push(curr);
                curr.data.sort(function(a,b){
                    return a.localeCompare(b);
                });
            }
        });
        return segs;
    }

这个方法来自“樊小书生”。

后来才看到上面的方法，实际我使用的是

var _memberList = {};
$.each(memberList, function (index, el) {
   var firstChar = el['FullName'].charAt(0).toString();
   var arrRslt = makePy(firstChar).join("").charAt(0);
   if (typeof _memberList[arrRslt] === "undefined") {
     _memberList[arrRslt] = [""];
     _memberList[arrRslt].push(element);
   } else {
     _memberList[arrRslt].push(element)
   }
});

借助了插件pinyin.js。

八、数据筛选

用户名筛选和电话号码筛选

正则主要是为了减少事件触发。。。

$().on("input", function () {
   var pattern1 = /^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/;
   var pattern2 = /\d{4}$/;
   var _val = $(this).val();
   if (pattern1.test(_val)) {
     .....
   } else if (pattern2.test(_val - 0)) {
     .....
   } else {
     .....
   }
});

配合indexOf筛选

后台传过来的还是一个数组对象，所以筛选也可以使用Array的filter方法，直接筛选也可以。

function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
// ES6 way
const isBigEnough = value => value >= 10;
let [...spread]= [12, 5, 8, 130, 44];
let filtered = spread.filter(isBigEnough);
// filtered is [12, 130, 44]

九、数据检测

function isPhoneNo(phone) {
    var pattern = /^1[34578]\d{9}$/;
    return pattern.test(phone);
}

function isNumber(number) {
    var pattern = /^[1-9]\d*$/;
    return pattern.test(number);
}

function isName(name) {
    var pattern = /^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/;
    return pattern.test(name);
}

function checkpw(password, password2) {
    var password1 = $(password);
    var password2 = $(password2);
    if (password2.val() !== password1.val()) {
        $.toast("两次输入的密码不同");
    }
}
....

十、将字符串分组

这个问题源自于后台的标准，像是一个字段有多张图片的路径，就会传回一个用逗号分隔的字符串。

var strImg = strImg.split(",");

返回一个新的图片路径数组。

十一、数据请求间隔问题

有时候，用户的操作很频繁，可能会导致后台上一个data没回来而发生别的意料之外的问题（我在发送短信的时候就遇见了一些问题）。对于这些button，需要添加一个flag来判断是否触发，思想跟下拉加载是一样的。

 十二、拼接字符串

for循环、模板字符串、arr.push()、arr=arr.join("")配合使用。

 

在新公司的第一个项目，融入期。