2017/7/17-2017/7/23

1. nginx 配置代理转发（又称反向代理） Nginx 代理转发，让生产和测试环境 React、Vue 项目轻松访问 API，前端路由不再 404。

upstream server-api{
    # api 代理服务地址 
    server 127.0.0.1:3110;    
}
upstream server-resource{
    # 静态资源 代理服务地址
    server 127.0.0.1:3120;
}
server {
    listen       3111;
    server_name  localhost;      # 这里指定域名
    root /home/www/server-statics;
    # 匹配 api 路由的反向代理到API服务
    location ^~/api/ {
        rewrite ^/(.*)$ /$1 break;
        proxy_pass http://server-api;
    }
    # 假设这里验证码也在API服务中
    location ^~/captcha {
        rewrite ^/(.*)$ /$1 break;
        proxy_pass http://server-api;
    }
    # 假设你的图片资源全部在另外一个服务上面
    location ^~/img/ {
        rewrite ^/(.*)$ /$1 break;
        proxy_pass http://server-resource;
    }
    # 路由在前端，后端没有真实路由，在路由不存在的 404状态的页面返回 /index.html
    # 这个方式使用场景，你在写React或者Vue项目的时候，没有真实路由
    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

1. es6模块的加载机制
   
   1. async 与defer，前者是下载完成之后，就执行，后者是整个页面渲染完成之后，就执行。type=module 的模块引入方式，和打开script的defer开关一样。
   2. commonJS 与ES6模块的区别
      
      • 前者是对模块值的拷贝，后者是对值得引用

CommonJS的一个模块，就是一个脚本文件。require命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。

{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}
上面代码就是Node内部加载模块后生成的一个对象。该对象的id属性是模块名，exports属性是模块输出的各个接口，loaded属性是一个布尔值，表示该模块的脚本是否执行完毕。

• 前者是运行时输入，后者是编译时输出。（脚本型语言，怎么会有编译一说？？？？，应该就是运行时，解释器动态去取的值）
• ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块，这是两者的一个重大差异。
• 两者处理循环引用的方式也不一样。commonJS 在遇到循环引用时，可能会存在模块没有执行完的情况，但是es6不会存在模块未执行完的情形。