深度閱讀

時間 2019-11-16

標籤深度閱讀简体版

原文原文鏈接

原文：tylermcginnis.com/javascript-…javascript

本文經過現代社會工廠生產一塊手錶的過程，引伸出如何構建一個物理邏輯都隔離的模塊，論述了其包含的思想原則。另外從js發展過程當中爲實現這些原則而不斷作出的努力和嘗試，經過了解這些歷史，咱們能更深刻了解ES Modules的設計原則，但願可以對咱們日常編寫代碼提供一些啓發。html

一塊手錶由成千上萬個零部件構成，每個零部件都有其自身的做用，而且如何與其它零部件搭配都有比較清晰的規定，把它們組裝在一塊兒就是一塊手錶，那這其中能給咱們帶來哪些啓示呢？java

可複用性
可組合型
中心化
獨立性

延伸到實際js開發中，對每一個文件或者代碼塊的要求就是可以被重複使用，具備相對獨立性（本身負責本身的一塊），可以和相關模塊進行組合，且整個模塊有一個統一的調度中心負責去組合這些獨立的模塊。node

IIFE

咱們先看下原始時代，即Jquery仍是巔峯的時代，那個時候咱們是如何分割代碼的,如下就是一個簡單的增長用戶，列舉用戶的一個curd例子webpack

// users.js
var users = ["Tyler", "Sarah", "Dan"]

function getUsers() {
  return users
}
複製代碼

// dom.js

function addUserToDOM(name) {
  const node = document.createElement("li")
  const text = document.createTextNode(name)
  node.appendChild(text)

  document.getElementById("users")
    .appendChild(node)
}

document.getElementById("submit")
  .addEventListener("click", function() {
    var input = document.getElementById("input")
    addUserToDOM(input.value)

    input.value = ""
})

var users = window.getUsers()
for (var i = 0; i < users.length; i++) {
  addUserToDOM(users[i])
}
複製代碼

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Users</title>
  </head>

  <body>
    <h1>Users</h1>
    <ul id="users"></ul>
    <input
      id="input"
      type="text"
      placeholder="New User">
    </input>
    <button id="submit">Submit</button>

    <script src="users.js"></script>
    <script src="dom.js"></script>
  </body>
</html>
複製代碼

看着代碼好像咱們是把文件分割開了，但實際上並無，這種方式只是物理上看起來把項目分紅多個模塊，而其實他們都是掛靠在window對象上的，運行代碼查看便可發現。那容易帶來的問題就是，第三方能夠隨意去修改它們，回想下，是否是不符合模塊獨立性原則。同時這樣也容易對window對象形成污染。web

而後緊接着，咱們想到既然不能放在window對象上，咱們就本身定義一個變量，好比App來承載這些屬性和方法，稱之爲命名空間。代碼會變成以下這樣瀏覽器

// App.js
var APP = {}
複製代碼

// users.js
function usersWrapper () {
  var users = ["Tyler", "Sarah", "Dan"]

  function getUsers() {
    return users
  }

  APP.getUsers = getUsers
}

usersWrapper()
複製代碼

// dom.js

function domWrapper() {
  function addUserToDOM(name) {
    const node = document.createElement("li")
    const text = document.createTextNode(name)
    node.appendChild(text)

    document.getElementById("users")
      .appendChild(node)
  }

  document.getElementById("submit")
    .addEventListener("click", function() {
      var input = document.getElementById("input")
      addUserToDOM(input.value)

      input.value = ""
  })

  var users = APP.getUsers()
  for (var i = 0; i < users.length; i++) {
    addUserToDOM(users[i])
  }
}

domWrapper()
複製代碼

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Users</title>
  </head>

  <body>
    <h1>Users</h1>
    <ul id="users"></ul>
    <input
      id="input"
      type="text"
      placeholder="New User">
    </input>
    <button id="submit">Submit</button>

    <script src="app.js"></script>
    <script src="users.js"></script>
    <script src="dom.js"></script>
  </body>
</html>
複製代碼

咱們首先不討論命名空間也容易被污染的問題，這種方式，咱們的用戶列表如今不容易被外部篡改以及增長用戶的邏輯都放在App對象下，獨立性有了保證，惟一多了usersWrapper和domWrapper兩個包裹函數須要主動去調用下。相比以前有了很大改進。但這兩個函數仍是暴露在window對象上，後面就有了當即執行函數-IIFE。bash

