模組化與 Library


Posted by ericcch24 on 2020-10-16

模組:不同的功能分開來放


借別人的東西來用:require

  • 把已寫好的 module 功能引用近來
    let os = require('os') // node.js 本身有提供一些 module
    console.log(os.platform())
    
  • ES6 語法 ==import {} form ''==
    import {addFunction, PI} from './utils' // {}裡面放別人的變數或函式模組
    console.log(addFunction(3, 5)), PI)
    ///
    import {addFunction as add, PI} from './utils' // 也可以用 as 改名
    console.log(add(3, 5)), PI)
    ///
    import * as utils from './utils'
    // 把 ./utils 裡面的東西全部都 import 進來,東西多的時候使用
    // as utils 可以隨意命名
    console.log(utils.addFunction(3, 5)), utils.PI)
    

把東西借給別人:export

  • 當有不同檔案要作一樣的事或使用相同的 function 的時候,兩邊都寫 function 的話出來很耗時間又很難改,這時就可以在 module 把要用的 function 存起來,在其他檔案藥用的時候就可以直接 require 出來,要修改 function 也只要在 module 那邊改一次就好。
    ``` javascript
    // module 檔案
    function double(n) {
    return n * 2
    }

let obj = {
double: double,
triple: function(n) {
return n * 3
}
}
module.exports = double //這邊可以接任何東西(包含數字或陣列),可以在其他檔案 require 來作使用,這個方式 requrie 什麼就是輸出什麼
module.exports = obj // 此時的 module 就是上面宣告的物件

// 另一個 export 方式
exports.double = double // 此時的 module require 出的是物件,export 類似空物件的概念
exports.triple = function(n) {
return n * 3
}

//require 使用模組的檔案
let myModule = require('./myModule')

console.log(myModule)

* ES6 語法 ==前面加 export==
```javascript=
export function double(n) {
  return n * 2 
}

export const PI = 3.14 

export let obj = {
  double: double,
  triple: function(n) {
    return n * 3
  }
}

也可以寫在一起

function double(n) {
  return n * 2 
}

const PI = 3.14 

let obj = {
  double: double,
  triple: function(n) {
    return n * 3
  }
}

export {
  double as doubleFunction, //也可以改名,但 import 端就要用新名稱
  PI,
  obj
} //這不是物件
  • ==default 預設值==
    ```javascript=
    export default function double(n) {
    return n * 2
    } // import double, {PI} from './utils'
         不用加大括號
    
    export const PI = 3.14

let obj = {
double: double,
triple: function(n) {
return n * 3
}
}
```

tags: Week3

#week3







Related Posts

JS 箭頭函式

JS 箭頭函式

如何不使用 create-react-app 自己打造應用程式

如何不使用 create-react-app 自己打造應用程式

[Note] React: React.memo

[Note] React: React.memo


Comments