Kelebihan pengaturcaraan modular Modul (perkongsian ringkasan)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan kelebihan pengaturcaraan modular Modul Memandangkan fungsi bahagian hadapan menjadi semakin kompleks, kod bahagian hadapan menjadi semakin berkembang untuk mengurangkan Untuk mengurangkan kos penyelenggaraan dan meningkatkan kebolehgunaan semula kod, modularisasi bahagian hadapan adalah penting. Mari kita lihat bersama-sama.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Latar belakang

Apabila fungsi bahagian hadapan menjadi semakin kompleks, kod bahagian hadapan berkembang dari hari ke hari Untuk mengurangkan kos penyelenggaraan dan meningkatkan kebolehgunaan semula kod, modularisasi bahagian hadapan adalah penting.

Semua fail js diperkenalkan dalam satu html, menyebabkan kesan buruk berikut:

• Terlalu banyak permintaan. Pertama sekali, kita perlu bergantung pada berbilang modul, yang akan menghantar berbilang permintaan, mengakibatkan terlalu banyak permintaan

• kebergantungan yang tidak jelas. Kami tidak tahu apakah kebergantungan khusus mereka, yang bermaksud mudah untuk membuat ralat dalam urutan pemuatan kerana kami tidak memahami kebergantungan antara mereka.

• Sukar diselenggara. Dua sebab di atas menjadikannya sukar untuk dikekalkan, dan kemungkinan besar satu perkara akan menjejaskan seluruh badan, menyebabkan masalah serius dalam projek itu.

Konsep modul

pak web ditakrifkan seperti ini:

Dalam pengaturcaraan modular, pembangun menguraikan atur cara menjadi blok fungsi diskret ( ketulan diskret fungsi), dan dipanggil modul. Setiap modul mempunyai permukaan hubungan yang lebih kecil daripada program yang lengkap, membuat pengesahan, penyahpepijatan dan ujian dengan mudah. Modul yang ditulis dengan baik memberikan sempadan abstraksi dan enkapsulasi yang kukuh supaya setiap modul dalam aplikasi mempunyai reka bentuk yang koheren dan tujuan yang jelas.

Modul hendaklah blok berfungsi diskret dengan tanggungjawab tunggal, bebas antara satu sama lain, gandingan rendah, perpaduan tinggi dan kebolehgantian.

Konsep modulariti

Modularisasi ialah satu cara untuk menguraikan sistem yang kompleks kepada modul yang boleh diurus dengan lebih baik Ia boleh membahagikan kod sistem kepada satu siri Dengan tanggungjawab tunggal, modul yang sangat dipisahkan dan boleh diganti, ia akan menjadi jelas bagaimana perubahan dalam satu bahagian sistem akan mempengaruhi bahagian lain, menjadikan kebolehselenggaraan sistem lebih mudah dan lebih mudah dicapai.

Modularisasi ialah idea pecah-dan-takluk, yang mencapai kawalan halus dengan menguraikan sistem kompleks kepada modul bebas, yang sangat bermanfaat untuk penyelenggaraan dan pengurusan sistem kompleks. Modulariti juga merupakan asas komponenisasi dan prasyarat untuk dunia hadapan yang berwarna-warni hari ini.

Mengapa modularisasi diperlukan

Perbezaan utama antara pembangunan front-end dan kerja pembangunan lain, pertama, front-end adalah berdasarkan berbilang bahasa, berbilang- pengekodan tahap dan kerja organisasi; kedua, penghantaran Produk bahagian hadapan adalah berdasarkan penyemak imbas Sumber ini dijalankan ke penyemak imbas melalui pemuatan tambahan dan elegan pada bahagian pelayar? Untuk mengemas kini, sistem modular diperlukan.

Faedah modulariti

• Kebolehselenggaraan. Oleh kerana modul adalah bebas, modul yang direka bentuk dengan baik akan menjadikan kod luar kurang bergantung pada dirinya sendiri, supaya ia boleh dikemas kini dan diperbaiki secara bebas.

• ruang nama . Dalam JavaScript, jika pembolehubah diisytiharkan di luar fungsi peringkat atas, ia akan tersedia secara global. Oleh itu, konflik penamaan sering berlaku secara tidak sengaja. Menggunakan pembangunan modular untuk merangkum pembolehubah boleh mengelakkan pencemaran alam sekitar global.

• Guna semula kod. Kami kadang-kadang suka menyalin kod daripada projek yang ditulis sebelum ini kepada projek baharu Ini tiada masalah, tetapi cara yang lebih baik adalah untuk mengelakkan penduaan asas kod melalui rujukan modul. Selepas mengemas kini modul, kami boleh mengemas kini semua projek yang merujuk modul secara serentak dan menentukan nombor versi untuk mengelakkan masalah yang disebabkan oleh perubahan API.

