es6中容易忽視的細節（三）

永恆發表於2019-02-16

proxy代理的坑

  • var obj = {index:`index`}
    var newObj = new Proxy(obj,{
        get:(target,key)=>{
            console.log(target)  // {index: "index"}
            return target[key]+123;
            // return target.key  如果這塊這樣返回的話訪問newObj.index就會報undefined
        }
    })
    newObj.index    // index123
    實踐中遇到這樣的問題，但是具體什麼原因還還弄清楚，有誰希望大家在底部留言告知，不勝感激

es6中模組與commonJs的區別

ES6 模組的設計思想，是儘量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。

  • CommonJS 模組就是物件，輸入時必須查詢物件屬性；ES6 模組不是物件，而是通過export命令顯式指定輸出的程式碼，再通過import命令輸入。

    
```
// CommonJS模組：這種引入方式只有在執行時載入，並且把整個fs物件引入，不能夠靜態載入
let { stat, exists, readFile } = require(`fs`);
// ES6模組：es6的模組中的每一個元件都是獨立的，這樣引入只把對應元件引入，能夠靜態載入(這就導致無法動態的載入需要模組，實現模組的按需載入)
import { stat, exists, readFile } from `fs`;
```

  • import命令接受一對大括號，裡面指定要從其他模組匯入的變數名。大括號裡面的變數名，必須與被匯入模組（profile.js）對外介面的名稱相同。

    var a={name:`zhangsan`,sex:`man`};
export {person as a};

import {personX as person} form `./person.js`;

  • import命令有自動提升的功能，會自動提升到檔案的頂部，所以在檔案中只要我們引入即可使用，不需要考慮引入的位置，與let相反

    console.log(personX);    // {name:`zhangsan`,sex:`man`};這樣不會報錯
import {personX as person} form `./person.js`;

  • import是靜態執行，所有在引入元件過程中能不能摻雜任何表示式

    // 報錯
if (x === 1) {
  import { foo } from `module1`;
} else {
  import { foo } from `module2`;
}
import `lodash`    // 這樣會直接執行模組
  • import命令與require命令同時存在時會先執行import命令，因為import在靜態解析階段執行，所以它是一個模組之中最早執行的。

  • import與export結合使用

    export { es6 as default } from `./someModule`;

// 等同於
import { es6 } from `./someModule`;
export default es6;
這樣暴露在另一個檔案中引入的時候就可以 import anyName from `es6`;
  • import()類似於commonJs的require()區別是前者是非同步執行，後者是同步執行

擴充套件

  • module.exports==export.default，這樣暴露引入的時候就可以任意指定模組名稱，exports暴露引入時只能用{}把內部元件包裹起來

相關文章