Keperluan JavaScript: Bahagian 7

Ini adalah bahagian ke-7 Siri JavaScript ini (sebagai sebahagian daripada keseluruhan) dan dalam bahagian ini, kami akan melihat bagaimana untuk memecahkan projek kami kepada kepingan kecil supaya ia terurus. Kami akan mencipta beberapa jenis pengasingan kebimbangan, menjadikan projek kami menarik dan mudah dinavigasi. Dalam semua perkara, ada bahagian yang cantik dan sudah tentu bahagian yang hodoh. Jadi, jangan berlebihan. Lakukan apabila ia perlu dilakukan.

Seperti yang dinyatakan sebelum ini, tumpuan kami di sini adalah untuk memecahkan sebahagian daripada projek kami menjadi fail berasingan, mengeksportnya dan kemudian mengimportnya ke dalam "apl utama" kami. Pada masa ini terdapat dua cara untuk melakukan ini dalam JavaScript. Menggunakan pendekatan commonjs dan juga pendekatan modular ES6. Mereka semua hebat dan kami akan melihat kedua-duanya.

CommonJs

Import dan eksport dengan commonjs ialah lalai apabila tidak dinyatakan. Begitulah yang boleh kita lakukan, const readline = require("readline");. readline ialah pakej terbina dalam. Kami boleh menggunakan pendekatan ini pada pakej atau modul pihak ketiga yang ditulis dalam projek kami.

• Import dengan commonjs dilakukan dengan const someVarNameForTheModule = require("modNameOrPath");.
• Kami mengeksport dengan melakukan, module.exports = thingToExportOrStructuredObjectToExport.

Projek

Mari kita mulakan dengan projek untuk melaksanakan beberapa matematik. Kami akan mencipta fungsi untuk menambah dan menolak. Hanya dua ini.

• Buat folder projek, cmodule: cd ~/Projek && mkdir cmodule && cd cmodule
• Mulakan projek nod dengan melakukan, npm init -y
• Anda boleh memilih untuk menambah, "type": "commonjs" pada fail package.json. Saya katakan anda boleh memilih kerana itu adalah lalai.

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

• Buat dua fail, lib.js dan main.js: sentuh lib.js main.js
• Laksanakan badan untuk fungsi tambah dalam lib.js

  function add(x, y) {
    // return the sum of x and y
  }

• Sekarang kita mempunyai fungsi yang dilaksanakan, kita perlu mengeksportnya untuk digunakan dalam main.js kami. Untuk mengeksport, kami menggunakan module.exports = functionName. Dalam kes kami, kami melakukan module.exports = tambah.

  module.exports = add;

• Di sini keseluruhan lib.js hanyalah fungsi tambah. Kami mengeksport lib.js sebagai fungsi tambah. Jadi kita boleh mengimportnya sebagai, const someName = require("./lib");
• Dalam main.js, kami akan mengimport fail lib.js dan menggunakan fungsi tambah.

  const lib = require("./lib");
  // we did, "./lib", "dot slash lib", because main.js and lib.js are in the same folder.

  console.log(lib(1, 2));

• Jom tambah fungsi tolak

  function sub(x, y) {
    // returns the difference x and y
  }

• Anda sepatutnya melaksanakan fungsi ini sendiri ?

• Persoalannya, bagaimana kita mengeksport sub? Cuba dan aksesnya di dalam main.js

• Ketahui bahawa, apabila kita melakukannya, module.exports = X, X dieksport sebagai keseluruhan modul jadi apabila kita mengimport const moduleName = require("moduleName");, kita terus mendapat akses kepada X. Jadi kita tidak boleh mengeksport nilai lain dengan pendekatan yang sama ini.

• Dalam kes seperti ini, kita boleh mengeksport kedua-dua add dan sub dengan mengeksportnya sebagai kumpulan (objek).
  

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

• Kini apabila kita mengimport dalam main.js kita boleh lakukan

  function add(x, y) {
    // return the sum of x and y
  }

• Modul lib dieksport sebagai objek supaya kita boleh lakukan, moduleName.add dan moduleName.sub.

• Kami juga boleh mengimport dengan melakukan dengan memusnahkan, const { add, sub } = require("./lib");
  

  module.exports = add;

• Terdapat cara lain untuk melakukan berbilang eksport

  const lib = require("./lib");
  // we did, "./lib", "dot slash lib", because main.js and lib.js are in the same folder.

  console.log(lib(1, 2));

Atau

  function sub(x, y) {
    // returns the difference x and y
  }

• exports.alias = someThing dan exports.someThing= someThing atau juga berfungsi seperti modules.exports = { someThing }. Saya biasanya akan memilih exports.alias = someThing kerana, module.exports = { ... } boleh menggunakan baris tambahan.

Modul ES

Import dan eksport dengan gaya modul ES bukanlah lalai pada masa ini dan oleh itu mesti dinyatakan secara eksplisit dengan menetapkan sifat jenis kepada "modul" dalam package.json fail. Dalam kes ini, kita akan dapat melakukan, mengimport readline daripada "readline"; bukannya const readline = require("readline");. Kami menggantikan const dengan import, = dan memerlukan dengan daripada.

