写了一个很鸡肋的功能 2

写了一个很鸡肋的功能

本来预定了帮以前的同事远程指导帮她升级一下她的老古董 14款 MacBook Air 系统,版本 10.10.X,很多 App 装不上。

昨日跟她微信上语音通话讲了差不多五个钟头,指导她硬盘分区备份,把我喉咙都说到疼痛都没搞完,还想把机器从澳门邮寄过来让我帮她处理。后面也说她可以凌晨两点才睡觉,我都准备睡觉就寝了,被我 Say NO 了,要搞也得明天 引起不适 引起不适 引起不适

没想到她今晚加班,放了我飞机,今晚时间充足,那只好折腾下自己的事情。

其实本来也不知道想做什么的,突然想起了前几天无意中逛到一个 WordPress 站点评论区时发现了一个表单功能,当时爬到了它的请求地址。

写了一个很鸡肋的功能 4
要录入 Display Nmae 和 Websites

大致就是,当访客进行留言的时候,只需留言表单中填入电子邮箱地址,自动获取它的其他资料,资料来自 gravatar.com,这样一来只需填写电子邮箱地址,那么就会自动填充关联的昵称和网址到表单元素中,但前提是需要在 Gravatar 上预先录入。

同样的事情重复几遍就会烦躁 愤怒 。 这对像我这种懒人来说是非常实用的,毕竟能少敲几次键盘 笑哭

当时爬到的地址是大致是 secure.gravatar.com/profiles/70e9daf50f47ca5eef3c816bdbaf8cfe.json?callback=Gravatar.fetch_profile_callback

后面的一串混乱字符是电子邮箱地址 MD5 后的结果,这就很麻烦了,我不可能引用一个 MD5 的 JavaScript 包进行得出这结果,这样浪费了一次请求资源,而且会延长了获取结果的时间。本着折腾的精神,既然这一串玩意是源自电子邮箱地址,那么把它直接用电子邮箱地址代替也许可行 ?

把它替换成 secure.gravatar.com/profiles/i@fongsoul.com.json,啊哈,果然是 OK 的, 好的

获取的结果其实是一个 JSON,可以直接通过 Ajax 进行请求。

{
  "entry": [
    {
      "id": "104361132",
      "hash": "70e9daf50f47ca5eef3c816bdbaf8cfe",
      "requestHash": "70e9daf50f47ca5eef3c816bdbaf8cfe",
      "profileUrl": "http://gravatar.com/fongsoul",
      "preferredUsername": "fongsoul",
      "thumbnailUrl": "https://secure.gravatar.com/avatar/70e9daf50f47ca5eef3c816bdbaf8cfe",
      "photos": [
        {
          "value": "https://secure.gravatar.com/avatar/70e9daf50f47ca5eef3c816bdbaf8cfe",
          "type": "thumbnail"
        }
      ],
      "displayName": "Fong",
      "urls": [
        {
          "value": "https://fongsoul.com",
          "title": "FONGSOUL"
        }
      ]
    }
  ]
}

如果后面添加了 ?callback=Gravatar.fetch_profile_callback ,后面的是一个回调函数名称,这时是一个 JSONP, 只需通过 <script> 脚本加载的方式即可执行加载成功后自动执行 Gravatar.fetch_profile_callback 这个方法,方法名可以通道参数自行定义,比如 ?callback=fetch_profile_callback

/**/
fetch_profile_callback({
    "entry": [
        {
            "id": "104361132",
            "hash": "70e9daf50f47ca5eef3c816bdbaf8cfe",
            "requestHash": "70e9daf50f47ca5eef3c816bdbaf8cfe",
            "profileUrl": "http:\/\/gravatar.com\/fongsoul",
            "preferredUsername": "fongsoul",
            "thumbnailUrl": "https:\/\/secure.gravatar.com\/avatar\/70e9daf50f47ca5eef3c816bdbaf8cfe",
            "photos": [
                {
                    "value": "https:\/\/secure.gravatar.com\/avatar\/70e9daf50f47ca5eef3c816bdbaf8cfe",
                    "type": "thumbnail"
                }
            ],
            "displayName": "Fong",
            "urls": [
                {
                    "value": "https:\/\/fongsoul.com",
                    "title": "FONGSOUL"
                }
            ]
        }
    ]
});

这丫的不就是 JavaScript 吗,没错 JSONP 里面的其实就是 JavaScript ,只不过代码内容基本都是 JSON 而已,这其实是一个不标准但又走得通的非正式传输方法,利用了<script> 标签没有跨域限制的 BUG

剩下就是写 JavaScript,因为之前封装了加载脚本的函数,所有直接用第二种 JSONP 方式

/**
* 加载脚本
* 
* @author Fong {i@fongsoul.com}
* 
* @param {string} src 脚本地址
* @param {closure|null} callback 回调函数
*/
function loadScript(src, callback = null) {
    var script = document.createElement('script'),
        head = document.getElementsByTagName('head');

    if(head.length === 0) return;

    script.type = 'text/javascript';
    script.src = src;

    if (script.addEventListener) {
        script.addEventListener('load', function () {
            (typeof callback === 'function') && callback();
        }, false);
    } else if (script.attachEvent) {
        script.attachEvent('onreadystatechange', function () {
            var target = window.event.srcElement;
            if (target.readyState === 'loaded') {
                (typeof callback === 'function') && callback();
            }
        });
    }

    head[0].appendChild(script);
}

