标签 Javascript 下的文章

[脸红] [亲亲] [吹泡泡]

张大妈 的时候发现了很多文章用到这个魔性的表情,能将作者丰富的情感表达出来。我也想在我的博客拥有这套表情包,便有了此插件。

项目地址:Github

接入说明

你可以下载本项目,引用 JS 和 CSS,通过固定的表情语法来使用表情。

...
<link rel="stylesheet" href="path/src/css/alu.css">
...
<script src="path/src/js/alu.js"></script>
<script>
    // 你可以直接使用
    ALU();
    // 同时也可以传入参数进行配置
    // ALU({
    //     element: document.body,
    //     url: "https://res.smzdm.com/images/emotions/",
    //     addClass: "alu-face",
    //     mapping: {
    //         "高兴": "22.png",
    //         "皱眉": "23.png",
    //         "阴笑": "24.png",
    //         "鄙视": "25.png",
    //         "邪恶": "26.png",
    //         "大囧": "27.png",
    //         "惊喜": "28.png",
    //         "小眼睛": "29.png",
    //         "小怒": "30.png",
    //         "无语": "31.png",
    //         "傻笑": "32.png",
    //         "期待": "33.png",
    //         "得逞": "34.png",
    //         "呲牙": "35.png",
    //         "喜极而泣": "36.png",
    //         "晕死": "37.png",
    //         "脸红": "38.png",
    //         "亲亲": "39.png",
    //         "狂汗": "40.png",
    //         "困": "41.png",
    //         "饥饿": "42.png",
    //         "得意": "43.png",
    //         "抠鼻": "44.png",
    //         "抽烟": "45.png",
    //         "内伤": "46.png",
    //         "口水": "47.png",
    //         "吐": "48.png",
    //         "流鼻涕": "49.png",
    //         "绷带": "50.png",
    //         "吐舌": "51.png",
    //         "口罩": "52.png",
    //         "不说话": "53.png",
    //         "不出所料": "54.png",
    //         "装大款": "55.png",
    //         "尴尬": "56.png",
    //         "喷水": "57.png",
    //         "喷血": "58.png",
    //         "咽气": "59.png",
    //         "哼小曲": "60.png",
    //         "吹泡泡": "61.png",
    //         "愤怒": "62.png",
    //         "冻住": "63.png",
    //         "赞一个": "64.png",
    //         "差评": "65.png",
    //         "中指": "66.png",
    //         "哦耶": "67.png",
    //         "拳头": "68.png",
    //         "手掌": "69.png",
    //         "就是你": "70.png",
    //         "过来": "71.png",
    //         "吃雪糕": "72.png",
    //         "吃香蕉": "73.png",
    //         "ok": "74.png",
    //         "看不见": "75.png",
    //         "无所谓": "76.png",
    //         "欢呼": "77.png",
    //         "偷笑": "78.png",
    //         "无奈": "79.png",
    //         "害羞": "80.png",
    //         "打脸": "81.png",
    //         "想一想": "82.png",
    //         "嘘": "83.png",
    //         "烧香": "84.png",
    //         "抱拳": "85.png",
    //         "鼓掌": "86.png",
    //         "观察": "87.png",
    //         "锁眉": "88.png",
    //         "黑线": "89.png",
    //         "汗": "90.png",
    //         "哭泣": "91.png",
    //         "阴暗": "92.png",
    //         "暗地观察": "93.png",
    //         "潜水": "94.png",
    //         "蜡烛": "95.png",
    //         "投降": "96.png",
    //         "吐血倒地": "97.png",
    //         "便便": "98.png",
    //         "长草": "99.png",
    //         "绿帽子": "100.png",
    //         "注意安全": "101.png",
    //         "被砍": "102.png",
    //         "捶打": "103.png",
    //         "肿包": "104.png",
    //         "坐等": "105.png",
    //         "看热闹": "106.png",
    //         "深思": "107.png",
    //         "被监视": "108.png",
    //     },
    // });
</script>

参数说明

参数必填含义默认值
element需要转换表情的标签容器document.body
url表情链接地址,如果你使用本地地址请配置类似 /path/img/https://res.smzdm.com/images/emotions/
addClass表情添加的样式名用于控制样式alu-face
mapping表情映射关系,一般不需要改动{...}

使用语法

在接入完成后,你可以使用特定的表情语法来使用表情。格式为 [表情名],比如:[高兴 ](末尾加了一个空格防止被转换)。
它将解释为:高兴

表情列表

表情列表

已知问题

  • code 标签内容也会被转换,正在想办法来过滤一些标签,如果你有好的提议请联系我。

遇到困难

  • 如果你在使用中有任何疑问,请点击 Issues 中查看或创建新的问题

