看Vue源码，有两段代码写法不知是何意思，求指教~

Question

最近在看Vue源码，大多数代码查查都能看懂，以下几段代码有点不知所措，求大神指导批评~

第一段

这是在 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(){ ... }之后直接传入参数(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源码，其他源码的开头好像也都是这么写的，这是一种什么样的写法呢？

Answer 1

第一个问题：

你看的代码是编译后的，一个if条件判断在编译过程中被去掉了，源码是这样的：

第二个问题：

就是IIFE（立即执行函数）啦。

如果你想要声明一个函数并且立即执行，使用function(){/*do something*/}()这种形式是不行的，因为大括号代表语句块的结束，后面的圆括号会被认为是下一行的内容，需要使用(function(){})()或者(function(){}())的形式。

至于为什么要使用IIFE而不是直接写代码呢？是因为过去前端没有模块系统，使用script标签引入的js脚本共享同一个作用域，如果不把代码包起来，很容易产生作用域污染、变量冲突的问题。

传this而不是直接使用window是出于兼容的考虑，因为js不仅仅在浏览器中运行，所以全局变量不一定是window，所以通过传入全局作用域中的this来适应不同的全局变量。

回答的很简略、很粗糙，没什么参考价值，想要了解更多最好去看标准。

Answer 2

第一段，关键字 块级作用域 ,不过去github 上看了，应该没有特别的作用，只是用来分隔下代码
第二段，关键字 立即执行 函数

Answer 3

1. 一般是为了隔离作用域，或者是给代码划分出明显的边界，提示代码读者“这里是一整块”。
2. 这是用来封装模块的。兼容三种模式：exports(CommonJS)、define(AMD)、global(全局)，依次判断当前引用是哪种方式，用适当的方式导出当前模块。