모듈 모듈러 프로그래밍의 장점(요약 공유)-JS 튜토리얼-php.cn

이 글에서는 모듈 모듈형 프로그래밍의 장점을 주로 소개하는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 模块就是对象，输入时必须查找对象属性。

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