解构赋值

Author Avatar
Aryb1n 7月 13, 2017

蠢得很啊啊啊啊

今天又看到

const {app, BrowerWindow} = require('electron');

这个是对象解构赋值
在electron模块里有类似的代码

...
exports.app = {
    ...
}
...
exports.BrowerWindow = {
    ...
}
...

上面的require也就是相当于

const electron = require('electron');
const app = electron.app;
const BrowerWindow = electron.BrowerWindow;

那这个和使用

import {app, BrowerWindow} from 'electron'

有什么区别呢

require/exports
这个是CommonJS,是Node.js的规范

import/export
这个是ES6的规范,但其实现在没有人支持他,都是由babel转换成为require/exports的,所以现阶段使用的import/export是编译成了require/exports
在浏览器端使用import的话,只有babel还不行,必须要用webpack+babel
在nodejs这边的话,我就不用import
不过有个babel-node好像可以直接import

不过区别到底在哪里

找到了下面的链接,是从使用方面

  1. imports and exports must be at the top level
if(xxx) {
    require('./a')
} else {
    require('./b')
}   //正确

if(xxx) {
    import 'a'
} else {
    import 'b'
}   //语法错误
  1. imports are hoisted

    我还查了下,这词啥意思,好像是说import可以变量提升,就是说放哪都行

foo();
...
import {foo} from 'some_code';

实际上编译时import是提升到the beginning of the current scope,所以没错

  1. Imports are read-only views on exports
    这个看起来比较,emmmmm~
    好像是说import进来的是live的,read-only的, 其实就是一个只读引用
    require他就是一个,emmmm~,值传递,传进来就和原来的环境没有关系了
    这个看这里吧

##
顺便还有
exports.xxx = yyy;
和module.exports = {
xxx: yyy;
}
的区别
这里好像在朴灵的书上看过但不记得了

参考

http://exploringjs.com/es6/ch_modules.html#_imports-are-hoisted (炒鸡炒鸡不错)
https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export
http://es6.ruanyifeng.com/#docs/module-loader#ES6-%E6%A8%A1%E5%9D%97%E4%B8%8E-CommonJS-%E6%A8%A1%E5%9D%97%E7%9A%84%E5%B7%AE%E5%BC%82