本篇为本站 LTS 文章,会长期更新

# 引言

最近摸了一个月鱼没有更新什么正经文章,基本都是 shoka 的改造
近期在摸鱼时发现 shoka 主题的 js 有近 200 个弱警告和 10 余个警告,就想处理一下这些警告

本文基本是兼容性换性能和未来支持,基本 IE 系列就全系不支持了

# ES6 语法

# 升级 uglifyjs

建议使用 hexo-renderer-multi-next-markdown-it , 卸载 hexo-renderer-multi-markdown-it 后安装即可

铺面而来的就是 使用了var而非let或const 这个警告,随后就直接使用了 WebStorm 的快速修复,然后 hexo g :

ERROR: Unexpected token: keyword «const»

网上针对这个的教程都是替换为 uglify-es , 但在 npm 主页 中明确写道: support for ECMAScript is superseded by 'uglify-js' as of v3.13.0
所以直接升级 uglify-js 即可:
打开 yourblog\node_modules\hexo-renderer-multi-markdown-it\ , 随后运行 cnpm i uglify-js , 等待安装完毕。
随后打开 node_modules\hexo-renderer-multi-markdown-it\lib\filter.js , 打开第 90 行左右:

var result = UglifyJS.minify(str, options);
var saved = ((str.length - result.code.length) / str.length * 100).toFixed(2);
if (options.logger) {
    var log = hexo.log || console.log;
    log.log('minify the js: %s [ %s saved]', path, saved + '%');
}
var js_result = result.code;
if(options.stamp) {
    var prefix = '// build time:' + Date().toLocaleString() + "\n";
    var end = '\n//rebuild by hrmmi ';
    js_result = prefix + js_result + end;
}
return js_result;

更改为:

const uglify_v3_allow_options = ["parse", "compress", "mangle", "output", "sourceMap", "nameCache", "toplevel", "warnings"]
    const uglify_options = {}
    for (let key of uglify_v3_allow_options) {
        if (options[key] !== undefined) uglify_options[key] = options[key]
    }
    var result = UglifyJS.minify(str, uglify_options);
    if (!result.error) {
        var saved = ((str.length - result.code.length) / str.length * 100).toFixed(2);
        if (options.logger) {
            var log = hexo.log || console.log;
            log.log('minify the js: %s [ %s saved]', path, saved + '%');
        }
        var js_result = result.code;
        if (options.stamp) {
            var prefix = '// build time:' + Date().toLocaleString() + "\n";
            var end = '\n//rebuild by kaitaku';
            js_result = prefix + js_result + end;
        }
    } else throw result.error;
    return js_result;

# 替换 var

建议直接使用 WebStorm 的快速修复替换,没有更快的方法了
但是需要将以下几行代码重新排序:

$.each(p + ' .md img:not(.emoji):not(.vemoji)', function (element) {
                const $image = q(element); // 放到这个位置
                const imageLink = $image.attr('data-src') || $image.attr('src'); // 放到这个位置
                const $imageWrapLink = $image.wrap('<a class="fancybox" href="' + imageLink + '" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>').parent('a');
                let info, captionClass = 'image-info';
                if (!$image.is('a img')) {
                    $image.data('safe-src', imageLink)
                    if (!$image.is('.gallery img')) {
                        $imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default');
                    } else {
                        captionClass = 'jg-caption'
                    }
                }

下面的代码块是错误的代码块,请手动替换下面函数内的 constlet , 不要使用 WebStorm 的自动替换

$.each('figure.highlight', function (element) {
        const code_container = element.child('.code-container'); // 放到这
        const showBtn = code_container.child('.show-btn');
        const hideCode = function () {
            code_container.style.maxHeight = "300px"
            showBtn.removeClass('open')
        };

# 处理部分弃用语法

# 杂项属性

global.js 中第 196 行的 pageYOffset 已经被标记为了弃用,可以使用 scrollY 代替,直接全局替换即可
player.js 第 470 行的 webkitTransform 已被标记为弃用,可以直接删除

# execCommand 处理

主题使用了 execCommand 进行代码块复制操作,但现在 execCommand 已经被标记为了弃用
现在已经推出了新的 ClipboardAPI 来进行剪切板操作,这个 API 有以下优点:

  • 底层为异步,速度较快
  • 代码复杂度低,逻辑简单
  • 主流浏览器支持较好 (对于一个新兴 API 而言)

clipboardAPI 只能在安全上下文 (HTTPS) 中使用

打开 global.js 第 276 行,找到如下代码:

const clipBoard = function (str, callback) {
    const ta = BODY.createChild('textarea', {
        style: {
            top: window.scrollY + 'px', // Prevent page scrolling
            position: 'absolute',
            opacity: '0'
        },
        readOnly: true,
        value: str
    });
    const selection = document.getSelection();
    const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
    ta.select();
    ta.setSelectionRange(0, str.length);
    ta.readOnly = false;
    const result = document.execCommand('copy');
    callback && callback(result);
    ta.blur(); // For iOS
    if (selected) {
        selection.removeAllRanges();
        selection.addRange(selected);
    }
    BODY.removeChild(ta);
}

将其更改为如下代码:

const clipBoard = function (str, callback) {
    if (navigator.clipboard && window.isSecureContext) {
        console.log("使用clipboard复制") // 测试
        navigator.clipboard.writeText(str).then(function() {
            callback && callback(true);
        }, function() {
            callback && callback(false);
        });
    } else {
        console.log("使用execCommand复制") // 测试
        const ta = BODY.createChild('textarea', {
            style: {
                top: window.scrollY + 'px', // Prevent page scrolling
                position: 'absolute',
                opacity: '0'
            },
            readOnly: true,
            value: str
        });
        const selection = document.getSelection();
        const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
        ta.select();
        ta.setSelectionRange(0, str.length);
        ta.readOnly = false;
        const result = document.execCommand('copy');
        callback && callback(result);
        ta.blur(); // For iOS
        if (selected) {
            selection.removeAllRanges();
            selection.addRange(selected);
        }
        BODY.removeChild(ta);
    }
};

随后重新生成静态文件,打开任意界面复制代码,如果控制台输出了 使用clipboard复制 ,就可以把两行带有测试注释的代码删掉了

目前修补仍在缓慢进行中,此文章会不定期更新

此文章已被阅读次数: 正在加载... 更新于

请我喝[茶]~( ̄▽ ̄)~*

chou kaitaku 微信支付

微信支付

chou kaitaku 支付宝

支付宝