实解前端数据处理

最新推荐文章于 2024-01-19 17:46:03 发布

aisi1982

最新推荐文章于 2024-01-19 17:46:03 发布

阅读量89

点赞数

文章标签：前端 json ViewUI

原文链接：http://www.cnblogs.com/Merrys/p/8184045.html

版权

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

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

键值对传参

?+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("两次输入的密码不同");
    }
}
....