看Vue源碼，有兩段代碼寫法不知是何意思，求指教~

最近在看Vue源碼，大多數(shù)代碼查查都能看懂，以下幾段代碼有點不知所措，求大神指導(dǎo)批評~

第一段

這是在 stateMixin 方法中的，以下代碼被大括號包裹。

{
    dataDef.set = function (newData) {
      warn(
        'Avoid replacing instance root $data. ' +
        'Use nested data properties instead.',
        this
      );
    };
    propsDef.set = function () {
      warn("$props is readonly.", this);
    };
}

第二段

就是Vue開頭的那段代碼，括號套的我都快暈了。(function(){ ... })的作用是什么呢，而在function(){ ... }之后直接傳入?yún)?shù)(this, (function ...))是為何呢？

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.Vue = factory());
}(this, (function () { 'use strict';

})))

不止是Vue源碼，其他源碼的開頭好像也都是這么寫的，這是一種什么樣的寫法呢？

回答

編輯回答

忘了我

一般是為了隔離作用域，或者是給代碼劃分出明顯的邊界，提示代碼讀者“這里是一整塊”。
這是用來封裝模塊的。兼容三種模式：exports(CommonJS)、define(AMD)、global(全局)，依次判斷當(dāng)前引用是哪種方式，用適當(dāng)?shù)姆绞綄?dǎo)出當(dāng)前模塊。

2017年1月18日 08:53

編輯回答

我不懂

第一個問題：

你看的代碼是編譯后的，一個if條件判斷在編譯過程中被去掉了，源碼是這樣的：

編譯前的代碼

第二個問題：

就是IIFE（立即執(zhí)行函數(shù)）啦。

如果你想要聲明一個函數(shù)并且立即執(zhí)行，使用function(){/*do something*/}()這種形式是不行的，因為大括號代表語句塊的結(jié)束，后面的圓括號會被認為是下一行的內(nèi)容，需要使用(function(){})()或者(function(){}())的形式。

至于為什么要使用IIFE而不是直接寫代碼呢？是因為過去前端沒有模塊系統(tǒng)，使用script標(biāo)簽引入的js腳本共享同一個作用域，如果不把代碼包起來，很容易產(chǎn)生作用域污染、變量沖突的問題。

傳this而不是直接使用window是出于兼容的考慮，因為js不僅僅在瀏覽器中運行，所以全局變量不一定是window，所以通過傳入全局作用域中的this來適應(yīng)不同的全局變量。

回答的很簡略、很粗糙，沒什么參考價值，想要了解更多最好去看標(biāo)準。

2018年5月9日 22:57

編輯回答