Background

When we write JavaScript, especially using React (in render function), we have to write a lot of judgment. For example:

const name = clazz ? clazz.student ? clazz.student.name : null : null;

Or, we can write like this:

const name = clazz && clazz.student && clazz.student.name;

But, as we can see, this is a little complex. If we have a more complex sentence, thing goes worse.

Think

Then we start to think, is there any way can help us to transform

const name = clazz.student.name;

to

const name = clazz && clazz.student && clazz.student.name;

automatically?

My solution

We all know Webpack, if you don't, emmmmm...

Webpack loader is a good entrance to transform our code.

So, my solution is a webpack loader. I call it less-ampersand.

npm install less-ampersand

Add it to webapck, this loader should be at the first of JS loaders.

module: {
        rules: [
            {
                test: /\.js$/,
                use: [{
                    loader: 'less-ampersand'
                }]
            }
        ]
    },

Then write the code like this:

const value = /**@@ */list[0].apple.name;

The code will be transform to:

const value = list && list[0] && list[0].apple && list[0].apple.name;

That's quite easy, right?

More scenes, see it in demo.

背景

当我们写JavaScript代码，尤其是在React的render方法中，经常要做很多判断，就像这样:

const name = clazz ? clazz.student ? clazz.student.name : null : null;

或者是这样：

const name = clazz && clazz.student && clazz.student.name;

前者可读性较差，后者也很冗长，尤其是一个语句中有几个这样的变量的时候，就越来越麻烦。

思考

如果有什么办法能够自动把

const name = clazz.student.name;

转成

const name = clazz && clazz.student && clazz.student.name;

吗？

我的解决办法

利用Webpack loader的编译机制，实现一个叫做less-ampersand的loader，来帮助我们自动实现上述转换。

第一步

npm install less-ampersand

然后添加到webpack配置中

module: {
        rules: [
            {
                test: /\.js$/,
                use: [{
                    loader: 'less-ampersand'
                }]
            }
        ]
    },

之后，当我们写下面的代码的时候，就会被自动编译成后面的。

const value = /**@@ */list[0].apple.name;

const value = list && list[0] && list[0].apple && list[0].apple.name;

demo里面列了更多的用法，请查阅。