• Pengimportan modul ES dilakukan dengan import someVarNameForTheModule daripada "modNameOrPath";.
• Kami mengeksport dengan melakukan, mengeksport lalai thingToExportOrStructuredObjectToExport atau mengeksport thingToExportOrStructuredObjectToExport.

Projek

Kami akan membina projek serupa menggunakan gaya modul ES import dan eksport. Kami akan mencipta fungsi untuk menambah dan menolak seperti yang kami lakukan sebelum ini. Jadi anda boleh salin dan tampal kali ini.

• Buat folder projek, emodule: cd ~/Projek && mkdir emodule && cd emodule
• Mulakan projek nod: npm init -y
• Tambah, "type": "module" pada fail package.json.

  module.exports = { add, sub };

• Buat dua fail, lib.js dan main.js: sentuh lib.js main.js

• Laksanakan badan untuk penambahan dalam lib.js
  

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

• Sekarang kita mempunyai fungsi tambah yang dilaksanakan, kita perlu mengeksportnya untuk digunakan dalam main.js kami. Untuk mengeksport, kita boleh menggunakan export default functionName. Dalam kes kami, kami mengeksport tambah lalai.

  function add(x, y) {
    // return the sum of x and y
  }

• Kami juga boleh melakukannya

  module.exports = add;

• Di sini keseluruhan lib.js hanyalah fungsi tambah. Kami mengeksport lib.js sebagai fungsi tambah. Jadi kita boleh mengimportnya sebagai, import someName daripada "./lib";
• Dalam main.js, kami akan mengimport fail lib.js dan menggunakan fungsi tambah.

  const lib = require("./lib");
  // we did, "./lib", "dot slash lib", because main.js and lib.js are in the same folder.

  console.log(lib(1, 2));

• Jom tambah fungsi tolak

  function sub(x, y) {
    // returns the difference x and y
  }

• Persoalannya, bagaimana kita mengeksport sub?
• Dalam kes seperti ini, kita boleh mengeksport kedua-dua add dan sub dengan mengeksportnya sebagai kumpulan (objek).

  module.exports = { add, sub };

• Kini apabila kita mengimport dalam main.js kita boleh lakukan

  const lib = require("./lib");
  // lib is an object so we can do lib dot someThing

  console.log(lib.add(1, 2));
  console.log(lib.sub(1, 2));

• Kami juga boleh mengimport dengan melakukan, import { add, sub } daripada "./lib";

  const { add, sub } = require("./lib");

  console.log(add(1, 2));
  console.log(sub(1, 2));

• Terdapat cara lain untuk melakukan berbilang eksport

  exports.add = function add(x, y) {
    // return the sum of x and y
  };

  exports.sub = function sub(x, y) {
    // return the difference of x and y
  };

Atau

  exports.add = function (x, y) {
    // return the sum of x and y
  };

  exports.sub = function (x, y) {
    // return the difference of x and y
  };

• Dengan pendekatan seperti ini, sama ada, kami menggabungkan keseluruhan eksport sebagai satu import atau mengakses import individu satu demi satu

  {
    "name": "emodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "module",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

ATAU

  function add(x, y) {
    // return the sum of x and y
  }

Ringkasan

Untuk menggunakan gaya import dan eksport modul commonjs atau es adalah relatif. commonjs datang tanpa konfigurasi, jadi seseorang akan bertanya mengapa tidak menggunakannya seperti sedia ada? module.exports = someObject adalah sama seperti export default someObject. Kita boleh mengimport dengan const someObject = require("pathToModule"); dan import someObject dari "pathToModule";. Saya suka berkata, yang mana anda pilih tidak mengapa. Anda boleh mempunyai modul/eksport lalai dan juga eksport individu dalam fail yang sama.

Ini adalah beberapa peraturan yang saya cuba patuhi semasa saya membangunkan projek bahagian belakang saya:

• Saya mengelakkan eksport lalai atau eksport modul sebanyak mungkin dan menggunakan eksport objek individu
• Jika saya mempunyai pengawal, saya menggunakan eksport lalai/modul tanpa mengeksport apa-apa lagi daripada fail yang sama. Jadi apabila saya menggunakan module.exports atau export lalai, saya tidak melakukan sebarang eksport lain daripada fail yang sama
• Saya sama ada menggunakan objek untuk mengumpulkan pemalar saya dan mengeksportnya secara lalai atau saya akan melakukan eksport individu semua pemalar.
• Kami boleh mengeksport objek tanpa menamakannya dan ia berfungsi dengan baik dengan alias (nama yang anda berikan) tetapi saya lebih suka menamakan eksport saya

Bolehkah anda meneka apa yang seterusnya? Baiklah, kita akan mula melakukan beberapa sihir bahagian belakang. Kami akan memulakan pembangunan bahagian belakang.

Projek sampingan

Jika ia mencabar anda, tulis semula program dalang menggunakan berbilang fail. Semasa mengenai topik saya akan mencabar anda. Lengkapkan projek ini. Sama ada tulis semula agar ia berfungsi atau lakukan apa sahaja yang anda perlu lakukan untuk menjadikannya berkesan dan gunakan pelajaran hari ini.

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

Atas ialah kandungan terperinci Keperluan JavaScript: Bahagian 7. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!