指定TypeScript的编译目标

TypeScript的默认编译目标是ES3,当在代码中使用了ES5的特性时(如:set和get方法),就会无法编译,此时需要指明编译目标为ES5,具体操作方式就是在命令行中加入如下参数

--target ES5

则完整示例如下

tsc --target ES5 app.ts

HTML5实现本地预览图片

在传统的图片预览编程中,必须上传到服务器,获取到服务器生成的图片路径,才能在页面中呈现该图片,但是在HTML5中就不需要这么麻烦了,HTML5提供了文件读取的API,可以直接读取本机图片,然后用img标签将该图片呈现出来即可。
效果演示:http://plter.github.io/learnjs/ReadLocalFile/

示例代码如下

/**
 * Created by plter on 10/10/16.
 */
(function () {

    var fileInput = $("input[type='file']");
    var btnBrowse = $("#btn-browse");
    btnBrowse.button();

    var fileReader = new FileReader();
    fileReader.onload = function (e) {
        var img = new Image();
        img.src = this.result;
        img.style.display = "block";
        document.body.appendChild(img);
    };

    btnBrowse.click(function () {
        fileInput.click();
    });

    fileInput.on("change", function (e) {
        if (this.files && this.files.length) {
            fileReader.readAsDataURL(this.files[0]);
        }
    });
})();

Linux nohup命令后台运行程序

  1. 将一个程序后台运行使用的是nohup命令,比如,把turnserver运行于后台,则命令如下
    nohup turnserver &

    其中,nohup命令的用途是在终端关闭后turnserver不再关闭,而 & 符号的作用是将该程序后台运行。

  2. 使用ps命令可以查看所有正在运行的进程及其id,命令示例如下:
    ps -A

    也可以使用如下方式只呈现turnserver的进程信息

    ps -A | grep turnserver
  3. 如果想关闭,则使用kill命令进行关闭,如果通过上述命令获得的进程号为29116,则对应的关闭命令如下:
    kill 29116

在Electron中使用jQuery

在electron中使用jQuery会出现一些问题,问题原因请参考 https://github.com/electron/electron/issues/254

想要解决该问题,需要换一种方式来引入jQuery文件,代码如下所示:

window.$ = window.jQuery = require("./node_modules/jqueryui/external/jquery/jquery.js");

颜色渐变之JavaScript实现

虽然css3新增的动画效果非常好用,但是仍然有很多场合是使用JavaScript控制动画效果的,而颜色渐变的动画效果的实现很意思。

原理:

  1. 将传入的颜色值提取出rgb通道
  2. 分别对3个通道执行动画操作
  3. 将3个通道的合成为一个颜色值应用在指定的对象上

效果演示:http://plter.github.io/learnjs/ChangeColor/

/**
 * Created by plter on 8/20/16.
 */

(function () {

    var start = 0xff0000;
    var end = 0x00ff00;
    var frames = 60;
    var frameIndex = 0;
    var color = start;
    var speedRed = (getRedChannel(end) - getRedChannel(start)) / frames;
    var speedGreen = (getGreenChannel(end) - getGreenChannel(start)) / frames;
    var speedBlue = (getBlueChannel(end) - getBlueChannel(start)) / frames;
    var greenChannel = getGreenChannel(start);
    var redChannel = getRedChannel(start);
    var blueChannel = getBlueChannel(start);

    function getColorString(red, green, blue) {
        return "rgb(" +
            Math.round(redChannel) + "," +
            Math.round(greenChannel) + "," +
            Math.round(blueChannel) + ")";
    }

    var div = document.createElement("div");
    div.style.width = "200px";
    div.style.height = "200px";
    div.style.backgroundColor = getColorString(getRedChannel(start), getGreenChannel(start), getBlueChannel(start));
    document.body.appendChild(div);

    function getRedChannel(color) {
        return (color & 0xff0000) >> 16;
    }

    function getGreenChannel(color) {
        return (color & 0x00ff00) >> 8;
    }

    function getBlueChannel(color) {
        return color & 0x0000ff;
    }

    function runAnimation() {
        frameIndex++;
        if (frameIndex <= frames) {
            requestAnimationFrame(runAnimation);
        } else {
            color = end;
            blueChannel = getBlueChannel(end);
            redChannel = getRedChannel(end);
            greenChannel = getGreenChannel(end);
        }

        var colorString = getColorString(redChannel, greenChannel, blueChannel);
        div.style.backgroundColor = colorString;

        console.log(frameIndex, colorString);

        blueChannel += speedBlue;
        redChannel += speedRed;
        greenChannel += speedGreen;
    }

    div.onclick = runAnimation;

})();