自執行函式

我想成大神發表於2019-06-18
函式

這篇文章不先放定義，現放個碰到的例子。

下圖是需求，大概要製作這麼一個表格。（前提，我們專案是React + Ant Design）

7136475-ffe6ec69da0da7fd.png
需求

根據元件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"
    }
})()

上面兩個例子其實都是一些可被別的方法替代的例子。但是也算是提供了一種可供選擇的可行性方案。具體的定義，用處放下面詳述。

自執行函式

1、自執行函式主要的作用在於隔離作用域。js中沒有塊級作用域，用來隔離作用域避免汙染，或者截斷作用域鏈，避免閉包造成引用變數無法釋放。

var currentTime = (function() {
    var time = new Date(); 
    var year = time.getFullYear();
    var month = time.getMonth + 1;
    var day = time.getDate();
    var hour = time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    return year + ":" + month + ":" + day + " " + hour + ":" + minute + ":" + second;
})()

2、利用立即執行特性，返回需要的業務函式或物件，避免每次通過條件判斷來處理。（這就是我那兩種情況）

相關文章