實解前端數據處理

總結近期項目中實踐的數據處理方法。

1、從連接中獲取相關數據

鍵值對傳參

?+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裏，或是拼到連接裏使用。

2、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);
        }
    });
}

3、將數組對象中的某個屬性提取出來放到數組裏。

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)

4、根據後臺標識判斷內容

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;

    }
}

一些很簡單的直接使用三元表達式解決。

5、根據數據判斷顯示

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

6、中文按照拼音排序

使用localeCompare()方法來實現中文按照拼音排序
var array = ['白鴿', '麻雀', '大象', '狗', '貓', "雞"];
array = array.sort(
    function compareFunction(item1, item2) {
        return item1.localeCompare(item2);
    }
);

至於特定的順序，我也不知道是什麼，姑且理解爲abcdefghigklmnopqrxtuvwsyz...........

7、將排好序的中文按照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。

8、數據篩選

用戶名篩選和電話號碼篩選

正則主要是爲了減小事件觸發。。。

$().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]

9、數據檢測

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("兩次輸入的密碼不一樣");
    }
}
....

10、將字符串分組

這個問題源自於後臺的標準，像是一個字段有多張圖片的路徑，就會傳回一個用逗號分隔的字符串。

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

返回一個新的圖片路徑數組。

11、數據請求間隔問題

有時候，用戶的操做很頻繁，可能會致使後臺上一個data沒回來而發生別的意料以外的問題（我在發送短信的時候就碰見了一些問題）。對於這些button，須要添加一個flag來判斷是否觸發，思想跟下拉加載是同樣的。

 12、拼接字符串

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

 

在新公司的第一個項目，融入期。