Bagaimana untuk mengatur sejumlah besar kod javascript-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengatur sejumlah besar kod javascript

王林

Lepaskan： 2023-05-12 10:18:36

asal

936 orang telah melayarinya

Dengan pembangunan teknologi bahagian hadapan, JavaScript, sebagai bahasa pengaturcaraan asas dan digunakan secara meluas, digunakan oleh semakin banyak tapak web dan aplikasi. Beberapa aplikasi yang lebih kompleks memerlukan penggunaan JavaScript secara besar-besaran Pada masa ini, cara mengatur dan mengurus sejumlah besar kod JavaScript telah menjadi isu yang sangat penting.

Kaedah organisasi tradisional - tag skrip

Cara paling awal untuk mengatur kod JavaScript adalah dengan menggunakan tag skrip Kaedah ini sangat mudah, masukkan kod JavaScript terus ke dalam fail HTML, seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript Code Organization</title>
    <script src="path/to/script1.js"></script>
    <script src="path/to/script2.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Salin selepas log masuk

Kelebihan kaedah ini ialah ia mudah dan mudah digunakan, dan ia juga sangat mudah untuk projek kecil. Walau bagaimanapun, apabila skala aplikasi meningkat, peningkatan dalam jumlah kod akan menyukarkan untuk mengurus, menyelenggara dan mengubah suai, dan ini akan menyebabkan pertindihan kod dan mengurangkan kecekapan pembangunan.

Konsep JavaScript modular

Untuk menyelesaikan masalah tersebut, kita perlu memahami konsep JavaScript modular. Modularisasi ialah proses penguraian fail besar kepada banyak fail kecil, setiap satunya mengandungi hanya satu unit berfungsi. Dengan menyusun kod JavaScript secara modular, kod itu boleh dipecahkan kepada beberapa bahagian untuk memudahkan penggunaan semula dan penyelenggaraan.

Pada masa ini, terdapat banyak penyelesaian modular JavaScript, seperti CommonJS, AMD, CMD, Modul ES6, dll. Anda boleh memilih penyelesaian yang sesuai mengikut keperluan projek. Artikel ini terutamanya akan memperkenalkan penyelesaian modularisasi yang biasa digunakan-Modul CommonJS dan ES6.

CommonJS

Spesifikasi CommonJS ialah spesifikasi modular berasaskan rujukan untuk pengurusan modul dan pemuatan dalam persekitaran bukan penyemak imbas (seperti Node.js).

Modul CommonJS menggunakan fungsi require() untuk memperkenalkan kebergantungan, dan menggunakan module.exports untuk mengeksport modul:

//引入代码
var module1 = require('module1');
var module2 = require('module2');

//导出代码
module.exports = someFunction;

Salin selepas log masuk

Penggunaan ini sangat mudah dan mudah untuk mengurus modul dan kebergantungan. Walau bagaimanapun, ia hanya berfungsi dalam persekitaran Node.js dan bukan dalam persekitaran front-end web. Dalam persekitaran web, penyelesaian lain perlu digunakan.

Modul ES6

Modul ES6 ialah kaedah pengurusan modul yang cekap yang disokong asli oleh penyemak imbas moden. Ia menggunakan pernyataan import untuk memperkenalkan modul yang diperlukan dan pernyataan eksport untuk mengeksport modul. Berikut ialah contoh penggunaan mudah:

//引入代码
import { module1 } from './module1';
import { module2 } from './module2';

//导出代码
export { someFunction };

Salin selepas log masuk

Modul ES6 menggunakan pernyataan import dan eksport untuk mengurus dan mengawal kebergantungan antara modul Kaedah ini bukan sahaja sesuai untuk persekitaran Web, tetapi juga merupakan penyelesaian modular biasa pada masa ini .

Cara menyusun kod

Selain idea kemodularan, terdapat beberapa kaedah lain yang boleh membantu kami mengatur sejumlah besar kod JavaScript dengan lebih baik: ruang nama, kelas dan fungsi .

Ruang nama

Dalam JavaScript, ruang nama digunakan untuk membezakan nama lengkap modul fungsi yang berbeza dan mengelakkan konflik nama antara modul yang berbeza. Penggunaan ruang nama yang biasa adalah seperti berikut:

var MyApp = MyApp || {};

MyApp.namespace = function (ns_string) {
    var parts = ns_string.split('.'),
        parent = MyApp,
        i;

    if (parts[0] === "MyApp") {
        parts = parts.slice(1);
    }

    for (i = 0; i < parts.length; i += 1) {
        if (typeof parent[parts[i]] === "undefined") {
            parent[parts[i]] = {};
        }
        parent = parent[parts[i]];
    }

    return parent;
};

MyApp.namespace("myModule.project");

MyApp.myModule.project.myFunction = function () {
    // some code here
};

Salin selepas log masuk

Dengan menggunakan ruang nama, anda boleh mengurus dan melihat struktur kod dengan lebih baik dan mengelakkan pencemaran nama global.

Kelas

Menggunakan konsep kelas boleh mengabstrak kod logik dengan lebih baik ke dalam model berorientasikan objek, yang memudahkan penyelenggaraan kod masa hadapan. Model kelas yang lebih biasa adalah seperti berikut:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayName = function() {
    console.log("My name is " + this.name);
}

Person.prototype.sayAge = function() {
    console.log("I am " + this.age + " years old!")
}

var person1 = new Person("Jack", 20);
person1.sayName(); // My name is Jack
person1.sayAge();  // I am 20 years old!

Salin selepas log masuk

Fungsi

Fungsi ialah salah satu alatan yang paling biasa digunakan untuk pembangun untuk mengatur kod.

var module1 = (function() {
  var privateVar = "Hello, world!";

  function privateFunction() {
    console.log(privateVar);
  }

  return {
    publicFunction: function() {
      privateFunction();
    }
  };
})();

//调用函数
module1.publicFunction();

Salin selepas log masuk

Ringkasnya, apabila mengatur sejumlah besar kod JavaScript, kita perlu mengikut idea modular dan menggunakan alatan organisasi kod yang berbeza untuk melengkapkan abstraksi dan enkapsulasi kod untuk mencapai kebolehgunaan semula dan kebolehselenggaraan.

Atas ialah kandungan terperinci Bagaimana untuk mengatur sejumlah besar kod javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!