Memahami kemahiran modularity_javascript javascript

Pemodularan ialah amalan terbaik pengaturcaraan biasa. Pemodulatan atur cara memudahkan kita menggunakan kod orang lain dan memuatkan apa sahaja modul yang kita mahu untuk apa jua fungsi yang kita mahu, dengan itu meningkatkan kecekapan penggunaan kod dan meningkatkan kelajuan pembangunan.

Modul adalah seperti blok binaan, dengannya, kita boleh membina program dengan pelbagai fungsi dan gaya. Apakah ciri-ciri blok binaan? Kecil dan ringkas. Begitu juga, modul dalam program kami juga harus melakukan ini, memastikan bahawa fungsi yang anda cipta hanya menyelesaikan satu kerja pada satu masa, supaya pembangun lain boleh menyahpepijat dan mengubah suai kod anda tanpa perlu menyemak imbas semua kod untuk memikirkan setiap langkah. Apakah fungsi yang dilakukan oleh blok kod? Hanya dengan menjadi kecil dan ringkas seperti ini boleh mencapai fungsi universalnya.

1. Kaedah modularisasi JavaScript
1. Fungsi enkapsulasi
Skop JavaScript adalah berdasarkan fungsi, jadi kita boleh menggunakan fungsi sebagai modul.

function fn1(){
  //code
}

function fn2(){
  //code
}

Kelemahan: Pembolehubah global "Mencemarkan", tiada jaminan bahawa nama pembolehubah tidak akan bercanggah dengan modul lain

2

var myModule1 = {
  fn1: function(){
    //code
  },
  fn2: function(){
    //code
  }
}

Kelemahan: Semua ahli modul akan didedahkan, dan keadaan dalaman boleh ditimpa oleh bahagian luar

Segera laksanakan fungsi - disyorkan

var myModule = (function(){
  function fn1(){
    //code
  },
  function fn2(){
    //code
  },
  return {
    fn1: fn1,
    fn2: fn2
  };
})();

2. Kecil dan ringkas Mengenai kecil dan mudah, mari kita lihat contoh Sebagai contoh, kita kini ingin menulis fungsi yang mencipta pautan baharu dan menambah kelas untuk hiperpautan jenis "mailto". Anda boleh melakukan ini:

function addLink(text, url, parentElement) {
  var newLink = document.createElement('a');//创建a标签
  newLink.setAttribute('href', url);//为a标签设置href属性
  newLink.appendChild(document.createTextNode(text));//为a标签添加文本
  if(url.indexOf("mailto:")==-1){
    newLink.className = 'mail';
  }
  parentElement.appendChild(newLink);//将a标签添加到页面
}

Menulis dengan cara ini mungkin berfungsi, tetapi anda mungkin mendapati bahawa anda tidak dibenarkan menambah fungsi lain, jadi fungsi ini tidak berkenaan. Oleh itu, fungsi yang lebih spesifik, lebih sukar untuk menerapkannya pada situasi yang berbeza.

Cara fungsi ditulis di sini tidak memenuhi keperluan modulariti - satu fungsi hanya melakukan satu perkara. Mari sesuaikan fungsi:

function createLink(text,url) {
  var newLink = document.createElement('a');
  newLink.setAttribute('href', url);
  newLink.appendChild(document.createTextNode(text));
  return newLink;
}

Fungsi createLink di sini hanya melakukan satu perkara - buat dan kembalikan teg untuk ditambahkan pada halaman (kecil dan mudah), supaya kita boleh memanggil fungsi sedemikian apabila kita perlu membuat hiperpautan.

3. CommonJS Dalam persekitaran pelayar, kekurangan modul bukanlah masalah besar Lagipun, kerumitan program web adalah terhad tetapi di sisi pelayan, mesti ada modul untuk berinteraksi dengan sistem pengendalian dan aplikasi lain, jika tidak, pengaturcaraan tidak akan mungkin sama sekali. Walaupun JavaScript telah dibangunkan di web selama bertahun-tahun, spesifikasi modular popular pertama dibawa oleh aplikasi JavaScript sebelah pelayan Spesifikasi CommonJS dibawa ke hadapan oleh NodeJS, yang menandakan kemasukan rasmi pengaturcaraan modular JavaScript di atas pentas.
Sistem modul node.js dilaksanakan mengikut spesifikasi CommonJS. Dalam CommonJS, terdapat kaedah global require() untuk memuatkan modul.
Muatkan modul:

var math = require('math');
Modul panggilan:

math.add(2,3)
Spesifikasi CommonJS tidak boleh digunakan pada persekitaran penyemak imbas kerana ia mempunyai had utama Dalam contoh di atas, baris kedua math.add(2, 3) mesti dijalankan selepas math.js dimuatkan. dan Semua modul diletakkan di bahagian pelayan, jadi ia mungkin mengambil masa yang lama bergantung pada kelajuan rangkaian.

Spesifikasi CommonJS terpakai pada bahagian pelayan, kerana untuk bahagian pelayan, semua modul disimpan dalam cakera keras tempatan dan boleh dimuatkan secara serentak. Masa menunggu ialah masa membaca cakera keras

4. Bagaimanakah modul harus ditakrifkan dan dimuatkan?
AMD
Definisi Modul Tak Segerak takrif modul tak segerak, wakil utama: require.js Tujuan:
(1) Laksanakan pemuatan tak segerak bagi fail js untuk mengelakkan halaman web kehilangan respons; (2) Mengurus kebergantungan antara modul untuk memudahkan penulisan dan penyelenggaraan kod.

1. Tentukan modul

define(["./cart", "./inventory"], function(cart, inventory) {
  //通过[]引入依赖
  return {
    color: "blue",
    size: "large",
    addToCart: function() {
      inventory.decrement(this);
      cart.add(this);
    }
  }
}
);

2. Muatkan modul

require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule,  myModule) {
  //This function will be called when all the dependencies
  //listed above are loaded. Note that this function could
  //be called before the page is loaded.
  //This callback is optional.
}
 );

CMD
Definisi Modul Biasa Takrif modul biasa, spesifikasi CMD dibangunkan di dalam negara. Wakil utama: sea.js 1. Tentukan modul

define(function(require, exports, module) {
 // 通过 require 引入依赖
 var $ = require('jquery');
 var Spinning = require('./spinning');
 // 通过 exports 对外提供接口
 exports.doSomething = ...
 // 或者通过 module.exports 提供整个接口
 module.exports = ...
});

2. Muatkan modul

seajs.use("../static/hello/src/main")
Perbezaan: Untuk modul bergantung, AMD dilaksanakan lebih awal dan CMD dilaksanakan ditangguhkan. Walau bagaimanapun, bermula dari RequireJS 2.0, ia juga telah diubah untuk dapat menangguhkan pelaksanaan (kaedah pemprosesan adalah berbeza bergantung pada kaedah penulisan). CMD mengesyorkan semalas mungkin.

CMD menyokong pergantungan berdekatan, AMD menyokong pergantungan di hadapan.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.