Sejarah ringkas pemodulatan

1. Cara paling mudah dan kasar

function fn1(){
  // ...
}
function fn2(){
  // ...
}

Perkenalkan fail melalui tag skrip dan fungsi berkaitan panggilan. Ini memerlukan pengurusan perintah pergantungan secara manual, yang boleh menyebabkan konflik penamaan dengan mudah dan mencemarkan keadaan keseluruhan Apabila kerumitan projek meningkat, kos penyelenggaraan menjadi lebih tinggi dan lebih tinggi.

2. Gunakan objek untuk mensimulasikan ruang nama

var output = {
  _count: 0,
  fn1: function(){
    // ...
  }
}

Ini boleh menyelesaikan masalah pencemaran global di atas, tetapi apabila kerumitan projek meningkat, ia perlu menjadi semakin kompleks. Semakin banyak objek seperti itu perlu dikekalkan antara lain, penamaan adalah masalah. Perkara yang paling kritikal ialah sifat dalaman masih boleh diakses dan diubah suai secara terus.

3. Penutupan

var module = (function(){
  var _count = 0;
  var fn1 = function (){
    // ...
  }
  var fn2 = function fn2(){
    // ...
  }
  return {
    fn1: fn1,
    fn2: fn2
  }
})()
module.fn1();
module._count; // undefined

这样就拥有独立的词法作用域，内存中只会存在一份 copy。这不仅避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域，通过 return 暴露出公共接口供外界调用。这其实就是现代模块化实现的基础。

4. 更多

还有基于闭包实现的松耦合拓展、紧耦合拓展、继承、子模块、跨文件共享私有对象、基于 new 构造的各种方式，这种方式在现在看来都不再优雅。

// 松耦合拓展
// 这种方式使得可以在不同的文件中以相同结构共同实现一个功能块，且不用考虑在引入这些文件时候的顺序问题。
// 缺点是没办法重写你的一些属性或者函数，也不能在初始化的时候就是用module的属性。
var module = (function(my){
  // ...
  return my
})(module || {})
// 紧耦合拓展（没有传默认参数）
// 加载顺序不再自由，但是可以重载
var module = (function(my){
  var old = my.someOldFunc
  
  my.someOldFunc = function(){
    // 重载方法，依然可通过old调用旧的方法...
  }
  return my
})(module)

实现模块化的方案规范总览

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

目前实现模块化的规范主要有：

• CommonJS

CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。

采用同步加载模块的方式，也就是说只有加载完成，才能执行后面的操作。CommonJS 代表：Node 应用中的模块，通俗的说就是你用 npm 安装的模块。

它使用 require 引用和加载模块，exports 定义和导出模块，module 标识模块。使用 require 时需要去读取并执行该文件，然后返回 exports 导出的内容。

• CMD

CMD（Common Module Definition）

CMD是SeaJS在推广过程中生产的对模块定义的规范，在Web浏览器端的模块加载器中，SeaJS与RequireJS并称，SeaJS作者为阿里的玉伯。

CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。

• AMD

AMD（Asynchronous Module Definition）

异步模块定义，所谓异步是指模块和模块的依赖可以被异步加载，他们的加载不会影响它后面语句的运行。有效避免了采用同步加载方式中导致的页面假死现象。AMD代表：RequireJS。

AMD一开始是CommonJS规范中的一个草案，全称是Asynchronous Module Definition，即异步模块加载机制。后来由该草案的作者以RequireJS实现了AMD规范，所以一般说AMD也是指RequireJS。

RequireJS是一个工具库，主要用于客户端的模块管理。它的模块管理遵守AMD规范，RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。

• ES6模块

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。所以说ES6是编译时加载，不同于CommonJS的运行时加载(实际加载的是一整个对象)，ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式。

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上”use strict”;。

严格模式主要有以下限制。

• 变量必须声明后再使用

• 函数的参数不能有同名属性，否则报错

• 不能使用with语句

• 不能对只读属性赋值，否则报错

• 不能使用前缀 0 表示八进制数，否则报错

• 不能删除不可删除的属性，否则报错

• 不能删除变量delete prop，会报错，只能删除属性delete global[prop]

• eval不会在它的外层作用域引入变量

• eval和arguments不能被重新赋值

• arguments不会自动反映函数参数的变化

• 不能使用arguments.callee

• 不能使用arguments.caller

• 禁止this指向全局对象

• Tidak boleh menggunakan fn.caller dan fn.arguments untuk mendapatkan timbunan panggilan fungsi

• Menambahkan perkataan terpelihara (seperti dilindungi, statik dan antara muka)

Modul mesti mematuhi sekatan di atas.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Kelebihan pengaturcaraan modular Modul (perkongsian ringkasan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!