自執行函式
這篇文章不先放定義,現放個碰到的例子。
下圖是需求,大概要製作這麼一個表格。(前提,我們專案是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"
}
})()
上面兩個例子其實都是一些可被別的方法替代的例子。但是也算是提供了一種可供選擇的可行性方案。具體的定義,用處放下面詳述。
自執行函式
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、利用立即執行特性,返回需要的業務函式或物件,避免每次通過條件判斷來處理。(這就是我那兩種情況)
相關文章
- js 匿名自執行函式JS函式
- 自執行函式的理解函式
- 1.自執行函式表示式函式
- 深入理解 函式、匿名函式、自執行匿名函式函式
- JavaScript 匿名立即自執行函式JavaScript函式
- javascript中的自執行(立即執行)函式(function(){…})()JavaScript函式Function
- JavaScript自執行函式(function(){})()的理解JavaScript函式Function
- 胡扯JS系列-匿名函式的自動執行JS函式
- js中自執行函式的怪異行為研究JS函式
- 立即執行函式函式
- javascript常見的幾種自執行函式形式JavaScript函式
- 最為常見的匿名函式自執行方式分享函式
- js立即執行函式原理JS函式
- 多執行緒常用函式執行緒函式
- MySQL 對window函式執行sum函式疑似BugMySql函式
- python函式每日一講 - exec執行函式Python函式
- JavaScript 匿名函式與具名函式執行效率比較JavaScript函式
- js匿名函式和具名函式執行效率比較JS函式
- js 立即執行函式表示式介紹JS函式
- js解惑-函式執行順序JS函式
- 前端進階-執行時函式前端函式
- 立即執行函式(IIFE)&&閉包函式
- JavaScript中的立即執行函式JavaScript函式
- 匿名自執行函式的引數為什麼是window和undefined函式Undefined
- JavaScript 立即執行函式表示式 ( IIFE ) 用例JavaScript函式
- 詳解javascript立即執行函式表示式(IIFE)JavaScript函式
- 圖片載入完執行函式函式
- JS小知識——立即執行函式JS函式
- 鉤子函式的執行機理函式
- js函式執行過程的探究JS函式
- javascript如何終止函式的執行JavaScript函式
- 多執行緒安全strtok函式MStrTok執行緒函式
- Golang時間函式及測試函式執行時間案例Golang函式
- (未完成)APC函式的執行,分析 KiDeliverApc 函式函式IDE
- C++建構函式解構函式的執行過程C++函式
- 在單獨執行緒中執行物件成員函式 (轉)執行緒物件函式
- python之為函式執行設定超時時間(允許函式執行的最大時間)Python函式
- 關於執行緒的幾個函式執行緒函式