08月30, 2017

json字典排序

照例先描述一下需求:

在往后端提交数据时,需要发一个sign参数,用来防止篡改(用工具可以修改参数,如果是http协议)。

sign的值是一个md5的序列化对象,这个对象可为:

{
     appSecret: "fdfs!fdg@#saf!", // 随机固定值
     timestamp: timestamp, // 时间戳
      ... // form-data json
}

序列化对象,可以采用jquery的param方法。

var json = {
    b: 1,
    a: 2
}
$.param(json); // b=1&a=2

但后端的序列化对象是根据字典排序的,即ascii码。

所以我们还得写一个代码来实现:

function sortObject(o) {
    var sorted = {},
    key, a = [];

    for (key in o) {
        if (o.hasOwnProperty(key)) {
            a.push(key);
        }
    }

    a.sort();  //排个序

    for (key = 0; key < a.length; key++) {
        sorted[a[key]] = o[a[key]];
    }
    return sorted;
}

看起来是OK了,然而在实际测试中,和后台得到的sign结果还是有出入。在排查时,发现$.param会将特殊字符转化。

比如说form中有一个邮箱输入:

xxx@163.com

在序列化对象后,@会被转化:

alt

要解决的方法也容易,两个途径:

  • 后端在序列化对象,将value进行encode编码
  • 前端自己写一个序列化的方法,不对特殊字符编码即可

扯一些其他的。

这几天做了一个小页面(HR招聘页面),用的是layui

N久之前,比较纠结传统页面用什么UI,像bootstrap,我个人觉得还是有些重,而且有些插件也要自己配。而layui,基本的组件还是比较集全的。

不过在使用中,还是会有一些小瑕疵,比如说form校验不对,滚动条能回到那个input的位置(特别是当form很长的时候),这一块并没有实现。

这时候就要涉及到改源码了。它源码是通过gulp打包的,改完某个js之后,只要:

gulp minjs

就OK了。。

不过我说的那个功能,被它的源码到了。

alt

它给隐藏的select加了一个class(DANGER),然后css是这样的:

.layui-form-danger+.layui-form-select .layui-input,.layui-form-danger:focus {
    border: 1px solid #FF5722!important
}

比较巧妙。不过js去取select的top值就有问题了,因为这个select是“display: none”的元素,所以要去取它的next元素(模拟的DIV容器层)。

另外我本人对layui的加载器蛮好奇的,它只是内部加载器,还是可以加载其他js(像requirejs/seajs一样),然后如果类似requirejs/seajs,有没有提供出构建方式来打包脚本?

精力有限,等什么时候搞一个完整的项目再翻一下吧。。。

本文链接:www.my-fe.pub/post/json-dictionary-sort.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。