自执行函数

这篇文章不先放定义，现放个碰到的例子。

下图是需求，大概要制作这么一个表格。（前提，我们项目是React + Ant Design）

需求

根据组件api所定义的，我们要声明一个columns对象，存放列对象。然后分上下两块的需要定义对象冲的children属性，属性的值是一个列对象组成的数组。大概就是下面这样：

this.columns = [{
    title: '角色名称',
    dataIndex: 'roleName',
    width: "12%"
}, {
    title: '角色介绍',
    dataIndex: 'roleIntroduction',
    className: "role-table-align-left",
    width: "38%"
}, {
    title: '哈哈',
    dataIndex: 'functionList',
    children: [{title: '1',width: "10%"},
               {title: '2',width: "10%"},
               {title: '3',width: "10%"}, 
               {title: '4',width: "10%"},
               {title: '5',width: "10%"}]
}];

看着像是完成了，但是这边我想将这个children里面的内容动态加载，又不想在render中每次render都重新声明一遍，所以这个我放在了componentWillMount中。这是一个写死的对象，后面不会进行修改。（当然也可以声明一个挂在this底下的数组，或者用别的方法，反正当时脑子一抽，就用了这个方法，可能就是想尝试一下。）

然后这边需要用函数执行循环，返回一个数组。

一开始想的使用的是在children那边声明一个function，然后直接return。发现这样children直接就是一个function了，根本不是array。

然后就突然想到了自执行函数。代码大概如下了：

this.columns = [{
    title: '角色名称',
    dataIndex: 'roleName',
    width: "12%"
}, {
    title: '角色介绍',
    dataIndex: 'roleIntroduction',
    className: "role-table-align-left",
    width: "38%"
}, {
    title: '哈哈',
    dataIndex: 'functionList',
    children: (() => {
        let columnList = [];
        privilegeRuleList.map((item) => {
            columnList.push({
                title: item.name,
                width: "10%",
                render: (value, record) => {
                    if (record.functionList && record.functionList.length > 0) {
                        for (let i = 0; i < record.functionList.length; i++) {
                            let thisItem = record.functionList[i];
                            if (thisItem.privilegeCode === item.code && thisItem.checked && !thisItem.checkable) {
                                return <i className="iconfont icon-checkbox-checked disabled" />
                            } else if (thisItem.privilegeCode === item.code && thisItem.checked) {
                                let params = {
                                    roleCode: record.roleCode,
                                    privilegeCode: thisItem.privilegeCode
                                };
                                return <i className="iconfont icon-checkbox-checked" onClick={this.closeThis.bind(this, params)}/>
                            } else if (thisItem.privilegeCode === item.code && thisItem.checkable) {
                                let params = {
                                    roleCode: record.roleCode,
                                    privilegeCode: thisItem.privilegeCode
                                };
                                return <i className="iconfont icon-checkbox-normal" onClick={this.openThis.bind(this, params)}/>
                            }
                        }
                    }
                    return "";
                }
            });
        });
        return columnList;
    })()
}];

后来又找到了一个简单很多的例子，代码如下：

app.isMock = true;
var api = (function () {
    // 服务器真实请求url
    if (!app.isMock) {
        return {
            mock: app.isMock,
            url1: "backend/url1"
        }
    }
    // mock数据
    return {
        mock: app.isMock,
        url1: "data.json"
    }
})()

上面两个例子其实都是一些可被别的方法替代的例子。但是也算是提供了一种可供选择的可行性方案。具体的定义，用处放下面详述。