// App.js
var APP = {}
複製代碼

// users.js

(function () {
  var users = ["Tyler", "Sarah", "Dan"]

  function getUsers() {
    return users
  }

  APP.getUsers = getUsers
})()
複製代碼

// dom.js

(function () {
  function addUserToDOM(name) {
    const node = document.createElement("li")
    const text = document.createTextNode(name)
    node.appendChild(text)

    document.getElementById("users")
      .appendChild(node)
  }

  document.getElementById("submit")
    .addEventListener("click", function() {
      var input = document.getElementById("input")
      addUserToDOM(input.value)

      input.value = ""
  })

  var users = APP.getUsers()
  for (var i = 0; i < users.length; i++) {
    addUserToDOM(users[i])
  }
})()
複製代碼

如今除了App變量還暴露在window對象上以外，另外兩個函數都有了本身的獨立的做用域，外部不能修改它們。雖然這種方式不是很完美，可是仍是邁進了一大步。app

CommonJS

後面Node.js出來了，有個CommonJS規範，可以導出一個方法或變量，在須要的文件中可以導入一個方法或變量，但它在現代瀏覽器中沒法運行，且它是同步的，沒法知足現代瀏覽器對性能的要求。基於此社區也出現了不少方案，最火的莫過於webpack,經過webpack你能將基於CommonJS規範編寫的代碼打包成一個bundle,在入口index.html文件中直接引用這個bundle便可。然而經過查看webpack編譯後的代碼你會發現本質上運用的仍是IIFE模式，且最關鍵的仍是CommonJS是同步的，不支持異步加載，另外就是它是運行時加載，沒法作靜態分析致使類如tree shaking等特性沒法被知足。dom

