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

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

第一段

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

{
    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開(kāi)頭的那段代碼，括號(hào)套的我都快暈了。(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源碼，其他源碼的開(kāi)頭好像也都是這么寫(xiě)的，這是一種什么樣的寫(xiě)法呢？

回答

編輯回答

忘了我

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

2017年1月18日 08:53

編輯回答

我不懂

第一個(gè)問(wèn)題：

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

編譯前的代碼

第二個(gè)問(wèn)題：

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

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

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

傳this而不是直接使用window是出于兼容的考慮，因?yàn)閖s不僅僅在瀏覽器中運(yùn)行，所以全局變量不一定是window，所以通過(guò)傳入全局作用域中的this來(lái)適應(yīng)不同的全局變量。

回答的很簡(jiǎn)略、很粗糙，沒(méi)什么參考價(jià)值，想要了解更多最好去看標(biāo)準(zhǔn)。

2018年5月9日 22:57

編輯回答