(function () {
    // 获取表单里的填写资料信息 input 元素
    const emailInputElement = document.querySelector('#email');
    const nickNameInputElement = document.querySelector('#author');
    const urlInputElement = document.querySelector('#url');

    // 少一个 input 元素都不继续执行
    if (!emailInputElement || !nickNameInputElement || !urlInputElement) return;

    //定义一个电子邮箱地址的正则
    const emailRuleInstance = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i);

    // 注册一个监听器到 EventTarget 上,当该对象 emailInputElement 触发 blur 失去焦点时,执行这个匿名回调方法
    emailInputElement.addEventListener('blur', function () {
        //当 emailInputElement value 为空
        //当 emailInputElement value 不是一个合法的电子邮箱地址
        //当 昵称已经存在内容或个人主页地址已经存在内容
        // 不再继续执行,什么都不用干,防止已经填里资料后又重新修改电子邮箱后覆盖
        if (
            this.value.length === 0 ||
            !(nickNameInputElement.value === '' && urlInputElement.value === '') ||
            !emailRuleInstance.test(this.value)
        ) return;

        // 获取这个 email
        let emailValue = this.value;

        // 进行请求获取数据的操作
        try {
            loadScript(`https://secure.gravatar.com/profiles/${emailValue}.json?callback=Gravatar.fetch_profile_callback`);
        } catch (error) {

        }

    })

    // 定义一个函数,在请求成功后进行的操作
    if (window.Gravatar.fetch_profile_callback !== undefined) return;

    window.Gravatar = {
        fetch_profile_callback: (data) => {
            if (!(nickNameInputElement.value === '' && urlInputElement.value === '')) return;
            const profile = data.entry[0];
            try {
                nickNameInputElement.value = profile.displayName ? profile.displayName : profile.preferredUsername;
                urlInputElement.value = profile.urls.length > 0 ?
                    (typeof profile.urls[0]) === 'string' ?
                        profile.urls[0] :
                        profile.urls[0].value
                    : ''
            } catch (error) {
            }
        }
    }

})();

写到眼瞓添….

然鹅事情并没这么简单,之前之所以能成功哪取资料至是我开了代理,Gravatar 服务国内是访问不了的。 眩晕 眩晕 眩晕

既然都写了,只能用 Nginx 代理下硬着头皮折腾下去,我是用的企鹅家的香港服务器的,所有能正常访问 Gravatar 服务,至于国内嘛 引起不适 引起不适 引起不适

location ~* /service/profile/(.*\.json$) {

    valid_referers none blocked fongsoul.com *.fongsoul.com;

    if ($invalid_referer) {
        return 404;
    }

    proxy_pass https://secure.gravatar.com/$1?$args;
}

https://fongsoul.com/service/profile/i@fongsoul.com.json

最后感觉这功能挺鸡肋的,存在感也不怎么强,而且获取快慢还得看网络延迟高不高,有时还抽风间歇式失灵 !!!!

突然也想吐槽这暗色模式,感觉有点鸡肋的。当初写老也没几次用上,每次到时到点自动暗色都被我换回来,真的也就是面子工程罢了。还是喜欢调回白色底比较舒服,但在手机开启暗色模式却不会有这感觉,老感觉在电脑屏幕就应该是亮色,不知道是不是跟我调色的问题。

哎先不管了,懒得搞 害羞

FONG:代码因人而异,不保证完全适用。如需使用,细节偏差请根据实际运行程序进行修改。

交流,但不求共鸣

    我要留言

    Tips: 支持匿名免邮留言。填写邮箱地址有利于对各位靓仔/女进行消息通知。留言头像服务来自Gravatar

    留言者基本信息 匿名訪客
    匿名訪客
    留言主要内容
    Sticker Heo on wordpress, Get !!!!
    再见呲牙笑微笑亲亲愤怒惊吓尴尬捂嘴笑捂脸生病绿帽鼓掌抠鼻感动吐血鬼脸擦汗惊讶恶心禁言睡觉笑哭思考疑问奋斗耍酷吵架眩晕哭泣开心害羞喜欢烦恼爆炸熬夜吃瓜阴险狗头滑稽被打哈士奇大笑加班唱歌纠结发红包送福牛年进宝狗头围脖狗头花狗头草头秃狗头胖次我看好你好的好奇偷偷看危险小丑引起不适滑稽喝水熊猫熊猫唱歌打牌哈士奇失去意识应援熊猫喜欢疼痛勉强笑看穿一切滑稽狂汗不好意思菜狗难以置信月饼滑稽被子倚墙笑出家人菜狗花黑线呦吼有没有搞错打咩扶额深思3d眼镜电话托腮裂开滑稽柠檬伞兵胡子小偷智慧的眼神滑稽奶茶
    Kaomojis 颜字

    Σ(っ °Д °;)っ  惊吓w(゚Д゚)w  啊啊(°ཀ°)  吐血(⊙﹏⊙)  呃呃呃o(≧口≦)o  崩溃(´•︵•`)  难过(;´༎ຶД༎ຶ`)  哭死→_→  斜眼看( ̄_, ̄ )  不屑( *︾▽︾)  陶醉(* ̄3 ̄)╭  飞吻o( ̄┰ ̄*)ゞ  不好意思(。・_・。)ノ  对不起φ(≧ω≦*)♪  乐(*^▽^*)  开心(๑╹◡╹)ノ  高兴*´∀`)´∀`)*´∀`)*´∀`)  哈哈哈哈ヽ(✿゚▽゚)ノ  好耶(๑•̀ㅂ•́)و✧  棒Ψ( ̄∀ ̄)Ψ  美味

    BACK TO TOP