Ajar anda langkah demi langkah cara menulis modul biasa menggunakan JS (penjelasan kod terperinci)

Dalam artikel sebelumnya "Analisis ringkas kaedah operasi cap masa dalam JavaScript (dengan kod) ", kami mengetahui tentang kaedah operasi cap masa dalam js. Artikel berikut akan menunjukkan kepada anda cara menggunakan JS untuk menulis modul biasa Mari lihat cara melakukannya bersama-sama.

Masalah modulariti tidak wujud dari awal Apabila WWW mula-mula keluar, html, JavaScript, CSS (<.> dan JS (kedua-duanya kemudiannya diperkenalkan ke dalam pelayar di Netscape) adalah sangat mudah dan tidak memerlukan modularisasi. CSS

Permintaan untuk modulariti adalah produk skala Apabila

berkembang kepada web page, logik yang diproses oleh penyemak imbas menjadi lebih kompleks, lebih banyak gaya dan animasi dipaparkan, dan kejuruteraan. keperluan juga meningkat. Kemudian keperluan untuk modularisasi wujud. Maksud modulariti: web application

• Penggunaan semula komponen mengurangkan kos pembangunan dan penyelenggaraan

• Komponen dibangunkan secara individu untuk memudahkan pembahagian kerja dan kerjasama

• Modulariti mengikut piawaian untuk memudahkan pengurusan pergantungan automatik, pengoptimuman kod dan penggunaan

Ia telah lama dianggap sebagai bahasa skrip yang mudah hakikatnya, Keadaan telah lama berubah Dalam versi terkini dokumen JavaScript, ia ditekankan bahawa ECMA-262（ES6） ialah bahasa pengaturcaraan umum dan bukannya bahasa skrip. Bahasa skrip, seperti JavaScript tidak digunakan untuk melengkapkan fungsi yang kompleks, tetapi hanya digunakan untuk melakukan beberapa kawalan automatik dan tidak perlu dimodulatkan. Bahasa pengaturcaraan tujuan am (seperti shell) yang digunakan untuk membina sistem yang kompleks biasanya mempunyai pelaksanaan modul. Java

Sebelum

, bahasa ES6 bukan modular Bagaimana untuk menjadikan JS bukan sahaja dijalankan dalam penyemak imbas, tetapi juga mengurus kod dengan lebih berkesan? Jadi spesifikasi JS wujud, mentakrifkan tiga pembolehubah global: CommonJS

require，exports，module

• digunakan untuk memperkenalkan modul require

• Antara muka modul yang terdedah secara luaran boleh terdiri daripada sebarang jenis exports

• ialah objek modul itu sendiri module

Apa yang diperoleh apabila mengimport ialah antara muka luaran modul ini (require) exports

menggunakan spesifikasi Node.js: CommonJS

var foo = require("foo");
var out = foo.sayName();
module.exports = out;

di sebelah penyemak imbas, tidak Seperti

secara dalaman menyokong Node.js, bagaimana untuk memodulasikannya, jadi terdapat dua cara: CommonJS dan CMD, wakil utama ialah AMD dan seajs, kedua-duanya mentakrifkan fungsi global tentukan Cipta modul: requirejs

//CMD
define(function (require, exports, module) {
  var foo = require("foo");
  var out = foo.sayName();
  module.exports = out;
});

//AMD
define(["foo"], function (foo) {
  var out = foo.sayName();
  return out;
});

Anda dapat melihat bahawa

mengekalkan gaya CMD utuh. Dan CommonJS menggunakan cara suntikan pergantungan dan pengembalian fungsi yang lebih ringkas untuk mencapai modulariti. Selain daripada gaya yang berbeza, perbezaan terbesar antara kedua-duanya ialah cara memuatkan modul bergantung AMD ialah memuatkan malas, dan kebergantungan hanya akan dimuatkan apabila CMD digunakan. Dan require sedang pramuat, yang memuatkan semua kebergantungan terlebih dahulu semasa mentakrifkan modul. AMD

Kami ingin melaksanakan modul supaya ia boleh diperkenalkan dalam persekitaran

dan seajs（CMD） Sudah tentu, ia juga boleh digunakan dalam requirejs（AMD）Node.js , ia boleh Gunakan teg （CommonJS） untuk memperkenalkannya secara global dalam persekitaran tanpa modulariti. script

Mula-mula buat modul

var factory = function () {
  var moduleName = {};
  return moduleName;
};

Sudah tentu

output boleh menjadi apa-apa nilai, objek, kelas, apa-apa lagi return

Pertama puaskan

atau Node.js, kita boleh menilai ES6moduleexports melalui pembolehubah global

dan

var factory = function () {
  var moduleName = {};
  return moduleName;
};
if (typeof module !== "undefined" && typeof exports === "object") {
  module.exports = factory;
}

Dalam

dan CMD, kami perlu menyediakan fungsi kilang untuk lulus AMD untuk menentukan. modul , apabila tiada pembolehubah global yang disebutkan di atas dan terdapat define pembolehubah global, kami fikir ia adalah define atau AMD, dan anda boleh terus menghantar CMD ke dalam factory: define

var factory = function () {
  var moduleName = {};
  return moduleName;
};
if (typeof module !== "undefined" && typeof exports === "object") {
  module.exports = factory;
} else if (typeof define === "function" && (define.cmd || define.amd)) {
  define(factory);
}

Nota: CMD sebenarnya turut menyokong antara muka modul pemulangan, jadi kedua-duanya boleh digunakan secara bergantian.

Kemudian kita perlu memenuhi pengenalan global teg

Kita boleh meletakkan modul pada script Untuk menggunakan objek global di dalam modul dalam pelayar dan window , kita boleh Membuat pertimbangan ini: Node.js

var global = typeof window !== "undefined" ? window : global;

Kami menggunakan fungsi penutupan yang dilaksanakan serta-merta untuk memasukkan semua kod untuk mengelakkan pencemaran ruang global dan menghantar objek

ke dalam fungsi penutupan, yang akhirnya menjadi seperti ini: global

(function (global) {
  var factory = function () {
    var moduleName = {};
    return moduleName;
  };
  if (typeof module !== "undefined" && typeof exports === "object") {
    module.exports = factory;
  } else if (typeof define === "function" && (define.cmd || define.amd)) {
    define(factory);
  } else {
    global.factory = factory;
  }
})(typeof window !== "undefined" ? window : global);

Nota: Menambah titik koma sebelum penutupan adalah untuk mengisi kekosongan untuk modul sebelumnya Jika terdapat terlalu banyak titik bertitik, tiada masalah terlalu sedikit, kenyataan itu mungkin berubah.

Kemudian, anda boleh dengan senang hati menghubungi

//Node.js
var myModule = require('moduleName')

//Seajs
define(function(require,exports,module){
  var myModule = require('moduleName')
})

// Browser global
<script src=&#39;moduleName.js&#39;></script>

[Tamat]

Pembelajaran yang disyorkan:

Tutorial Lanjutan JavaScript

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara menulis modul biasa menggunakan JS (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!