Douglas Crockford

Blog

Books

Videos

2020 Appearances

JavaScript

JSLint

JSON

Github

How JavaScript Works

About

Context Coloring

Syntax coloring is very popular, especially with coders who still struggle with basic syntax. I think we can better. Color can more profitably help us to quickly understand the structure of a program.

We have a color for the top level stuff (say black). Functions defined at the top level are green. Inner functions are brown. Inner inner functions are blue, and so on. Spotting the functions in a program and their nesting is much more important than an assist in discriminating between identifiers and strings.

For example, this is the fullfill function from How JavaScript Works, Chapter 9.

const rx_delete_default = /[<>&%"\\]/g;

const rx_syntactic_variable = /\{([^{}:\s]+)(?::([^{}:\s]+))?\}/g;

function default_encoder(replacement) {
    return String(replacement).replace(rx_delete_default, "");
}

export default Object.freeze(function fulfill(
    string,
    container,
    encoder = default_encoder
) {
    return string.replace(
        rx_syntactic_variable,
        function (original, path, encoding = "") {
            try {
                let replacement = (
                    typeof container === "function"
                    ? container
                    : path.split(".").reduce(
                        function (refinement, element) {
                            return refinement[element];
                        },
                        container
                    )
                );
                if (typeof replacement === "function") {
                    replacement = replacement(path, encoding);
                }
                replacement = (
                    typeof encoder === "object"
                    ? encoder[encoding]
                    : encoder
                )(replacement, path, encoding);
                if (
                    typeof replacement === "number"
                    || typeof replacement === "boolean"
                ) {
                    replacement = String(replacement);
                }
                return (
                    typeof replacement === "string"
                    ? replacement
                    : original
                );
            } catch (ignore) {
                return original;
            }
        }
    );
});

Each level of function is given a specific color, but variables retain the color of the function (or context) in which they are declared. I call this Context Coloring. This allows us to instantly see how the nested functions close over the outer functions.

Syntax coloring isn't useless, it is childish, like training wheels or school paste. It is great for a while, and then you might grow up. I no longer need help in separating operators from numbers. But assistance in finding the functions and their contexts and influences is valuable.

jdb财神捕鱼单机版 快乐双彩的玩法 湖北十一选五遗漏走势图 喜乐彩票网官方网站 嘉兴 招聘 配资公司 好彩1最新开奖结果 福建快3开奖结果多少钱 体彩七星彩今晚开奖结果 快3不中免单 江苏11选五玩法介绍 111期排列3试机号