重新踏入網頁開發 (2) - ES6

模組化

    Ryan Dahl 創造的 node.js 專案之所以如此重要, 是因為其理念為 模組(module), 讓 javascript 的大規模專案得以實現, 也讓 javascript 可以做伺服器端程式設計。

node.js 的模組

    這裡示範 node.js 原生的模組,

• moduleA.js

      // 想像這裡有隱藏程式碼
      // # var module = new Module(...);
      // # var exports = module.exports;
      // index.js 在 call "require("./ModuleA");"
      // 等於回傳 module.exports
      var name = "JunYe";
      exports.name = name;

• moduleB.js

      // 想像這裡有隱藏程式碼
      // # var module = new Module(...);
      // # var exports = module.exports;
      // index.js 在 call "require("./ModuleB");"
      // 等於回傳 module.exports
      var name = "Daniel";
      exports.name = name;

• index.js

      var a = require("./moduleA");
      var b = require("./moduleB");
      console.log(a.name + " and " + b.name + " both are the best.");

• 執行 node index.js

      $>:node index.js 
      JunYe and Daniel both are the best.

ES6 的模組

    ES6 是較新的 javascript 規範, 沒錯就是規範, javascript 並非正規的程式語言, 而是一種語言規範, 而其 runtime 的執行則讓各個瀏覽器引擎決定(nodejs也是其中之一)。雖然 ES6 是較新的規範, 但大部分的瀏覽器都有支援了。以下為 nodejs 支援 ES6 的示範

    這裡有個前置作業, 要使用 npm init 去創造 package.json, 然後把 type 改成 module.

• studentA.js

      export var _name = "JunYe";
      export var _class = "SSS";
      export var _number = "3064";

• function.js

      export function intro (name, number) {
          console.log("My name is " + name + ", and my number is " + number);
      };

• index.js

      // 要在 package.json 加 type: module
      // 才能達到 <script src="./function.js" type="module"></script> 的效果
      // 這邊不知道為什麼要加 .js 才給過
      import { intro } from "./function.js";
      import { _name, _number } from "./studentA.js";
      intro(_name, _number);

• 執行 node index.js

      $>:node index.js 
      My name is JunYe, and my number is 3064

上一篇 :

重新踏入網頁開發 (1) - Nodejs

下一篇 :

重新踏入網頁開發 (3) - Route

參考資料 :

1. 一文讓你徹底搞清楚javascript中的require、import與export

2. Day 11: ES6篇: Module System(模組系統)

3. Node.js使用ES6 Module