JS写了个可以翻译文字的网页

最近这几天还是在玩自己的网站,给网站加了个网页,这个网页实现了文本翻译功能。

其实我在大一就用java写了个翻译程序的客户端,几种语言间互相翻译,用了baidu api,当时也就简单写写完事了。这次我又开始捣鼓网站,于是就想直接在网站上实现这个需求。

样式使用到了Bootstrap框架,bootstrap确实好,上手很快,不过它是移动设备优先,css会适配移动设备,搞得我在测试安卓的时候它的样式不好更改。我原本只想写个pc端的网页的,忘了说了,其实我对前端没后端语言感兴趣。但是这个网页在手机上显示太丑了,所以后面给手机和平板(我按ipad像素)都弄了@media。

Bootstrap的class .row非常棒,可以很有效的控制每列的位置。话说中文文档内容太少,我查阅的时候心想怎么就这么点内容,原来英文官网才详细。页面搞好了,更重要的是javascript方面。现在才觉得脚本还是脚本,在变量方面实在不喜欢,简洁高效是一方面,各有所需,没有孰优孰劣之分。但我更喜欢静态语言的思维。整个页面元素的事件以及逻辑都是用纯Js写的,只有在最后面请求api调用时候用到了jquery ajax。

我比较喜欢让整个页面居中,可是手机端底部几个按钮会给bootstrap给弄歪了(也许是我的问题),后面我就直接控制它们在手机上style.textAlign = "center";

。用桌面浏览器测试的时候还遇到一个浏览器拖动缩小的问题。在最大化窗口下缩小浏览器的时候,我绑定了resize event,但mdn不建议直接使用resize,因为触发它的事件刷新太快,所以参考自定义了一个event:
(function() {
    var throttle = function(type, name, obj) {
        var obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
            requestAnimationFrame(function() {
                if (!(window.innerWidth <= MAX_WIDTH)){
                    running = false;
                    return;
                }
                // start custom event
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };

    /* init - browserZoomResize event was built by built-in resize
       event */
    throttle("resize", "browserInnerWidthResize");
})();

// 桌面浏览器缩小时,触发事件,执行此callback
window.addEventListener("browserInnerWidthResize", function() {
    // some code here..
});

上面的代码在js中会直接运行,当resize触发时会转到执行requestAnimationFrame(callback fun)这个函数,这个函数提示浏览器重绘刷新,最后会启动customEvent。

这个翻译提供了多种语言,baidu api还是不错的,就是如果QPS>10就请求受限了。为了让label更新用户选择了语言选项,很简单的东西,没想到这行代码在手机端任何浏览器上都无效,桌面端一切正常:getLiElement.parentElement.previousElementSibling.innerHTML = getLiElement.firstElementChild.innerHTML + "<span class='caret'></span>";。我只好更新代码,直接找元素的id来更新属性。

最后还提供了发音功能,可以说出翻译结果的发音,我用到了Web Speech API
SpeechSynthesis提供了语音合成,不过这些功能都还是实验性,各设备去设配也需要不少时间所以我只弄了中英文发音,后期也不打算添加,一个网页没必要这么多东西,那样还不如写个app。

我给这个网页取了个标题:小贤翻译,地址是http://coollsx.com/translate哈哈,我喜欢称呼自己小贤。总之写这个网页也是为了好玩,而且大家很容易就能通过网址访问我的网站看看我写了什么念叨文章。后面我打算写个只能情侣间聊天的程序,再专注开发一个2d游戏。我还有许多好玩的没做,继续欢乐学习,欧克🆗。

部分语音合成代码上传到了我的github:https://github.com/BlueSkyCaps/JS-speechSynthesis