Update: 2018-12-17,最近又有亲戚朋友需要这个功能,把代码提炼的一下,可以在链接中加入唯一 key。另外说一下主流浏览器似乎 HTTP 获取不到位置权限?

背景

昨天下午,在家闲的蛋疼,准备写一个自己的项目,想在年前给自己一个礼物(我才不会说这项目我拖了好久了,懒癌晚期我也很绝望)。打开环境,正当我提臀收腹摆好姿势准备开始写的时候。

我一个大表哥微信突然找我了,菊花一紧。毕竟这不经常联系的朋友突然找你肯定没啥好事儿,无事不登三宝殿。颤抖的划开微信,对话如下:

表哥:在?现在有没有手机定位的软件?

我:应该有,问问我朋友。

我一想,你这是要跟踪谁呀?没多想,便跑去问我一个会做 Android APP 的朋友。正在讨论打包隐藏图标,后台自动唤醒,定时发送地理位置等等一大堆技术实现问题的时候。

还没等我问完,表哥又回消息了。

表哥:我有他车牌号。

我:?

表哥:还有他手机号和微信号。

我:??

我:你找他干嘛啊?

表哥:他欠我钱,法院都在找他。

我:我能做的是在他手机上安装一个 APP。

表哥:我能找他还让你定位?

对不起!公安和电信我能拿到接口我还敲什么代码,早就坐着收钱了。

和我大表哥聊完,正准备写我的项目,表哥又来消息了。

表哥:有人给我推了一个微信号,可以做定位的。

表哥:需要跟踪定位可以安装公司定位软件到自己手机里,以后不管这个人去哪儿都能跟踪监控,费用 1000 元先交定金 400 元,十分钟绑定到你手机,可长期使用,没有额外费用。

表哥:[视频](骗子的空壳 APP 介绍视频)

表哥:[视频](骗子的截取电影里定位视频)

我:这是骗子,你放心的去吧。

表哥:。。

表哥:怎么可能喔。

我去,这么赤裸裸的骗术你都能相信,我这就很绝望了,你是愿意相信他也不相信我是吧?

那好吧,终极大招。

我:那你让他定你的位置看看,还让你交定金就直接删掉。

表哥:嗯,好。

我就不信这骗子还能怎么编理由。我就不信你今天还真把位置给定出来了。

然而,十分钟后。

表哥:你看,真的可以定位!

表哥:[图片](骗子发的表哥地图位置)

我顿时就诧异了,脑海里第一个想的是你不会被人给装上啥软件了吧?

我:他没给你发软件吧?

表哥:没有啊,真的定位到我的位置了。

背后冷汗惊起,莫非这人真是大佬?抓微信包分析地理位置?这么玄乎?

我还是不敢相信,社会乱套成这样了?一个手机号、微信号就能随便定位别人的详细位置?

我:把你和他的聊天记录我看看。

表哥:图片

我:。。。

看到聊天记录我瞬间惊呆,还有这操作。人家让你点你就点?这特么的不就获取你的地理位置了吗?

我:这么 low 的操作?这我也可以呀。

表哥:那好呀,你快帮我做,我晚上要去找他。

我:那个。。

实现

首先能利用的是 HTML5 的地理位置接口,和一个后端进行保存日志。

不过 HTML5 的地理位置接口 需要用户手动确定权限,这肯定是有风险一半一半,没办法。

前端部分代码

// index.php
.
.
.
<script>
function getLocation()
{
    console.log('start...');
    if (navigator.geolocation)
    {
        console.log('authorization...');
        navigator.geolocation.getCurrentPosition(showPosition);
    }else{
        console.log('failed...');
        $.post('/backend.php', {
            'key': "<?php echo $_GET['key'] ?? 'unknow';?>",
            'message': "Permission denied.",
        }, function() {}, 'JSON');
    }
}

function showPosition(position)
{
    console.log('success...');
    $.post('/backend.php', {
        'key': "<?php echo $_GET['key'] ?? 'unknow';?>",
        'message': "Bingo!",
        'latitude': position.coords.latitude,
        'longitude': position.coords.longitude
    }, function() {}, 'JSON');
}

getLocation();
</script>

后端部分代码

<?php
file_putypecho_contents('./location.log', '[' .date("Y-m-d H:i:s") .'] '. $_POST['key'] . '-' . $_POST['message'] . ' ' . json_encode($_POST) . PHP_EOL , FILE_APPEND);

监听日志

$ tail -f location.log

对,没错,这么 low 的代码,居然敢卖 1000。

对着朋友测试了一下,精确度有点低,大概差个 1 KM 吧。。