(function(modules) { // webpackBootstrap
  // The module cache
  var installedModules = {};
  // The require function
  function __webpack_require__(moduleId) {
    // Check if module is in cache
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // Create a new module (and put it into the cache)
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };
    // Execute the module function
    modules[moduleId].call(
      module.exports,
      module,
      module.exports,
      __webpack_require__
    );
    // Flag the module as loaded
    module.l = true;
    // Return the exports of the module
    return module.exports;
  }
  // expose the modules object (__webpack_modules__)
  __webpack_require__.m = modules;
  // expose the module cache
  __webpack_require__.c = installedModules;
  // define getter function for harmony exports
  __webpack_require__.d = function(exports, name, getter) {
    if(!__webpack_require__.o(exports, name)) {
      Object.defineProperty(
        exports,
        name,
        { enumerable: true, get: getter }
      );
    }
  };
  // define __esModule on exports
  __webpack_require__.r = function(exports) {
    if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };
  // create a fake namespace object
  // mode & 1: value is a module id, require it
  // mode & 2: merge all properties of value into the ns
  // mode & 4: return value when already ns object
  // mode & 8|1: behave like require
  __webpack_require__.t = function(value, mode) {
    if(mode & 1) value = __webpack_require__(value);
    if(mode & 8) return value;
    if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
    var ns = Object.create(null);
    __webpack_require__.r(ns);
    Object.defineProperty(ns, 'default', { enumerable: true, value: value });
    if(mode & 2 && typeof value != 'string')
      for(var key in value)
        __webpack_require__.d(ns, key, function(key) {
          return value[key];
        }.bind(null, key));
    return ns;
  };
  // getDefaultExport function for compatibility with non-harmony modules
  __webpack_require__.n = function(module) {
    var getter = module && module.__esModule ?
      function getDefault() { return module['default']; } :
      function getModuleExports() { return module; };
    __webpack_require__.d(getter, 'a', getter);
    return getter;
  };
  // Object.prototype.hasOwnProperty.call
  __webpack_require__.o = function(object, property) {
      return Object.prototype.hasOwnProperty.call(object, property);
  };
  // __webpack_public_path__
  __webpack_require__.p = "";
  // Load entry module and return exports
  return __webpack_require__(__webpack_require__.s = "./dom.js");
})
/************************************************************************/
({

/***/ "./dom.js":
/*!****************!*\
  !*** ./dom.js ***!
  \****************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval(`
  var getUsers = __webpack_require__(/*! ./users */ \"./users.js\").getUsers\n\n function addUserToDOM(name) {\n const node = document.createElement(\"li\")\n const text = document.createTextNode(name)\n node.appendChild(text)\n\n document.getElementById(\"users\")\n .appendChild(node)\n}\n\n document.getElementById(\"submit\")\n .addEventListener(\"click\", function() {\n var input = document.getElementById(\"input\")\n addUserToDOM(input.value)\n\n input.value = \"\"\n})\n\n var users = getUsers()\n for (var i = 0; i < users.length; i++) {\n addUserToDOM(users[i])\n }\n\n\n//# sourceURL=webpack:///./dom.js?` );}), /***/ "./users.js": /*!******************!*\ !*** ./users.js ***! \******************/ /*! no static exports found */ /***/ (function(module, exports) { eval(` var users = [\"Tyler\", \"Sarah\", \"Dan\"]\n\n function getUsers() {\n return users\n}\n\nmodule.exports = {\n getUsers: getUsers\n }\n\n//# sourceURL=webpack:///./users.js?`);}) }); 複製代碼

ES Modules

爲了解決以上種種問題，TC-39發佈了ES Modules,對比以往，沒有任何新的命名空間被建立，每一個模塊都是獨立的，互不干擾的，能夠隨時被組合在一塊兒。

// users.js

var users = ["Tyler", "Sarah", "Dan"]

export default function getUsers() {
  return users
}
複製代碼

// dom.js

import getUsers from './users.js'

function addUserToDOM(name) {
  const node = document.createElement("li")
  const text = document.createTextNode(name)
  node.appendChild(text)

  document.getElementById("users")
    .appendChild(node)
}

document.getElementById("submit")
  .addEventListener("click", function() {
    var input = document.getElementById("input")
    addUserToDOM(input.value)

    input.value = ""
})

var users = getUsers()
for (var i = 0; i < users.length; i++) {
  addUserToDOM(users[i])
}
複製代碼

<!DOCTYPE html>
<html>
  <head>
    <title>Users</title>
  </head>

  <body>
    <h1>Users</h1>
    <ul id="users">
    </ul>
    <input id="input" type="text" placeholder="New User"></input>
    <button id="submit">Submit</button>

    <script type=module src='dom.js'></script>
  </body>
</html>
複製代碼

Tree Shaking

CommonJS modules 和 ES Modules有一個最大的不一樣，經過CommonJS你能導入任何模塊在任何地點

if (pastTheFold === true) {
  require('./parallax')
}
複製代碼

而ES Modules由於是靜態的，只能在文件最開頭導入

if (pastTheFold === true) {
  import './parallax' // "import' and 'export' may only appear at the top level"
}
複製代碼

爲何這麼設計呢，緣由是靜態分析，咱們可以分析出導入的模塊，若是有些模塊沒有被使用，咱們經過tree shaking去除這些無用的代碼，從而減小代碼體積，進而提高運行性能，而CommonJS是動態分析的，就沒法作到這一點，這也是爲啥webpack後面版本才只是tree skaking特性的緣由，由於它必須依賴於ES6 Modules靜態編譯特性。

Export Default的問題

Es Modules導出有export 和 export default兩種方式，它們區別以下：

export與export default都可用於導出常量、函數、文件、模塊等
在一個文件或模塊中，export、import能夠有多個，export default僅有一個
經過export方式導出，在導入時要加{ }，export default則不須要
export能直接導出變量表達式，export default不行。

我這裏主要想講的是儘可能減小export default的使用，理由以下：

export default由於是總體導出，tree shaking沒法分析哪些使用哪些沒使用，從而沒法減小無效代碼
我的以爲代碼應該符合一致性原則，因爲export default導出在引入的時候能夠隨意命名使用變量，在團隊分工從事的狀況下，容易形成引入同一個模塊命名不同帶來的代碼先後不一致的問題。

以上就是我對整篇文章的深度閱讀，但願這邊文章對您在認識模塊系統上有必定的幫助，若是喜歡個人文章，歡迎您的點贊！

相關標籤/搜索

閱讀

深度