모듈 모듈러 프로그래밍의 장점(요약 공유)

이 글에서는 모듈 모듈형 프로그래밍의 장점을 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. 프론트 엔드 기능이 점점 더 복잡해짐에 따라 유지 관리를 줄이기 위해 프론트 엔드 코드도 날로 확장되고 있습니다. 비용을 절감하고 코드 효율성을 향상시킵니다. 재사용성과 프런트엔드 모듈화가 모두에게 도움이 되기를 바랍니다.

[관련 권장사항: javascript 비디오 튜토리얼, web front-end]

Background

프런트엔드 기능이 점점 복잡해지면서 프론트엔드 코드도 날로 확장되고 있습니다. 유지 관리 비용을 줄이고 코드 재사용성을 향상하려면 프런트 엔드 모듈화가 필수적입니다.

모든 js 파일이 하나의 HTML로 도입되어 다음과 같은 부작용이 발생합니다:

• 요청이 너무 많습니다. 우선, 여러 요청을 보내는 여러 모듈에 의존해야 하므로 요청이 너무 많아

• 모호한 종속성이 발생합니다. 우리는 그들의 특정 종속성이 무엇인지 모릅니다. 즉, 우리는 그들 사이의 종속성을 이해하지 못하기 때문에 로딩 순서에서 오류가 발생하기 쉽습니다.

• 유지관리가 어렵습니다. 위의 두 가지 이유 때문에 유지 관리가 어렵고, 한 가지가 전신에 영향을 미쳐 프로젝트에 심각한 문제를 일으킬 가능성이 매우 높습니다.

모듈의 개념

은 webpack에서 다음과 같이 정의됩니다.

모듈형 프로그래밍에서 개발자는 프로그램을 개별적인 기능 덩어리로 분해하고 이를 모듈이라고 부릅니다. 각 모듈은 전체 프로그램보다 접촉 표면이 작으므로 확인, 디버깅 및 테스트가 간편합니다. 잘 작성된 모듈은 견고한 추상화 및 캡슐화 경계를 제공하므로 애플리케이션의 각 모듈은 일관된 디자인과 명확한 목적을 갖습니다.

모듈은 단일 책임을 갖고 서로 독립적이며 낮은 결합도, 높은 응집력 및 교체 가능성을 지닌 개별 기능 블록이어야 합니다.

모듈화의 개념

모듈화는 시스템 코드를 단일 책임, 높은 분리 및 교체 가능성을 지닌 일련의 모듈로 나눌 수 있는 방법입니다. 시스템의 한 부분이 다른 부분에 영향을 미치므로 시스템의 유지 관리가 더 쉬워집니다.

모듈화는 복잡한 시스템을 독립적인 모듈로 분해하여 세밀한 제어를 달성하는 분할 정복 아이디어로, 복잡한 시스템의 유지 관리에 매우 유용합니다. 모듈화는 구성 요소화의 초석이자 오늘날의 다채로운 프런트 엔드 세계를 위한 전제 조건이기도 합니다.

모듈화가 필요한 이유

프론트엔드 개발과 기타 개발 작업의 주요 차이점은 프론트엔드가 다국어, 다단계 코딩 및 조직적 작업을 기반으로 한다는 것입니다. 최종 제품은 브라우저를 기반으로 하며, 개발 환경에서 이러한 조각난 코드와 리소스를 구성하고 브라우저 측에서 빠르고 우아하게 로드 및 업데이트하는 방법은 브라우저 측에서 실행됩니다. 모듈식 시스템.

모듈화의 이점

• 유지관리성. 모듈은 독립적이기 때문에 잘 설계된 모듈은 외부 코드의 자체 의존성을 줄여 독립적으로 업데이트하고 개선할 수 있습니다.

• 네임스페이스. JavaScript에서는 변수가 최상위 함수 외부에서 선언되면 전역적으로 사용할 수 있게 됩니다. 따라서 이름 충돌이 실수로 발생하는 경우가 많습니다. 모듈식 개발을 사용하여 변수를 캡슐화하면 전역 환경을 오염시키는 것을 피할 수 있습니다.

• 코드 재사용. 때때로 이전에 작성된 프로젝트의 코드를 새 프로젝트에 복사하는 것을 좋아하지만 이는 문제가 되지 않습니다. 그러나 더 좋은 방법은 모듈 참조를 통해 코드 베이스가 중복되는 것을 피하는 것입니다. 모듈을 업데이트한 후에는 해당 모듈을 참조하는 모든 프로젝트를 동시에 업데이트하고 버전 번호를 지정하여 API 변경으로 인한 문제를 피할 수 있습니다.

모듈화의 간략한 역사

1. 가장 간단하고 투박한 방법

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

스크립트 태그와 호출 관련 기능을 통해 파일을 소개합니다. 이를 위해서는 종속성 순서를 수동으로 관리해야 하며, 이는 쉽게 이름 충돌을 일으키고 전체 상황을 오염시킬 수 있으며, 프로젝트의 복잡성이 증가함에 따라 유지 관리 비용이 점점 더 높아집니다.

2. 개체를 사용하여 네임스페이스 시뮬레이션

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

위의 전역 오염 문제를 해결할 수 있습니다. 이는 네임스페이스의 의미가 있지만 프로젝트가 복잡해짐에 따라 유지 관리가 필요한 개체가 점점 더 많아집니다. , 이름을 선택하는 것이 문제입니다. 가장 중요한 점은 내부 속성에 직접 액세스하고 수정할 수 있다는 것입니다.

3. 폐쇄

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指向全局对象

• fn.caller 및 fn.arguments를 사용하여 함수 호출 스택을 얻을 수 없습니다.

• 추가된 예약어(예: 보호, 정적 및 인터페이스)

모듈은 위 제한 사항을 준수해야 합니다.

【관련 추천: javascript 비디오 튜토리얼, web front-end】

위 내용은 모듈 모듈러 프로그래밍의 장점(요약 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!