精度比较:PC <= 打开 Wi-Fi 设备 < 打开移动数据的设备

看来我得申请个小号去卖定位了,还写什么代码。

后续

晚上,我哥给发消息,让我把字(title)改一下,就是那个连接分析后的标题,最开始我给的是新闻,但是想想,谁没事儿蛋疼点你无关痛痒的新闻呐。于是。。

律师函

我太佩服我自己脑洞了,先不管对不对,看见这标题你慌不慌?何况还是一个躲债的人。你点不点?

然后呀,我哥就发给他了,立马上钩,日志就刷刷刷有反应了,一分钟内点了五次。为什么?因为打开是空白呀!(我似乎能脑补出他当时的场景,哈哈哈哈哈哈。。。)

日志

高兴的复制上经纬度,打开高德地图。Bingo~

定位地址

现在是能定位了,不过精度并不高,只能慢慢去找。

我:定出来了,你去看看。

表哥:好,我现在在路上。

我:你过去怎么找他?

表哥:找车牌呀。

我:。。

那就祝你好运咯,手动微笑脸。就这样,明天还要上班,就很早就睡了。

第二天。

表哥:你定的那个位置不准呀,我找了一晚上都没找到。

我:经纬度肯定有误差的,可能定的是附近的基站的位置。

表哥:。。

表哥:要不我再把链接给他发一次?

我:同样的套路别人能上当几次?

然后他还是发过去了,然而,日志再也没有增加一个字符。对此,我深表遗憾,没办法。怪我没有公安或电信的接口,再次手动微笑。你以为这就完了?

才不!不然我会来更新博文?

表哥:找到他了。

我:嗯嗯,好。

表哥:就在定位的附近。

我:哈哈,过年回来找你要红包!

总结

这次事件真的让我感触颇深,第一,帮朋友家人修电脑一类的,搞好了皆大欢喜,那你要是搞不好。。“看来你技术还没到家呀!”、“你能力还不够呀!我听人家说XXXX”,反正就是各种姿势嘲讽,站在道德制高点认为帮他是你的本分,拜托我一个写代码的你为难我干啥;第二,最重要的一点,不!要!点!开!陌!生!的!链!接!

你永远不知道屏幕背后的是人是狗。——我也不知道谁说的

折腾完hexo,开始处理一些小细节,之前调试主题的时候就发现NexT并没有对代码进行压缩处理,详情见:如何优化NexT主题?

为何要压缩代码?

首先,没有比较就没有伤害:

压缩前后对比图

这是主页压缩前后的对比图,主要将多余空格和换行给去掉,CSS和JS同理。

压缩的优势?列出以下四点,欢迎补充:

  • 减小了文件的体积
  • 减小了网络传输量和带宽占用
  • 减小了服务器的处理的压力
  • 提高了页面的渲染显示的速度

gulp能做什么?

gulp是一款基于Node.js的一款利用数据流自动化构建工具,利用其插件可以对文件进行IO操作,其中包括压缩代码等功能。

gulp的安装

注:安装此插件务必确认安装Node环境及包管理工具(npm或cnpm)

任何一款js插件,首先是参考文档说明。详见:官方文档

首先,需要安装gulp及其配套的插件。

$ cd blogdir/
$ cnpm install gulp --save
$ cnpm install gulp-htmlclean --save
$ cnpm install gulp-htmlmin --save
$ cnpm install gulp-minify-css --save
$ cnpm install gulp-uglify --save

注:cnpm为淘宝npm镜像,如果发现cnpm提示command not found,请自行安装或使用npm,使用方法与npm相同,不过将镜像存储在国内加快包下载速度。

完成后查看package.json是否包含上列安装的包:

"dependencies": {
    "gulp": "^3.9.1",
    "gulp-htmlclean": "^2.7.14",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.3.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.0",
    "hexo": "^3.2.0",
    "hexo-deployer-git": "^0.3.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-marked": "^0.2.10",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  }

然后新建gulpfile.js文件到hexo根目录,内容如下:

var gulp = require('gulp');

//Plugins模块获取
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

// 压缩 public 目录 css文件
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});

// 压缩 public 目录 html文件
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});

// 压缩 public/js 目录 js文件
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});


// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

至此,安装完成。

gulp的使用

gulp的使用很简单,只需要在部署之前将代码压缩即可:

$ hexo clean
$ hexo g
INFO  Start processing
INFO  Files loaded in 723 ms
INFO  Generated: index.html
$ gulp
[13:18:33] Using gulpfile ~/blog/gulpfile.js
[13:18:33] Starting 'minify-html'...
[13:18:33] Starting 'minify-css'...
[13:18:33] Starting 'minify-js'...
$ hexo d
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...